/* Kilnkit brand tokens.
 *
 * The name is the concept: a kiln fires raw clay into a finished piece. That is exactly
 * what the add-on does to a raw texture folder. So the palette is heat and fired stone,
 * not the blue every other tool reaches for.
 *
 * Keep this file free of layout. It is the seed of a design system — the listing, social
 * cards and any future component library should pull their colour and type from here.
 */

:root {
  /* Ember — the fire in the kiln. The single accent. Used sparingly: it must stay loud. */
  --ember-500: #e8791f;
  --ember-400: #f2933f;
  --ember-600: #c25f11;
  --ember-glow: rgba(232, 121, 31, 0.14);

  /* Fired — warm neutrals, the colour of clay that has been through the kiln. */
  --fired-050: #faf7f3;
  --fired-100: #f0ebe4;
  --fired-200: #ddd5ca;
  --fired-400: #9c9086;
  --fired-600: #6b6058;

  /* Raw — cool greys, unfired. Structure, borders, code. */
  --raw-900: #14161a;
  --raw-800: #1c1f25;
  --raw-700: #262a32;
  --raw-500: #4a505c;
  --raw-300: #8b929e;

  /* Type scale — 1.25 ratio, clamped so it breathes on desktop without breaking mobile. */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem);

  /* System stack: zero network requests, identical in every preview surface. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;

  --weight-normal: 400;
  --weight-bold: 650;

  /* 4px grid. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 6px;
  --radius-lg: 14px;

  --measure: 62ch;      /* readable line length */
  --page: 1140px;       /* content max width */
}