/* ==========================================================================
   Design tokens — "Kerf" design system
   Source of truth: DESIGN.md. No build step: plain CSS custom properties.

   Theming contract
     :root                              light theme (default)
     @media (prefers-color-scheme:dark) dark theme when the visitor's OS asks
                                        for it and no explicit choice was made
     [data-theme="dark"]                explicit dark  (set on <html>)
     [data-theme="light"]               explicit light (set on <html>)

   The dark values appear twice (media query + attribute). Keep them in sync;
   tools/contrast.mjs verifies they match and checks WCAG contrast.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL 1.1 — see fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Brand (swappable — nothing below depends on the name) ---------- */
  --brand-logo-height: 28px;

  /* ---------- Raw palette (theme-independent) ---------- */
  --ember-300: #FFB08A;
  --ember-400: #FF8A57;
  --ember-500: #FF6A2E;
  --ember-600: #F04E12;
  --ember-700: #B43A06;
  --ember-800: #8A2B03;
  --coolant-300: #7FEAE0;
  --coolant-400: #4FE0D4;
  --coolant-500: #14B8AD;
  --coolant-700: #00706B;
  --coolant-800: #00524E;
  --graphite-950: #0F0F0E;
  --graphite-900: #181816;
  --graphite-800: #21211E;
  --graphite-700: #2E2D29;
  --bone-50: #FBFAF7;
  --bone-100: #F4F1EA;
  --bone-200: #EBE7DE;
  --bone-300: #DDD8CC;

  /* ---------- Typography ---------- */
  --font-sans: "Archivo", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  /* Archivo's width axis is the brand's voice: wide for display, normal for reading. */
  --font-width-display: 112%;
  --font-width-heading: 106%;
  --font-width-text: 100%;

  --text-display: clamp(2.5rem, 1.55rem + 4.6vw, 5rem);     /* 40 → 80 */
  --text-h1: clamp(2rem, 1.6rem + 1.9vw, 3rem);             /* 32 → 48 */
  --text-h2: clamp(1.5rem, 1.3rem + 1vw, 2rem);             /* 24 → 32 */
  --text-h3: clamp(1.25rem, 1.2rem + 0.25vw, 1.375rem);     /* 20 → 22 */
  --text-title: 1.0625rem;                                  /* 17 */
  --text-body-lg: 1.125rem;                                 /* 18 */
  --text-body: 1rem;                                        /* 16 */
  --text-body-sm: 0.875rem;                                 /* 14 */
  --text-label: 0.8125rem;                                  /* 13 */
  --text-caption: 0.75rem;                                  /* 12 */
  --text-data: 0.875rem;                                    /* 14 mono */
  --text-overline: 0.6875rem;                               /* 11 mono caps */

  --leading-display: 0.98;
  --leading-heading: 1.12;
  --leading-snug: 1.35;
  --leading-body: 1.55;

  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-label: 0.01em;
  --tracking-overline: 0.09em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---------- Spacing (4 px base) ---------- */
  --space-0: 0;
  --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 */

  --gutter: var(--space-4);               /* page side padding, grows at breakpoints (app.css) */
  --container: 76rem;                     /* 1216 px content width */
  --container-narrow: 44rem;
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* ---------- Sizing ---------- */
  --control-h: 2.75rem;                   /* 44 px — minimum touch target */
  --control-h-sm: 2.25rem;                /* 36 px — dense desktop panels only */
  --control-h-lg: 3.25rem;                /* 52 px — hero calls to action */
  --nav-h: 3.75rem;                       /* 60 px */
  --panel-w: 22.5rem;                     /* generator parameter panel, desktop */
  --assistant-w: 24rem;

  /* ---------- Shape ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 999px;
  --border-w: 1px;
  --border-w-strong: 1.5px;

  /* ---------- Motion ---------- */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);

  /* ---------- Layers ---------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-nav: 200;
  --z-sheet: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* ---------- Photography overlays (always dark: text on photos is always light) ---------- */
  --photo-scrim-none: rgba(15, 15, 14, 0);
  --photo-scrim-soft: rgba(15, 15, 14, 0.35);
  --photo-scrim-mid: rgba(15, 15, 14, 0.58);
  --photo-scrim-strong: rgba(15, 15, 14, 0.93);
  --photo-rule: rgba(242, 239, 232, 0.22);

  /* ---------- Rib motif (the brand device) ---------- */
  --rib-w: 3px;
  --rib-gap: 5px;

}

