/* ==========================================================================
   Kilnwork — design tokens
   Layer 1: raw palette (never used directly in section CSS)
   Layer 2: semantic tokens (the only colour names sections may use)
   Layer 3: theme remaps — system preference + explicit data-theme override
   ========================================================================== */

:root {
  /* ---- Layer 1: raw palette ------------------------------------------- */

  /* warm paper ramp */
  --palette-paper:        #FFFDF9;
  --palette-cream:        #F6F3EC;
  --palette-cream-deep:   #EDE8DE;

  /* ink ramp (warm near-black → warm grey) */
  --palette-ink:          #14120E;
  --palette-ink-muted:    #57524A;
  --palette-ink-subtle:   #86806F;

  /* kiln green — the brand ramp */
  --palette-green-900:    #041B14;
  --palette-green-800:    #06281E;
  --palette-green-600:    #0E5540;
  --palette-green-500:    #127A5A;   /* primary */
  --palette-green-400:    #2FA97E;
  --palette-green-300:    #5FD3A6;
  --palette-green-200:    #A6ECCB;
  --palette-green-050:    #EAFBF2;

  /* glaze accents */
  --palette-ember-600:    #B8431B;
  --palette-ember-500:    #DC5A26;   /* terracotta / kiln heat */
  --palette-ember-400:    #F07C46;
  --palette-ember-100:    #FBE3D6;
  --palette-cobalt-500:   #2C5FD6;   /* cobalt glaze */
  --palette-cobalt-300:   #7FA4F2;
  --palette-mint-glow:    #46E8A8;   /* on-dark highlight only */

  /* utility */
  --palette-danger:       #C0341A;
  --palette-success:      #0E7A4B;
  --palette-warning:      #B57A05;

  /* ---- Layer 2: semantic — LIGHT is the default theme ------------------ */

  --ink:              var(--palette-ink);
  --ink-muted:        var(--palette-ink-muted);
  --ink-subtle:       var(--palette-ink-subtle);
  --ink-on-brand:     var(--palette-paper);
  --ink-on-accent:    var(--palette-paper);

  --surface:          var(--palette-cream);
  --surface-raised:   var(--palette-paper);
  --surface-sunken:   var(--palette-cream-deep);
  --surface-overlay:  rgba(20, 18, 14, 0.55);
  --cream:            var(--palette-cream);

  --brand-deep:       var(--palette-green-800);
  --brand:            var(--palette-green-500);
  --brand-hover:      var(--palette-green-600);
  --brand-soft:       var(--palette-green-300);
  --brand-tint:       var(--palette-green-050);

  --accent:           var(--palette-ember-500);
  --accent-hover:     var(--palette-ember-600);
  --accent-tint:      var(--palette-ember-100);
  --accent-alt:       var(--palette-cobalt-500);
  --highlight:        var(--palette-green-600);   /* eyebrow / inline mark */

  --border:           rgba(20, 18, 14, 0.10);
  --border-strong:    rgba(20, 18, 14, 0.22);
  --ring:             var(--palette-green-500);

  --danger:           var(--palette-danger);
  --success:          var(--palette-success);
  --warning:          var(--palette-warning);

  /* dark-section inverse set — for bands that flip dark inside a light page.
     Sections opt in with the .is-inverse utility (see base.css). */
  --inv-ink:            var(--palette-paper);
  --inv-ink-muted:      #9EAFA7;
  --inv-ink-subtle:     #74857D;
  --inv-surface:        var(--palette-green-900);
  --inv-surface-raised: rgba(255, 255, 255, 0.06);
  --inv-surface-sunken: #030F0B;
  --inv-border:         rgba(255, 255, 255, 0.12);
  --inv-border-strong:  rgba(255, 255, 255, 0.26);
  --inv-highlight:      var(--palette-mint-glow);
  --inv-brand:          var(--palette-green-300);

  /* ---- Type ------------------------------------------------------------ */

  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
               Consolas, "Liberation Mono", monospace;

  /* fluid ramp, locked between 375px and 1440px viewports */
  --step--2: clamp(0.75rem,  0.728rem + 0.094vw, 0.8125rem);   /* 12 → 13 */
  --step--1: clamp(0.875rem, 0.853rem + 0.094vw, 0.9375rem);   /* 14 → 15 */
  --step-0:  clamp(1rem,     0.978rem + 0.094vw, 1.0625rem);   /* 16 → 17 */
  --step-1:  clamp(1.125rem, 1.103rem + 0.094vw, 1.1875rem);   /* 18 → 19 */
  --step-2:  clamp(1.25rem,  1.162rem + 0.376vw, 1.5rem);      /* 20 → 24 */
  --step-3:  clamp(1.5rem,   1.368rem + 0.563vw, 1.875rem);    /* 24 → 30 */
  --step-4:  clamp(1.75rem,  1.574rem + 0.751vw, 2.25rem);     /* 28 → 36 */
  --step-5:  clamp(2rem,     1.736rem + 1.127vw, 2.75rem);     /* 32 → 44 */
  --step-6:  clamp(2.25rem,  1.832rem + 1.784vw, 3.4375rem);   /* 36 → 55 */
  --step-7:  clamp(2.5rem,   1.840rem + 2.817vw, 4.375rem);    /* 40 → 70 */
  --step-8:  clamp(2.75rem,  1.870rem + 3.756vw, 5.25rem);     /* 44 → 84 */
  --step-9:  clamp(3rem,     1.768rem + 5.258vw, 6.5rem);      /* 48 → 104 */

  --leading-flat:  1;
  --leading-tight: 1.06;
  --leading-snug:  1.18;
  --leading-body:  1.55;
  --leading-loose: 1.7;

  --tracking-tighter: -0.035em;
  --tracking-tight:   -0.022em;
  --tracking-snug:    -0.012em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.09em;

  --weight-light:   300;
  --weight-book:    400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ---- Space ----------------------------------------------------------- */

  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-7:  2rem;      /* 32 */
  --space-8:  2.5rem;    /* 40 */
  --space-9:  3rem;      /* 48 */
  --space-10: 4rem;      /* 64 */
  --space-11: 5rem;      /* 80 */
  --space-12: 6rem;      /* 96 */
  --space-13: 7.5rem;    /* 120 */
  --space-14: 10rem;     /* 160 */
  --space-15: 12.5rem;   /* 200 */
  --space-16: 15rem;     /* 240 */

  /* section rhythm — fluid so short viewports don't waste a screen */
  --section-y:       clamp(var(--space-11), 8vw, var(--space-13));
  --section-y-tight: clamp(var(--space-9),  5vw, var(--space-11));
  --section-y-loose: clamp(var(--space-12), 11vw, var(--space-15));

  /* ---- Layout ---------------------------------------------------------- */

  --gutter: clamp(1rem, 0.35rem + 2.8vw, 3.5rem);   /* 16 → 56 page margin */
  --grid-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);    /* 16 → 32 column gap  */
  --container:        75rem;    /* 1200 — default content width   */
  --container-wide:   88.75rem; /* 1420 — full-bleed-ish sections */
  --container-narrow: 46rem;    /* 736  — centred copy blocks     */
  --measure:          65ch;     /* prose line length              */
  --measure-short:    38ch;     /* column copy                    */
  --header-h: 4.5rem;           /* 72 — sticky header height      */

  /* ---- Radii ----------------------------------------------------------- */

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-2xl:  36px;
  --radius-band: clamp(1.5rem, 3.2vw, 2.75rem);  /* 24 → 44 band top corners */
  --radius-pill: 999px;

  /* ---- Elevation — multi-layer, never a single blur -------------------- */

  --shadow-xs:
    0 1px 1px rgba(20, 18, 14, 0.04),
    0 0 0 1px rgba(20, 18, 14, 0.05);
  --shadow-sm:
    0 1px 2px rgba(20, 18, 14, 0.05),
    0 2px 6px -2px rgba(20, 18, 14, 0.06),
    0 0 0 1px rgba(20, 18, 14, 0.05);
  --shadow-md:
    0 2px 4px rgba(20, 18, 14, 0.04),
    0 6px 14px -4px rgba(20, 18, 14, 0.08),
    0 16px 32px -12px rgba(20, 18, 14, 0.10),
    0 0 0 1px rgba(20, 18, 14, 0.05);
  --shadow-lg:
    0 3px 6px rgba(20, 18, 14, 0.04),
    0 10px 22px -6px rgba(20, 18, 14, 0.08),
    0 28px 56px -18px rgba(20, 18, 14, 0.14),
    0 0 0 1px rgba(20, 18, 14, 0.06);
  --shadow-xl:
    0 4px 8px rgba(20, 18, 14, 0.05),
    0 16px 32px -8px rgba(20, 18, 14, 0.10),
    0 48px 88px -24px rgba(20, 18, 14, 0.20),
    0 0 0 1px rgba(20, 18, 14, 0.06);
  --shadow-lift:
    0 6px 12px -2px rgba(20, 18, 14, 0.10),
    0 22px 40px -12px rgba(20, 18, 14, 0.18),
    0 0 0 1px rgba(20, 18, 14, 0.06);
  --shadow-inset-hairline: inset 0 1px 0 0 rgba(255, 255, 255, 0.70);
  --glow-brand:  0 0 0 1px rgba(18, 122, 90, 0.35), 0 0 28px -6px rgba(18, 122, 90, 0.45);
  --glow-accent: 0 0 0 1px rgba(220, 90, 38, 0.35), 0 0 28px -6px rgba(220, 90, 38, 0.45);

  /* ---- Z-index --------------------------------------------------------- */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-header:    200;
  --z-drawer:    300;
  --z-overlay:   400;
  --z-toast:     500;

  /* ---- Motion ---------------------------------------------------------- */

  --ease-out-quad:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);

  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-4: 420ms;
  --dur-5: 640ms;
  --dur-6: 900ms;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Dark theme. Declared twice on purpose: once for the system preference
   (unless the user has explicitly chosen light) and once for the explicit
   toggle, so the toggle wins in both directions with no specificity war.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:              var(--palette-paper);
    --ink-muted:        #9EAFA7;
    --ink-subtle:       #74857D;
    --ink-on-brand:     var(--palette-green-900);
    --ink-on-accent:    var(--palette-paper);

    --surface:          #060F0C;
    --surface-raised:   #0C1A15;
    --surface-sunken:   #030A08;
    --surface-overlay:  rgba(3, 10, 8, 0.72);
    --cream:            var(--palette-cream);

    --brand-deep:       var(--palette-green-900);
    --brand:            var(--palette-green-300);
    --brand-hover:      var(--palette-green-200);
    --brand-soft:       var(--palette-green-400);
    --brand-tint:       rgba(95, 211, 166, 0.12);

    --accent:           var(--palette-ember-400);
    --accent-hover:     #FF9463;
    --accent-tint:      rgba(240, 124, 70, 0.14);
    --accent-alt:       var(--palette-cobalt-300);
    --highlight:        var(--palette-mint-glow);

    --border:           rgba(255, 255, 255, 0.11);
    --border-strong:    rgba(255, 255, 255, 0.26);
    --ring:             var(--palette-mint-glow);

    --danger:           #FF7A5E;
    --success:          #4FD9A0;
    --warning:          #F0C05A;

    --inv-ink:            var(--palette-ink);
    --inv-ink-muted:      var(--palette-ink-muted);
    --inv-ink-subtle:     var(--palette-ink-subtle);
    --inv-surface:        var(--palette-cream);
    --inv-surface-raised: var(--palette-paper);
    --inv-surface-sunken: var(--palette-cream-deep);
    --inv-border:         rgba(20, 18, 14, 0.10);
    --inv-border-strong:  rgba(20, 18, 14, 0.22);
    --inv-highlight:      var(--palette-green-600);
    --inv-brand:          var(--palette-green-500);

    --shadow-xs:
      0 1px 1px rgba(0, 0, 0, 0.30),
      0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-sm:
      0 1px 2px rgba(0, 0, 0, 0.36),
      0 2px 6px -2px rgba(0, 0, 0, 0.40),
      0 0 0 1px rgba(255, 255, 255, 0.07);
    --shadow-md:
      0 2px 4px rgba(0, 0, 0, 0.34),
      0 6px 14px -4px rgba(0, 0, 0, 0.42),
      0 16px 32px -12px rgba(0, 0, 0, 0.50),
      0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-lg:
      0 3px 6px rgba(0, 0, 0, 0.34),
      0 10px 22px -6px rgba(0, 0, 0, 0.44),
      0 28px 56px -18px rgba(0, 0, 0, 0.58),
      0 0 0 1px rgba(255, 255, 255, 0.09);
    --shadow-xl:
      0 4px 8px rgba(0, 0, 0, 0.36),
      0 16px 32px -8px rgba(0, 0, 0, 0.46),
      0 48px 88px -24px rgba(0, 0, 0, 0.62),
      0 0 0 1px rgba(255, 255, 255, 0.09);
    --shadow-lift:
      0 6px 12px -2px rgba(0, 0, 0, 0.44),
      0 22px 40px -12px rgba(0, 0, 0, 0.56),
      0 0 0 1px rgba(255, 255, 255, 0.12);
    --shadow-inset-hairline: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    --glow-brand:  0 0 0 1px rgba(70, 232, 168, 0.35), 0 0 32px -6px rgba(70, 232, 168, 0.40);
    --glow-accent: 0 0 0 1px rgba(240, 124, 70, 0.35), 0 0 32px -6px rgba(240, 124, 70, 0.40);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink:              var(--palette-paper);
  --ink-muted:        #9EAFA7;
  --ink-subtle:       #74857D;
  --ink-on-brand:     var(--palette-green-900);
  --ink-on-accent:    var(--palette-paper);

  --surface:          #060F0C;
  --surface-raised:   #0C1A15;
  --surface-sunken:   #030A08;
  --surface-overlay:  rgba(3, 10, 8, 0.72);
  --cream:            var(--palette-cream);

  --brand-deep:       var(--palette-green-900);
  --brand:            var(--palette-green-300);
  --brand-hover:      var(--palette-green-200);
  --brand-soft:       var(--palette-green-400);
  --brand-tint:       rgba(95, 211, 166, 0.12);

  --accent:           var(--palette-ember-400);
  --accent-hover:     #FF9463;
  --accent-tint:      rgba(240, 124, 70, 0.14);
  --accent-alt:       var(--palette-cobalt-300);
  --highlight:        var(--palette-mint-glow);

  --border:           rgba(255, 255, 255, 0.11);
  --border-strong:    rgba(255, 255, 255, 0.26);
  --ring:             var(--palette-mint-glow);

  --danger:           #FF7A5E;
  --success:          #4FD9A0;
  --warning:          #F0C05A;

  --inv-ink:            var(--palette-ink);
  --inv-ink-muted:      var(--palette-ink-muted);
  --inv-ink-subtle:     var(--palette-ink-subtle);
  --inv-surface:        var(--palette-cream);
  --inv-surface-raised: var(--palette-paper);
  --inv-surface-sunken: var(--palette-cream-deep);
  --inv-border:         rgba(20, 18, 14, 0.10);
  --inv-border-strong:  rgba(20, 18, 14, 0.22);
  --inv-highlight:      var(--palette-green-600);
  --inv-brand:          var(--palette-green-500);

  --shadow-xs:
    0 1px 1px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.36),
    0 2px 6px -2px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.34),
    0 6px 14px -4px rgba(0, 0, 0, 0.42),
    0 16px 32px -12px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-lg:
    0 3px 6px rgba(0, 0, 0, 0.34),
    0 10px 22px -6px rgba(0, 0, 0, 0.44),
    0 28px 56px -18px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.09);
  --shadow-xl:
    0 4px 8px rgba(0, 0, 0, 0.36),
    0 16px 32px -8px rgba(0, 0, 0, 0.46),
    0 48px 88px -24px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.09);
  --shadow-lift:
    0 6px 12px -2px rgba(0, 0, 0, 0.44),
    0 22px 40px -12px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  --shadow-inset-hairline: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  --glow-brand:  0 0 0 1px rgba(70, 232, 168, 0.35), 0 0 32px -6px rgba(70, 232, 168, 0.40);
  --glow-accent: 0 0 0 1px rgba(240, 124, 70, 0.35), 0 0 32px -6px rgba(240, 124, 70, 0.40);

  color-scheme: dark;
}

