/* ══════════════════════════════════════════════════════════════════════════
   tokens.css — the whole visual system. Change here, every screen follows.

   Palette: ironbark and new growth. A deep olive-black taken from eucalypt
   bark, and the citron of fresh growth. Australian without costume.

   Governing rule: COLOUR MARKS THE EXCEPTION, NEVER THE NORM.
   On-time, in-budget, approved and on-brand rows carry no colour at all.
   Citron is reserved for primary action and current selection — which is
   why "success" is neutral plus a check glyph, never green.

   Every foreground/background pair below is measured by assets/js/color.js
   and printed live on design-system.html. Nothing here is eyeballed.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── FONTS ── */
/* Self-hosted. The factory network is not reliable and these pages must
   work from file:// with no requests leaving the machine. */

@font-face {
  font-family: 'Anybody';
  src: url('../fonts/anybody-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chivo';
  src: url('../fonts/chivo-var.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chivo Mono';
  src: url('../fonts/chivo-mono-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Anybody carries display type on the brand surface only. Its width axis
     is solved per-headline to fill the measure — a variable axis doing real
     work, and a quiet echo of what this company sells: things made to fit. */
  --font-display: 'Anybody', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui: 'Chivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Every ID, quantity, dimension, price, thread code and CSV cell. */
  --font-mono: 'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ───────────────────────────────────────────────── LIGHT PALETTE ── */

  /* Surfaces. bg is PURE white — the warmth lives in the brand colours and
     the type, not in a tinted near-white. */
  --bg:         oklch(1.000 0.000 0);
  --surface:    oklch(0.988 0.004 115);
  --panel:      oklch(0.968 0.007 115);   /* nav rail, toolbars, table heads */
  --sunken:     oklch(0.946 0.009 115);   /* wells, code blocks, empty states */

  /* Lines. Two roles, and the difference matters for accessibility:
     --line is a decorative separator (row rules, dividers) with no contrast
     requirement; --edge bounds an actual control and is measured at >= 3:1
     against every surface it sits on. Never swap them. */
  --line:       oklch(0.892 0.009 115);
  --edge:       oklch(0.620 0.014 115);   /* 3.63:1 on bg · 3.11:1 on sunken */

  /* Ink. --ink-3 is the muted/placeholder value and still clears 4.5:1 on
     every surface — light-grey "for elegance" is why so many interfaces are
     hard to read. */
  --ink:        oklch(0.220 0.014 115);   /* 17.34:1 on bg */
  --ink-2:      oklch(0.440 0.014 115);   /*  7.70:1 on bg */
  --ink-3:      oklch(0.520 0.013 115);   /*  5.49:1 on bg · 4.70:1 on sunken */

  /* Brand. bark drenches the marketing surface; citron is the signal. */
  --bark:       oklch(0.280 0.045 115);
  --bark-deep:  oklch(0.190 0.038 115);
  --bark-2:     oklch(0.380 0.045 115);
  --bark-line:  oklch(0.360 0.030 115);
  --citron:     oklch(0.860 0.190 108);
  /* A citron fill is only 1.50:1 against white — not enough to identify a
     control on its own — so every citron button carries this border. */
  --citron-edge:oklch(0.600 0.150 108);   /* 3.86:1 on bg */
  --citron-dim: oklch(0.930 0.090 108);   /* selected-row wash */
  --olive:      oklch(0.470 0.100 115);   /* links, interactive text */

  /* Text that sits ON a fixed brand colour must itself be fixed. These two
     deliberately do NOT flip with the theme: bark stays dark and citron
     stays bright in both, so their foregrounds stay put. Theme-swapping
     them is how a dark mode ends up with 1.38:1 button labels. */
  --on-bark:    oklch(0.985 0.004 115);
  --on-citron:  oklch(0.200 0.020 110);

  /* Status. Exceptions only. Each pairs a text-safe ink with a wash. */
  --danger:     oklch(0.520 0.180 25);
  --danger-bg:  oklch(0.960 0.030 25);
  --caution:    oklch(0.520 0.130 65);
  --caution-bg: oklch(0.965 0.040 75);
  --info:       oklch(0.500 0.100 240);
  --info-bg:    oklch(0.962 0.022 240);

  --focus:      oklch(0.470 0.140 250);

  /* Shadows. Depth comes from weight and surface, not from drop shadows —
     these stay quiet on purpose. */
  --shadow-1: 0 1px 2px oklch(0.220 0.014 115 / 0.06);
  --shadow-2: 0 2px 4px oklch(0.220 0.014 115 / 0.06), 0 6px 16px oklch(0.220 0.014 115 / 0.07);
  --shadow-3: 0 4px 8px oklch(0.220 0.014 115 / 0.07), 0 16px 40px oklch(0.220 0.014 115 / 0.10);

  /* ──────────────────────────────────────────────────── TYPE SCALE ── */
  /* Product register: fixed rem, ~1.15 ratio. A clamp()ed heading that
     shrinks inside a sidebar looks worse, not better. */
  --t-11: 0.6875rem;
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-21: 1.3125rem;
  --t-26: 1.625rem;
  --t-32: 2rem;

  /* Brand register: fluid, >= 1.25 ratio, ceiling under 6rem. */
  --d-1: clamp(2.5rem, 6.4vw, 5.25rem);
  --d-2: clamp(1.9rem, 4.2vw, 3.25rem);
  --d-3: clamp(1.45rem, 2.6vw, 2.05rem);

  /* ─────────────────────────────────────────────────────── SPACING ── */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;    --s-24: 6rem;
  --band: clamp(3.5rem, 9vh, 7rem);   /* brand-surface section rhythm */

  --r-1: 2px;  --r-2: 4px;  --r-3: 6px;  --r-4: 10px;  --r-full: 999px;

  /* ──────────────────────────────────────────────────────── MOTION ── */
  /* The built-in CSS easings are too weak. ease-in is never used for UI:
     it delays the first movement, exactly when the eye is watching. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 120ms;   /* button feedback */
  --t-fast:  160ms;   /* tooltips, small popovers */
  --t-base:  200ms;   /* dropdowns, tabs, most transitions */
  --t-slow:  280ms;   /* drawers, modals */

  /* ─────────────────────────────────────────────────────── Z-INDEX ── */
  /* Semantic scale. No 999, ever. */
  --z-raised: 10;  --z-sticky: 20;  --z-dropdown: 30;
  --z-scrim: 40;   --z-modal: 50;   --z-toast: 60;  --z-tooltip: 70;

  --nav-w: 15rem;
  --topbar-h: 3.5rem;
  --measure: 68ch;
}

/* ────────────────────────────────────────────────────── DARK THEME ── */
/* Used by the floor terminal always, and available across the app.
   Every pair re-measured; light type on dark reads lighter, so line-height
   gains 0.05 in base.css. */
[data-theme='dark'] {
  --bg:         oklch(0.170 0.012 115);
  --surface:    oklch(0.215 0.014 115);
  --panel:      oklch(0.258 0.015 115);
  --sunken:     oklch(0.140 0.010 115);

  --line:       oklch(0.330 0.016 115);
  --edge:       oklch(0.540 0.018 115);   /* 3.79:1 on bg · 3.11:1 on panel */

  --ink:        oklch(0.970 0.006 115);   /* 17.60:1 on bg */
  --ink-2:      oklch(0.800 0.010 115);   /* 10.28:1 on bg */
  --ink-3:      oklch(0.700 0.011 115);   /*  7.16:1 on bg */

  --bark:       oklch(0.215 0.014 115);
  --bark-deep:  oklch(0.140 0.010 115);
  --bark-2:     oklch(0.300 0.016 115);
  --bark-line:  oklch(0.330 0.016 115);
  --citron:     oklch(0.860 0.190 108);   /* 12.77:1 on bg */
  --citron-edge:oklch(0.860 0.190 108);
  --citron-dim: oklch(0.320 0.060 108);
  --olive:      oklch(0.820 0.120 112);

  --danger:     oklch(0.700 0.170 25);
  --danger-bg:  oklch(0.270 0.060 25);
  --caution:    oklch(0.780 0.140 75);
  --caution-bg: oklch(0.280 0.050 75);
  --info:       oklch(0.720 0.110 240);
  --info-bg:    oklch(0.265 0.045 240);

  --focus:      oklch(0.780 0.130 250);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.34);
  --shadow-2: 0 2px 4px oklch(0 0 0 / 0.34), 0 6px 16px oklch(0 0 0 / 0.40);
  --shadow-3: 0 4px 8px oklch(0 0 0 / 0.38), 0 16px 40px oklch(0 0 0 / 0.50);
}