/* ======================================================================
   Semantic colour — LIGHT
   Also bound to [data-theme="light"] so a light island can sit inside a
   dark page (and the other way round with [data-theme="dark"]).
   ====================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --color-bg: #F4F1EA;
  --color-bg-subtle: #EBE7DE;
  --color-surface: #FBFAF7;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #EBE7DE;
  --color-surface-inverse: #181816;

  --color-border: #DDD8CC;
  --color-border-strong: #B9B2A3;
  --color-border-control: #857E70;

  --color-text: #16140F;
  --color-text-muted: #514C42;
  --color-text-subtle: #6A6558;
  --color-text-disabled: #9A9486;
  --color-text-inverse: #F2EFE8;

  --color-primary: #EC4B0F;
  --color-primary-hover: #FF6A2E;
  --color-primary-active: #DC440C;
  --color-on-primary: #100602;
  --color-primary-text: #A83505;
  --color-primary-soft: #FFE3D4;
  --color-on-primary-soft: #7A2603;

  --color-accent: #14B8AD;
  --color-on-accent: #031A18;
  --color-accent-text: #006863;
  --color-accent-soft: #D3F1EE;
  --color-on-accent-soft: #004B47;
  --color-accent-on-inverse: #4FE0D4;

  --color-success-text: #16663A;
  --color-success-soft: #DCF1E2;
  --color-on-success-soft: #125430;
  --color-warning-text: #7A4F00;
  --color-warning-soft: #FAE9C3;
  --color-on-warning-soft: #634000;
  --color-danger: #C4281C;
  --color-on-danger: #FFFFFF;
  --color-danger-text: #B02318;
  --color-danger-soft: #FBDFDB;
  --color-on-danger-soft: #8A1C15;

  --color-focus: #006863;
  --color-overlay: rgba(15, 15, 14, 0.56);
  --color-selection: #FFD2BC;

  --color-viewport-bg: #E4E0D6;
  --color-viewport-grid: rgba(22, 20, 15, 0.09);
  --color-rib: rgba(22, 20, 15, 0.10);

  --shadow-sm: 0 1px 2px rgba(22, 20, 15, 0.06), 0 1px 1px rgba(22, 20, 15, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(22, 20, 15, 0.12), 0 2px 4px rgba(22, 20, 15, 0.06);
  --shadow-lg: 0 24px 48px -12px rgba(22, 20, 15, 0.22), 0 4px 10px rgba(22, 20, 15, 0.08);
  --shadow-sheet: 0 -12px 32px -8px rgba(22, 20, 15, 0.20);
}

/* ======================================================================
   Semantic colour — DARK (OS preference, unless light was chosen)
   ====================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #0F0F0E;
    --color-bg-subtle: #141413;
    --color-surface: #181816;
    --color-surface-raised: #21211E;
    --color-surface-sunken: #0A0A09;
    --color-surface-inverse: #F4F1EA;

    --color-border: #2E2D29;
    --color-border-strong: #45433D;
    --color-border-control: #7A766B;

    --color-text: #F2EFE8;
    --color-text-muted: #B8B3A7;
    --color-text-subtle: #958F83;
    --color-text-disabled: #6B675E;
    --color-text-inverse: #16140F;

    --color-primary: #FF6A2E;
    --color-primary-hover: #FF8A57;
    --color-primary-active: #F04E12;
    --color-on-primary: #100602;
    --color-primary-text: #FF8A57;
    --color-primary-soft: #3A1A0C;
    --color-on-primary-soft: #FFB08A;

    --color-accent: #4FE0D4;
    --color-on-accent: #031A18;
    --color-accent-text: #4FE0D4;
    --color-accent-soft: #0C2F2D;
    --color-on-accent-soft: #7FEAE0;
    --color-accent-on-inverse: #006863;

    --color-success-text: #6FD897;
    --color-success-soft: #10301D;
    --color-on-success-soft: #86E0A8;
    --color-warning-text: #F2C05A;
    --color-warning-soft: #33270A;
    --color-on-warning-soft: #F5CC74;
    --color-danger: #FF6B5E;
    --color-on-danger: #1A0605;
    --color-danger-text: #FF8F85;
    --color-danger-soft: #3A1513;
    --color-on-danger-soft: #FFA79E;

    --color-focus: #4FE0D4;
    --color-overlay: rgba(0, 0, 0, 0.68);
    --color-selection: #6B2A0E;

    --color-viewport-bg: #131312;
    --color-viewport-grid: rgba(242, 239, 232, 0.07);
    --color-rib: rgba(242, 239, 232, 0.09);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(242, 239, 232, 0.04);
    --shadow-lg: 0 28px 56px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(242, 239, 232, 0.06);
    --shadow-sheet: 0 -16px 40px -8px rgba(0, 0, 0, 0.7);
  }
}

/* ======================================================================
   Semantic colour — DARK (explicit choice). Mirror of the block above.
   ====================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0F0F0E;
  --color-bg-subtle: #141413;
  --color-surface: #181816;
  --color-surface-raised: #21211E;
  --color-surface-sunken: #0A0A09;
  --color-surface-inverse: #F4F1EA;

  --color-border: #2E2D29;
  --color-border-strong: #45433D;
  --color-border-control: #7A766B;

  --color-text: #F2EFE8;
  --color-text-muted: #B8B3A7;
  --color-text-subtle: #958F83;
  --color-text-disabled: #6B675E;
  --color-text-inverse: #16140F;

  --color-primary: #FF6A2E;
  --color-primary-hover: #FF8A57;
  --color-primary-active: #F04E12;
  --color-on-primary: #100602;
  --color-primary-text: #FF8A57;
  --color-primary-soft: #3A1A0C;
  --color-on-primary-soft: #FFB08A;

  --color-accent: #4FE0D4;
  --color-on-accent: #031A18;
  --color-accent-text: #4FE0D4;
  --color-accent-soft: #0C2F2D;
  --color-on-accent-soft: #7FEAE0;
  --color-accent-on-inverse: #006863;

  --color-success-text: #6FD897;
  --color-success-soft: #10301D;
  --color-on-success-soft: #86E0A8;
  --color-warning-text: #F2C05A;
  --color-warning-soft: #33270A;
  --color-on-warning-soft: #F5CC74;
  --color-danger: #FF6B5E;
  --color-on-danger: #1A0605;
  --color-danger-text: #FF8F85;
  --color-danger-soft: #3A1513;
  --color-on-danger-soft: #FFA79E;

  --color-focus: #4FE0D4;
  --color-overlay: rgba(0, 0, 0, 0.68);
  --color-selection: #6B2A0E;

  --color-viewport-bg: #131312;
  --color-viewport-grid: rgba(242, 239, 232, 0.07);
  --color-rib: rgba(242, 239, 232, 0.09);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(242, 239, 232, 0.04);
  --shadow-lg: 0 28px 56px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(242, 239, 232, 0.06);
  --shadow-sheet: 0 -16px 40px -8px rgba(0, 0, 0, 0.7);
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}