/* Strickle design tokens — the LOCKED system (claude.ai/design "Strickle Design System",
   2026-07-20). Recipe: accent=bottle-green · bg=warm · ramp=darker · chips=pills ·
   tint=80 · font=nunito-sans · num=ui. Hand-tuned FLAT sheet (the computed seed→ladder
   architecture lost the bake-off); the chip washes are baked from the mixer formulas at
   t = 0.8 — formula recorded inline so the tint can be re-baked if ever re-opened.

   This file is the single source of color/type/shape/motion truth: everything else styles
   via var(--…) — enforced by test/design/css_lint_test.rb. Loaded FIRST; the layer order
   below is the one declaration of cascade order for the whole app. */

@layer tokens, base, elements, components, utilities;

/* Self-hosted webfonts (both OFL). Nunito Sans is the UI face — the system stack lost the
   bake-off (renders differently per OS). IBM Plex Mono is the PROVENANCE signal, reserved
   for SQL + identifiers, never for data figures (numerals use the UI face). */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/nunito-sans-400-700-latin-8d1c4fd8.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: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/nunito-sans-400-700-latin-ext-a9b5208c.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-400-latin-d13bb5b4.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-400-latin-ext-182606ec.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-500-latin-deab9c2b.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-500-latin-ext-2cd882f8.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer tokens {
  :root {
    /* ---- Neutrals — warm/beige ground (hue 85) ---- */
    --page: oklch(0.975 0.004 85);           /* app background; off-white, never stark #fff */
    --surface: oklch(1 0 0);                 /* card / table / drawer — the only elevation */
    --surface-sunken: oklch(0.962 0.005 85); /* table heads, code wells */
    --border: oklch(0.9 0.008 85);           /* hairline — does the structural work */
    --border-strong: oklch(0.83 0.01 85);    /* inputs, emphasized dividers, outline chips */
    --nav-hover: oklch(0.942 0.008 85);      /* HAND-TUNED: --surface-sunken read as "no hover"
                                                against --page; one step darker */

    /* ---- Text ramp — darker high-contrast (locked over the lighter editorial ramp) ---- */
    --text: oklch(0.17 0.01 270);            /* 17.9:1 on page */
    --text-secondary: oklch(0.35 0.012 270); /* 10.6:1 on page */
    --text-faint: oklch(0.47 0.012 270);     /* timestamps/meta ONLY — 6.4:1 on page */

    /* ---- Accent — bottle green: actions, links, active nav, selection, focus, charts ---- */
    --accent: oklch(0.36 0.078 162);         /* 10.5:1 on surface */
    --accent-hover: oklch(0.31 0.075 162);   /* HAND-TUNED: −0.05 L, slight −C so hover doesn't buzz */
    --accent-active: oklch(0.27 0.07 162);
    --accent-tint: oklch(0.946 0.0222 162);  /* selection bg, active nav — baked 0.93+0.02t, 0.011+0.014t @ t=0.8 */
    --on-accent: oklch(0.99 0.004 120);      /* HAND-TUNED: hair of warm green — pure #fff sparkled */
    --focus-ring: oklch(0.55 0.1 162);       /* 2px ring, offset by 2px of surface */

    /* ---- Semantics — green=success, red=ERRORS ONLY, amber=warning, blue=info ---- */
    --success: oklch(0.46 0.11 155);
    --success-text: oklch(0.4 0.1 155);      /* HAND-TUNED: darker than --success to clear 7:1 on its wash */
    --warning: oklch(0.5 0.11 75);
    --warning-text: oklch(0.43 0.1 75);      /* HAND-TUNED: amber is the hardest hue to keep legible */
    --error: oklch(0.5 0.17 27);             /* solid error fill; white text on it = 6.5:1 */
    --error-text: oklch(0.44 0.16 27);       /* HAND-TUNED: field-error copy + chip text; 8.4:1 on surface */
    --info: oklch(0.46 0.12 240);

    /* ---- Status/trust chip washes — baked at chip tint 80 (formulas @ t = 0.8) ---- */
    --chip-ok-bg: oklch(0.948 0.0308 155);   /* 0.94+0.01t, 0.014+0.021t */
    --chip-ok-text: var(--success-text);
    --chip-warn-bg: oklch(0.957 0.044 90);   /* 0.945+0.015t, 0.02+0.03t */
    --chip-warn-text: var(--warning-text);
    --chip-err-bg: oklch(0.954 0.0184 25);   /* 0.95+0.005t, 0.012+0.008t */
    --chip-err-text: var(--error-text);
    --chip-info-bg: oklch(0.954 0.0184 240); /* 0.95+0.005t, 0.012+0.008t */
    --chip-info-text: var(--info);

    /* ---- Charts ---- */
    --chart-series: var(--accent);           /* single-series charts use the accent, full stop */
    --chart-grid: oklch(0.928 0.006 85);
    --chart-axis: var(--text-faint);
    --chart-gap: oklch(0.88 0.008 85);       /* 45° hatch stripe for missing data — a GAP, never fake zeros */

    /* ---- Typography (locked scale; numerals use the UI face — mono is provenance-only) ---- */
    --font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --num-font: var(--font);                 /* data figures render in the UI face */
    --type-h1: 650 24px/32px var(--font);    /* page titles — pair with --tracking-h1 */
    --tracking-h1: -0.01em;
    --type-h2: 600 17px/24px var(--font);
    --type-label: 600 11px/16px var(--font); /* table heads, section labels — uppercase */
    --tracking-label: 0.08em;
    --type-body: 400 14px/22px var(--font);
    --type-small: 400 12.5px/18px var(--font);
    --type-mono: 400 12.5px/20px var(--font-mono);

    /* Control type — every interactive label draws from this set. A raw font shorthand on
       a control is exactly the drift these names exist to prevent. */
    --type-control: 600 13px/20px var(--font);      /* buttons */
    --type-control-sm: 600 12.5px/18px var(--font); /* small buttons, field + menu labels */
    --type-input: 400 13.5px/20px var(--font);      /* inputs, selects, textareas */
    --type-nav: 500 13.5px/20px var(--font);        /* sidebar nav rows */
    --type-metric: 650 30px/36px var(--num-font);   /* stat figures — tabular-nums */

    /* The wordmark IS the mark — no logo exists, so the product name set in the UI face
       carries the brand and gets its own sizes rather than borrowing a heading's. */
    --type-wordmark: 700 16px/22px var(--font);
    --type-wordmark-lg: 700 20px/28px var(--font);
    --tracking-wordmark: 0.01em;

    --chip-font: 600 11.5px/17px var(--font);
    --type-badge: 700 10.5px/16px var(--font); /* the nav pending count — smaller than a chip */

    /* ---- Shape · spacing ---- */
    --radius-sm: 6px;                        /* buttons, inputs, code wells */
    --radius: 10px;                          /* cards, tables, drawers */
    --chip-radius: 999px;                    /* chips are pills */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Sizes, not gaps. The --space scale measures the room BETWEEN things; a glyph or a
       control box is a different kind of number and gets its own token (css_lint keeps the
       two apart — a --space-* value on width/height fails the build). */
    --icon: 16px;                            /* inline glyphs: spinner, checkbox, close, copy */
    --icon-lg: 26px;                         /* the sidebar cog's hit box */
    --container: 64rem;                      /* main content column */
    --prose: 42rem;                          /* comfortable prose width (subtitles, help copy) */
    --column-narrow: 24rem;                  /* a column that must stay scannable: auth card, empty state */

    /* ---- Stacking — the whole vocabulary, so a new overlay never has to guess a number.
       Anything above --z-overlay would be covering the drawer, which nothing should. ---- */
    --z-raised: 2;                           /* a popover over its own siblings (the account menu) */
    --z-backdrop: 40;                        /* the scrim under a modal surface */
    --z-overlay: 50;                         /* the modal surface itself (the drawer) */

    /* ---- Elevation — three cool-tinted tiers, one per job: --shadow-sm lifts a control off
       the surface it sits on (buttons, inputs), --shadow-card is the locked card value, and
       --shadow-md is for what genuinely floats over the page (the drawer). The layered recipe
       reads better than a single blur, which is why the ladder outlived the DS's single
       card shadow. Alerts stay flat — their wash and hairline already separate them. ---- */
    --shadow-sm: 0 1px 2px oklch(0.25 0.02 260 / 0.05);
    --shadow-card: 0 1px 2px oklch(0.25 0.02 260 / 0.05), 0 2px 6px oklch(0.25 0.02 260 / 0.04);
    --shadow-md: 0 4px 8px oklch(0.25 0.02 260 / 0.04), 0 8px 16px oklch(0.25 0.02 260 / 0.05), 0 2px 4px oklch(0.25 0.02 260 / 0.03), 0 0 0 0.5px oklch(0.25 0.02 260 / 0.06);

    /* ---- Motion — the pre-lock house set, kept verbatim (the DS ships no motion tokens).
       Browser defaults (ease, ease-in-out) read as generic; nothing should use them. ---- */
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);  /* default for almost everything */
    --ease-out: cubic-bezier(0.17, 1, 0.32, 1);     /* decorative entrances */
    --ease-spring: cubic-bezier(0.35, 1.55, 0.65, 1); /* badges, pops, overshoot */
    --ease-in-out: cubic-bezier(0.66, 0, 0.34, 1);
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 280ms;
    --duration-spin: 800ms;     /* spinner revolution */
    --duration-skeleton: 1.6s;  /* drawer busy-pulse cycle */
    --duration-fill: 600ms;     /* field paste-fill cue — longer than UI transitions so it registers */
  }
}