/* =========================================================================
   assets/tokens.css — every colour, size, radius, shadow and layer the portal
   uses, in one place. Loaded before app.css by inc/layout.php.

   Three layers:
     primitive  raw values named by what they are   (--brown-700, --gold-500)
     semantic   values named by their job             (--text, --surface-page)
     component  values named by the element           (--btn-bg, --tbl-head-bg)
   and a block of aliases so every name app.css and the page stylesheets used
   before 2026-10-10 still resolves.

   Rule (CLAUDE.md, Conventions): colours, sizes, radii and shadows come from
   here. A raw hex in a page stylesheet is a review comment.

   Values agreed in DESIGN_SYSTEM_PORTAL.md, review of 9 October 2026, with the
   Sketchpad at "Roastery gold (today)", 10px corners, round pills, 14px base
   and 1px borders.
   ========================================================================= */
:root {
  /* ---- primitive: browns (dark surfaces and ink) ---------------------- */
  --brown-900: #1E140D;   /* topbar, login ground */
  --brown-800: #2E2015;   /* tooltip bubbles, toast, dark popovers */
  --brown-700: #251811;   /* body text */
  --brown-500: #6E655A;   /* secondary text, table headers */
  --brown-400: #8F877B;   /* captions, hints */

  /* ---- primitive: sands (light surfaces and hairlines) ---------------- */
  --sand-100: #FFFFFF;
  --sand-200: #F4F1EC;    /* page ground, table header band */
  --sand-300: #F3ECDD;    /* wash */
  --sand-400: #EEE6D6;    /* soft hairline */
  --sand-500: #E3D7C1;    /* hairline */
  --sand-ink: #F1E8DA;    /* text on dark */

  /* ---- primitive: golds ---------------------------------------------- */
  --gold-300: #F6EBD2;
  --gold-500: #E6C082;
  --gold-600: #C79C55;
  --gold-700: #8F6B24;
  --gold-800: #6E5219;    /* pressed */
  --gold-chart: #C9922F;  /* first categorical series; never text */

  /* ---- primitive: the Claude mark (says the AI wrote this) ---------- */
  --claude:       #C96442;
  --claude-hover: #A94E30;

  /* ---- primitive: chart plum, the transformation colour ------------- */
  --chart-plum: #8F6BC4;

  /* ---- primitive: status --------------------------------------------- */
  --green-700: #3E7350;  --green-100: #EAF2E8;  --green-300: #BCD3AE;
  --red-700:   #B03A2E;  --red-100:   #F9ECE8;  --red-300:   #E2B6AB;
  --amber-700: #C08A1E;  --amber-100: #FBF2DE;  --amber-300: #E8CE96;
  --amber-800: #8A6212;  /* amber text on its wash: 5.0:1 */
  --blue-700:  #33648F;  --blue-100:  #EAF1F8;  --blue-300:  #B7CDE1;

  /* ---- semantic: surfaces -------------------------------------------- */
  --surface-page:   var(--sand-200);
  --surface-card:   var(--sand-100);
  --surface-wash:   var(--sand-300);
  --surface-hover:  rgba(230,192,130,.14);
  --surface-selected: var(--gold-300);
  --surface-dark:   var(--brown-900);
  --surface-dark-2: var(--brown-800);

  /* ---- semantic: text ------------------------------------------------ */
  --text:         var(--brown-700);
  --text-muted:   var(--brown-500);
  --text-faint:   var(--brown-400);
  --text-on-dark: var(--sand-ink);
  --text-on-gold: var(--brown-900);
  --text-on-fill: var(--sand-100);   /* white text on a status or face fill */
  --text-link:    var(--gold-700);
  --text-link-hover: var(--brown-700);

  /* ---- semantic: hairlines ------------------------------------------- */
  --line:      var(--sand-500);
  --line-soft: var(--sand-400);

  /* ---- semantic: gold, one job each ---------------------------------- */
  --gold:      var(--gold-500);   /* fills: primary button, active nav, selected toggle */
  --gold-deep: var(--gold-700);   /* links, focus, icons on white, button hover */
  --gold-soft: var(--gold-300);   /* wash behind gold content */
  --gold-line: var(--gold-600);   /* border on a gold fill */
  --gold-press: var(--gold-800);  /* pressed fill */

  /* ---- semantic: status families (text / wash / line) ---------------- */
  --good: var(--green-700);  --good-wash: var(--green-100);  --good-line: var(--green-300);
  --bad:  var(--red-700);    --bad-wash:  var(--red-100);    --bad-line:  var(--red-300);
  --warn: var(--amber-700);  --warn-wash: var(--amber-100);  --warn-line: var(--amber-300);
  --warn-text: var(--amber-800);
  --info: var(--blue-700);   --info-wash: var(--blue-100);   --info-line: var(--blue-300);

  /* ---- semantic: type scale (size / line / weight) ------------------- */
  --font: 'Galano', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --type-display: 900 36px/1 var(--font);
  --type-h1:      900 28px/1.15 var(--font);
  --type-h2:      600 18px/1.25 var(--font);
  --type-h3:      600 14px/1.3 var(--font);
  --type-body:    400 14px/1.5 var(--font);
  --type-table:   400 13px/1.4 var(--font);
  --type-small:   400 12px/1.4 var(--font);
  --type-label:   600 11px/1.2 var(--font);
  --track-label:  .04em;   /* uppercase labels, table headers, tags */
  --track-eyebrow: .16em;  /* the page eyebrow only */
  --text-min: 11px;

  /* ---- semantic: spacing, 4px base ----------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;  --space-12: 48px;

  /* ---- semantic: corners --------------------------------------------- */
  --radius-xs:   4px;    /* inline edit cells, kbd, tiny chips, thumbnails */
  --radius-sm:   6px;    /* inputs, buttons, popover items, tooltips */
  --radius-md:   10px;   /* panels, cards, popovers, modals */
  --radius-pill: 999px;  /* pills, badges, nav items, segmented controls */

  /* ---- semantic: borders --------------------------------------------- */
  --border-w: 1px;

  /* ---- semantic: elevation and focus --------------------------------- */
  --shadow-0: 0 1px 0 rgba(37,24,17,.06);   /* the hairline under a resting button */
  --shadow-1: 0 1px 2px rgba(37,24,17,.05), 0 10px 28px -14px rgba(37,24,17,.14);
  --shadow-2: 0 2px 4px rgba(37,24,17,.07), 0 18px 40px -16px rgba(37,24,17,.22);
  --shadow-3: 0 24px 70px rgba(30,20,13,.45);
  --focus-ring: 0 0 0 3px rgba(143,107,36,.22);
  /* colour channels, for a glow or pulse that fades a token colour: rgba(var(--gold-rgb), .4) */
  --gold-rgb: 230,192,130;
  --gold-chart-rgb: 201,146,47;
  --info-rgb: 51,100,143;
  --ring-warn: 0 0 0 2px color-mix(in srgb, var(--warn) 22%, transparent);
  --ring-good: 0 0 0 2px color-mix(in srgb, var(--good) 22%, transparent);
  --ring-info: 0 0 0 2px color-mix(in srgb, var(--info) 18%, transparent);

  /* ---- semantic: layers and the sticky topbar ------------------------ */
  --topbar-h:   56px;
  --sticky-top: calc(var(--topbar-h) + 3px);   /* the 3px is the crema line */
  --z-sticky:  10;
  --z-topbar:  40;
  --z-nav:     50;
  --z-popover: 60;
  --z-modal:   70;
  --z-toast:   90;
  --z-session: 100;

  /* ---- semantic: controls -------------------------------------------- */
  --control-h:    36px;
  --control-h-sm: 28px;

  /* ---- semantic: the crema line -------------------------------------- */
  --crema: linear-gradient(90deg, #3A2716 0%, #8F6B24 22%, #E6C082 48%, #F3DCAE 72%, #F4F1EC 100%);

  /* ---- component ------------------------------------------------------ */
  --btn-bg:        var(--gold);
  --btn-fg:        var(--text-on-gold);
  --btn-line:      var(--gold-line);
  --btn-hover-bg:  var(--gold-deep);
  --btn-hover-fg:  #FFFFFF;
  --btn-press-bg:  var(--gold-press);
  --ghost-fg:      var(--gold-deep);
  --ghost-hover-bg: var(--gold-soft);
  --quiet-hover-bg: var(--surface-wash);
  --nav-fg:        var(--text-on-dark);
  --nav-hover:     var(--gold);
  --nav-on-bg:     var(--gold);
  --nav-on-fg:     var(--text-on-gold);
  --tbl-head-bg:   var(--surface-page);
  --tbl-head-fg:   var(--text-muted);
  --tbl-row-hover: var(--surface-hover);
  --tbl-row-selected: var(--surface-selected);
  --face-ring-live: var(--info);
  --bubble-bg:     var(--surface-dark-2);
  --bubble-fg:     var(--text-on-dark);

  /* ---- component: chart states (Sketchpad, Chart colours) ------------ */
  --chart-current:   var(--gold-chart);
  --chart-compare:   #9DC0F0;   /* last period: thinner, lighter */
  --chart-compare-2: #B9B2A8;   /* last year: lighter again */
  --chart-live:      var(--gold-deep);
  --chart-project:   var(--gold-line);
  --chart-target:    var(--surface-dark-2);
  --chart-average:   var(--text-muted);
  --chart-good:      var(--good);
  --chart-bad:       var(--bad);
  --chart-highlight: var(--gold-deep);
  --chart-grid:      var(--line-soft);
  --chart-axis:      var(--text-muted);

  /* ---- aliases: every pre-2026-10-10 name still resolves -------------- */
  --paper:     var(--surface-page);
  --paper-2:   var(--surface-card);
  --wash:      var(--surface-wash);
  --cocoa:     var(--surface-dark);
  --cocoa-2:   var(--surface-dark-2);
  --ink:       var(--text);
  --ink-soft:  var(--text-muted);
  --ink-faint: var(--text-faint);
  --green: var(--good); --green-wash: var(--good-wash); --green-line: var(--good-line);
  --red:   var(--bad);  --red-wash:   var(--bad-wash);  --red-line:   var(--bad-line);
  --blue:  var(--info); --blue-wash:  var(--info-wash); --blue-line:  var(--info-line);
  --amber: var(--warn); --amber-wash: var(--warn-wash); --amber-line: var(--warn-line);
  --danger: var(--bad);
  --r:    var(--radius-md);
  --r-sm: var(--radius-sm);
  --r-xs: var(--radius-xs);
  --shadow:      var(--shadow-1);
  --shadow-lift: var(--shadow-2);
  /* names that pages used with a hex fallback and nothing ever defined */
  --muted:   var(--text-muted);
  --card:    var(--surface-card);
  --surface: var(--surface-card);
  --panel-2: var(--surface-wash);
  --bg:      var(--surface-page);
  --hover:   var(--surface-hover);
  --chip-bg: var(--surface-wash);
  --accent:  var(--gold-deep);
}