/* ============================================================
   Kai — Colors & Type  (v2)
   Design principle: Sacred Minimalism — one living ember in breathing space.
   Two-register system: Ember (mark, accents) + Stillness (body).
   Tokens unchanged from v1; the strategy moved, not the palette.
   ============================================================ */

/* ── Webfonts (Google Fonts) ── */

:root {
  /* ──────────────────────────────────────────────────────
     EMBER REGISTER  ·  living warmth at the center
     The mark and hero moments only. Never on body surfaces.
     ────────────────────────────────────────────────────── */
  --fire-crimson:  #CC2200;   /* the strike — the K */
  --fire-ember:    #B22A15;   /* the bright bed of coals */
  --fire-amber:    #D9772B;   /* fire's warm tail / glint (deepened from neon) */
  --fire-mid:      #8B2010;   /* deeper ember */
  --fire-dark:     #4A1A10;   /* low coal */
  --fire-glow:     rgba(178, 42, 21, 0.30);

  --void:          #111111;   /* ground for the mark */
  --void-deep:     #0A0908;   /* deeper than ink, only behind the ember */

  /* ──────────────────────────────────────────────────────
     STILLNESS REGISTER  ·  the breath around the fire
     Where body, text, content live. No gradients here.
     ────────────────────────────────────────────────────── */
  --sand-50:       #F6F1E6;   /* warm paper */
  --sand-100:      #F5ECD7;   /* canonical sand */
  --sand-200:      #E9DCC4;   /* aged paper */
  --sand-300:      #D9C8AA;   /* parchment shadow */

  --ink-950:       #12100E;   /* nearly-void ink */
  --ink-900:       #1C1C1E;   /* canonical ink (deep charcoal) */
  --ink-800:       #2A2420;   /* warm charcoal */
  --ink-700:       #3A322C;   /* dust-grey */

  --indigo-900:    #2A2348;   /* deep wisdom */
  --indigo-800:    #3D3568;   /* canonical indigo */
  --indigo-600:    #5B5189;   /* indigo on sand */

  --copper-300:    #C7A070;   /* dim metal accent on void */
  --copper-400:    #B27D47;   /* copper, used sparingly */

  --gold-300:      #E7C07A;   /* candlelight / gilt highlight — accent words */
  --gold-400:      #C79A52;   /* antique gold — the quiet recurring warmth */

  /* ──────────────────────────────────────────────────────
     SEMANTIC TOKENS  ·  what the colors mean
     ────────────────────────────────────────────────────── */
  /* Surfaces */
  --surface-void:        var(--void);            /* hero / ember surface */
  --surface-paper:       var(--sand-100);        /* primary body surface */
  --surface-paper-soft:  var(--sand-50);         /* secondary body surface */
  --surface-paper-aged:  var(--sand-200);        /* recessed body surface */
  --surface-utility:     rgba(246, 241, 230, 0.94); /* sand over void */

  /* Foreground on void (ember) */
  --fg-on-void:          var(--sand-50);
  --fg-on-void-muted:    rgba(234, 223, 203, 0.72);
  --fg-on-void-quiet:    rgba(234, 223, 203, 0.45);
  --fg-accent-on-void:   var(--copper-300);

  /* Foreground on paper (stillness) */
  --fg-ink:              var(--ink-900);
  --fg-ink-muted:        var(--ink-700);
  --fg-ink-quiet:        rgba(28, 28, 30, 0.55);
  --fg-indigo:           var(--indigo-800);

  /* Action / accent — the only color outside the mark */
  --accent-fire:         var(--fire-ember);
  --accent-fire-bright:  var(--fire-crimson);
  --accent-fire-warm:    var(--fire-amber);
  --accent-glow:         var(--fire-glow);

  /* Borders & rules — pressed-ink hairlines, not panels */
  --rule-ink:            rgba(28, 28, 30, 0.18);
  --rule-ink-strong:     rgba(28, 28, 30, 0.35);
  --rule-on-void:        rgba(199, 160, 112, 0.22);
  --rule-on-void-strong: rgba(199, 160, 112, 0.45);

  /* ──────────────────────────────────────────────────────
     TYPE  ·  humanist serif display + humanist sans body
     ────────────────────────────────────────────────────── */
  --font-display: 'Spectral', 'Newsreader', 'EB Garamond', 'Georgia', serif;
  --font-body:    'Alegreya Sans', 'Source Sans 3', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale — generous, contemplative */
  --type-display-xl: clamp(3.0rem, 7.5vw, 5.6rem);   /* hero */
  --type-display-l:  clamp(2.4rem, 5.5vw, 4.0rem);   /* section opener */
  --type-display-m:  clamp(1.9rem, 3.8vw, 2.6rem);   /* h2 */
  --type-display-s:  clamp(1.35rem, 3vw, 1.9rem);    /* h3 */
  --type-quote:      clamp(1.4rem, 2.8vw, 1.9rem);   /* italic pull-quote */
  --type-body-l:     1.125rem;                        /* lede */
  --type-body:       1rem;                            /* default */
  --type-body-s:     0.92rem;                         /* footnote */
  --type-eyebrow:    0.72rem;                         /* eyebrow / kicker */
  --type-mono:       0.88rem;

  /* Leading */
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-body:    1.65;
  --leading-prose:   1.75;

  /* Tracking */
  --track-eyebrow:    0.28em;
  --track-button:     0.06em;
  --track-loose:      0.04em;
  --track-tight:     -0.01em;

  /* ──────────────────────────────────────────────────────
     SPACE  ·  space between elements is design, not waste
     ────────────────────────────────────────────────────── */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 9rem;     /*144 */

  /* ──────────────────────────────────────────────────────
     RADII  ·  capsules for action, hairlines for content
     ────────────────────────────────────────────────────── */
  --radius-pill:  999px;     /* the only rounded shape */
  --radius-card:  10px;      /* utility surfaces only */
  --radius-edge:  2px;       /* image / asset edges */

  /* ──────────────────────────────────────────────────────
     ELEVATION  ·  no drop shadows. only fire-glow & ink-press.
     ────────────────────────────────────────────────────── */
  --elev-none:      none;
  --elev-glow:      0 0 40px var(--fire-glow);
  --elev-glow-soft: 0 0 20px rgba(178, 42, 21, 0.10);
  --elev-press:     inset 0 0 20px rgba(178, 42, 21, 0.05);
  --elev-rule:      inset 0 -1px 0 var(--rule-ink);

  /* ──────────────────────────────────────────────────────
     MOTION  ·  unhurried. no bounces.
     ────────────────────────────────────────────────────── */
  --ease-still:   cubic-bezier(0.23, 1, 0.32, 1);  /* the long out-cubic */
  --ease-breath:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick:    180ms;
  --dur-base:     320ms;
  --dur-slow:     500ms;
  --dur-breath:   1800ms;   /* breath-pulse */
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.kai-h1, h1.kai {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-display-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-on-void);
  text-wrap: pretty;
}

.kai-h2, h2.kai {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-display-l);
  line-height: var(--leading-tight);
  text-wrap: pretty;
}

.kai-h3, h3.kai {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-m);
  line-height: var(--leading-snug);
}

.kai-h4, h4.kai {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-s);
  line-height: var(--leading-snug);
}

.kai-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-quote);
  line-height: var(--leading-snug);
  color: var(--fg-on-void);
}

.kai-lede {
  font-family: var(--font-body);
  font-size: var(--type-body-l);
  line-height: var(--leading-prose);
}

.kai-body, p.kai {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  max-width: 60ch;
}

.kai-footnote {
  font-family: var(--font-body);
  font-size: var(--type-body-s);
  line-height: var(--leading-body);
  color: var(--fg-on-void-muted);
}

.kai-eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: lowercase;        /* Radical Lowercase — Voice Law 4 */
  color: var(--copper-300);
}

.kai-mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0;
}

/* ============================================================
   SURFACE HELPERS
   ============================================================ */

.kai-surface-void   { background: var(--surface-void);        color: var(--fg-on-void); }
.kai-surface-paper  { background: var(--surface-paper);       color: var(--fg-ink); }
.kai-surface-aged   { background: var(--surface-paper-aged);  color: var(--fg-ink); }