/* Explicit light wins over a dark system preference. */
:root[data-theme="light"] {
  --ink:              var(--palette-ink);
  --ink-muted:        var(--palette-ink-muted);
  --ink-subtle:       var(--palette-ink-subtle);
  --ink-on-brand:     var(--palette-paper);

  --surface:          var(--palette-cream);
  --surface-raised:   var(--palette-paper);
  --surface-sunken:   var(--palette-cream-deep);
  --surface-overlay:  rgba(20, 18, 14, 0.55);

  --brand-deep:       var(--palette-green-800);
  --brand:            var(--palette-green-500);
  --brand-hover:      var(--palette-green-600);
  --brand-soft:       var(--palette-green-300);
  --brand-tint:       var(--palette-green-050);

  --accent:           var(--palette-ember-500);
  --accent-hover:     var(--palette-ember-600);
  --accent-tint:      var(--palette-ember-100);
  --accent-alt:       var(--palette-cobalt-500);
  --highlight:        var(--palette-green-600);

  --border:           rgba(20, 18, 14, 0.10);
  --border-strong:    rgba(20, 18, 14, 0.22);
  --ring:             var(--palette-green-500);

  --danger:           var(--palette-danger);
  --success:          var(--palette-success);
  --warning:          var(--palette-warning);

  --inv-ink:            var(--palette-paper);
  --inv-ink-muted:      #9EAFA7;
  --inv-ink-subtle:     #74857D;
  --inv-surface:        var(--palette-green-900);
  --inv-surface-raised: rgba(255, 255, 255, 0.06);
  --inv-surface-sunken: #030F0B;
  --inv-border:         rgba(255, 255, 255, 0.12);
  --inv-border-strong:  rgba(255, 255, 255, 0.26);
  --inv-highlight:      var(--palette-mint-glow);
  --inv-brand:          var(--palette-green-300);

  --shadow-xs:
    0 1px 1px rgba(20, 18, 14, 0.04),
    0 0 0 1px rgba(20, 18, 14, 0.05);
  --shadow-sm:
    0 1px 2px rgba(20, 18, 14, 0.05),
    0 2px 6px -2px rgba(20, 18, 14, 0.06),
    0 0 0 1px rgba(20, 18, 14, 0.05);
  --shadow-md:
    0 2px 4px rgba(20, 18, 14, 0.04),
    0 6px 14px -4px rgba(20, 18, 14, 0.08),
    0 16px 32px -12px rgba(20, 18, 14, 0.10),
    0 0 0 1px rgba(20, 18, 14, 0.05);
  --shadow-lg:
    0 3px 6px rgba(20, 18, 14, 0.04),
    0 10px 22px -6px rgba(20, 18, 14, 0.08),
    0 28px 56px -18px rgba(20, 18, 14, 0.14),
    0 0 0 1px rgba(20, 18, 14, 0.06);
  --shadow-xl:
    0 4px 8px rgba(20, 18, 14, 0.05),
    0 16px 32px -8px rgba(20, 18, 14, 0.10),
    0 48px 88px -24px rgba(20, 18, 14, 0.20),
    0 0 0 1px rgba(20, 18, 14, 0.06);
  --shadow-lift:
    0 6px 12px -2px rgba(20, 18, 14, 0.10),
    0 22px 40px -12px rgba(20, 18, 14, 0.18),
    0 0 0 1px rgba(20, 18, 14, 0.06);
  --shadow-inset-hairline: inset 0 1px 0 0 rgba(255, 255, 255, 0.70);
  --glow-brand:  0 0 0 1px rgba(18, 122, 90, 0.35), 0 0 28px -6px rgba(18, 122, 90, 0.45);
  --glow-accent: 0 0 0 1px rgba(220, 90, 38, 0.35), 0 0 28px -6px rgba(220, 90, 38, 0.45);

  color-scheme: light;
}