/* ==================================================================
   tokens.css — Villars Longevity Clinic intranet
   The brand hexes are lifted verbatim from the clinic's public
   booking engine so the intranet and the guest-facing site are
   demonstrably the same house. Nothing here is invented.
   ================================================================== */

:root {
  /* ---------- brand: greens ---------- */
  --green:        #586c50;   /* primary sage, held at 4.5:1 as link text on cream */
  --green-deep:   #46583f;   /* deep forest — pressed states, headings on cream */
  --green-soft:   #7d9072;   /* light sage */
  --green-mist:   #eef1ea;   /* pale wash — hover fills, selected rows */
  --green-line:   #d8e0d2;   /* sage hairline */
  --forest:       #1c3327;   /* the logo plate ground, read off assets/logo-plate.svg */
  --forest-lift:  #24402f;   /* one step up, for the spine's hover state */

  /* ---------- brand: creams ----------
     The booking engine sets its cards at #fffdf8, which reads as plain white
     across a large screen. A register meant to look like paper should have no
     white in it at all, so the family is warmed a step: the page sits deeper,
     a sheet is visibly cream rather than off-white, and the banded rows are
     warmer still. The relative order is unchanged, so the hierarchy holds. */
  --cream:        #f3efe3;   /* page ground */
  --cream-warm:   #efeade;   /* table head bands, rubric rows, the doc foot */
  --cream-card:   #fbf8ee;   /* any surface holding data */
  --cream-line:   #e2dbc8;   /* the workhorse hairline */

  /* ---------- brand: neutrals ---------- */
  --taupe:        #a59b8a;
  --taupe-deep:   #8c8070;
  --ink:          #2b2e28;   /* primary text */
  --ink-soft:     #55584f;   /* secondary text — 7.0:1 on cream, safe for data */
  --grey:         #8f8d83;   /* tertiary — 3.4:1, large text and icons only */
  --grey-light:   #b4b1a6;   /* ~2:1 — decoration ONLY, never information */

  /* ---------- brand: gold ---------- */
  --gold:         #c9a36a;   /* the logo gold — rationed */
  --gold-deep:    #7d5a1b;   /* the only gold safe as text, on cream or the warm band */
  --gold-pale:    #e8d9b5;

  /* ---------- semantic surfaces ---------- */
  --surface:        var(--cream);
  --surface-sheet:  var(--cream-card);
  --surface-sunken: var(--cream-warm);
  --surface-spine:  var(--forest);
  --surface-inset:  #eae4d5;

  --border-hair:   var(--cream-line);
  --border-strong: #cfc6b0;
  --border-sage:   var(--green-line);
  --rule-quinary:  #d6cdb6;   /* the darkened rule under every 5th ledger row */

  --text-1: var(--ink);
  --text-2: var(--ink-soft);
  --text-3: #64675e;          /* the floor for informational text, 4.5:1 on the warm band */
  --text-on-forest:      #eae6d9;
  --text-on-forest-soft: #a9b3a0;

  /* ---------- status ----------
     Kept inside the palette: greens and golds for ordinary states, and one
     genuine breach red, because an expired permit is not a shade of gold. */
  --ok:        #46703f;   --ok-bg:    #e4ecdf;   --ok-line:  #cadcc4;
  --warn:      #7d5a1b;   --warn-bg:  #f4e9d0;   --warn-line:#ddc79a;
  --oxide:     #9a3f32;   /* the one added colour: a hard breach, never signal red */
  --danger:    #9a3f32;   --danger-bg:#f2e2dd;   --danger-line:#e8c7c0;
  --info:      #4a6572;   --info-bg:  #e3eaee;   --info-line: #c9d8de;
  --neutral:   var(--ink-soft); --neutral-bg: #eae4d6; --neutral-line: var(--cream-line);

  /* ---------- data series ----------
     The categorical order is fixed by the design spec and drawn entirely
     from the brand palette. Series 1 and 2 are maximally distinct in both
     hue and lightness, so a two-series chart survives greyscale printing.
     There is no seventh colour: a seventh category becomes "Other".
     s7 and s8 alias s5 and s6 so a stray index degrades rather than breaks. */
  --s1: #46583f;  --s2: #8c8070;  --s3: #7d9072;  --s4: #8a6420;
  --s5: #55584f;  --s6: #8f8d83;  --s7: #55584f;  --s8: #8f8d83;

  /* ---------- type ---------- */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --mono:  'Jost', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* ---------- spacing (4px base) ---------- */
  --s1x: 4px;  --s2x: 8px;  --s3x: 12px; --s4x: 16px; --s5x: 20px;
  --s6x: 24px; --s7x: 32px; --s8x: 40px; --s9x: 48px; --s10x: 64px; --s11x: 80px;

  /* ---------- geometry ---------- */
  --spine-w:       232px;   /* pinned open — the default */
  --spine-w-slim:  72px;    /* collapsed */
  --inspector-w:   360px;
  --content-max:   1440px;
  --gutter:        44px;
  --masthead-h:    72px;
  --todaystrip-h:  34px;
  --row-comfortable: 50px;
  --row-compact:     40px;

  --radius-sm: 3px;
  --radius:    4px;         /* the ledger is squared off; radii are for controls only */
  --radius-lg: 8px;
  --hair: 1px;

  /* ---------- elevation ---------- */
  --shadow-sm: 0 2px 16px rgba(54,60,48,.06);
  --shadow-md: 0 14px 44px rgba(54,60,48,.12);
  --shadow-lg: 0 30px 76px rgba(54,60,48,.18);

  /* ---------- motion ---------- */
  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --t-instant: 90ms;
  --t-fast:    160ms;
  --t-base:    240ms;
  --t-slow:    420ms;

  /* ---------- z-index ---------- */
  --z-spine:     40;
  --z-masthead:  30;
  --z-sticky:    20;
  --z-inspector: 60;
  --z-overlay:   70;
  --z-palette:   80;
  --z-toast:     90;

  --focus-ring: 0 0 0 1px var(--cream-card), 0 0 0 3px var(--green);

  /* The clinic's organigramme, in the colours of their own slide. */
  --org-ground:     #ffffff;
  --org-box:        #ffffff;
  --org-root-fill:  #e8f3f0;
  --org-root-line:  #1f6f5c;
  --org-lead-line:  #9aa3ad;
  --org-staff-line: #dde1e6;
  --org-name:       #1f2430;
  --org-title:      #6b7280;
  --org-root-title: #1f6f5c;
  --org-reporting:  #b9c0c8;
  --org-functional: #4f81bd;
  --org-legend:     #000000;

  color-scheme: light;
}

/* ==================================================================
   Dark theme — the whole surface drops onto the logo plate.
   Explicit choice wins over the system preference in both directions.
   ================================================================== */

:root[data-theme="dark"] {
  /* Night is the same document, not a different product.

     The spine keeps the logo plate green, because that is the brand anchor
     and it is the one place green belongs. Everything else drops to a warm
     near-black so a table has a surface to sit on and so sage and gold read
     as state rather than as the background. Warm rather than blue-grey: the
     light theme is paper, and paper at night is still paper. */

  --surface:        #191814;   /* page ground */
  --surface-sheet:  #211f1a;   /* any surface holding data */
  --surface-sunken: #2a2822;   /* table head bands, rubric rows, the doc foot */
  --surface-spine:  #16291f;   /* the plate, one step down from the logo green */
  --surface-inset:  #14130f;

  --cream:        #191814;
  --cream-warm:   #2a2822;
  --cream-card:   #211f1a;
  --cream-line:   #35322b;

  --forest:       #1c3327;     /* unchanged: it is read off the artwork */
  --forest-lift:  #24402f;

  --border-hair:   #35322b;
  --border-strong: #4a463d;
  --border-sage:   #3b4a35;
  --rule-quinary:  #423e35;

  --text-1: #ece8db;
  --text-2: #c2bdad;
  --text-3: #97927f;
  --ink:      #ece8db;
  --ink-soft: #c2bdad;
  --grey:     #8b8676;
  --grey-light: #6a665b;
  --text-on-forest:      #eae6d9;
  --text-on-forest-soft: #a9b3a0;

  /* Green is state again, so it has to be legible on the warm ground. */
  --green:      #94ad86;
  --green-deep: #aec4a1;
  --green-soft: #7d9072;
  --green-mist: #24291f;       /* row hover and selection */
  --green-line: #3b4a35;

  --taupe:      #b0a693;
  --taupe-deep: #978c78;

  --gold:       #d9b982;
  --gold-deep:  #e2c795;
  --gold-pale:  #3a3122;

  --ok:     #8cbb80; --ok-bg:     #1f2a1c; --ok-line:     #35452e;
  --warn:   #d9b982; --warn-bg:   #2e2617; --warn-line:   #4d4028;
  --oxide:  #dd8e78;
  --danger: #dd8e78; --danger-bg: #2f201c; --danger-line: #533830;
  --info:   #93b5c3; --info-bg:   #1c272c; --info-line:   #33474f;
  --neutral:   var(--ink-soft); --neutral-bg: #2a2822; --neutral-line: #35322b;

  --s1: #b6c7aa; --s2: #b0a693; --s3: #94ad86; --s4: #d9b982;
  --s5: #c6c2b4; --s6: #85907a; --s7: #c6c2b4; --s8: #85907a;

  --shadow-sm: 0 2px 16px rgba(0,0,0,.34);
  --shadow-md: 0 14px 44px rgba(0,0,0,.46);
  --shadow-lg: 0 30px 76px rgba(0,0,0,.58);

  --focus-ring: 0 0 0 1px var(--surface-sheet), 0 0 0 3px var(--green);

  /* The organigramme at night: same drawing, lines and boxes lifted off the dark ground. */
  --org-ground:     #211f1a;
  --org-box:        #2a2822;
  --org-root-fill:  #1d3129;
  --org-root-line:  #5fae95;
  --org-lead-line:  #6e737a;
  --org-staff-line: #4a4c50;
  --org-name:       #ece8db;
  --org-title:      #a8a597;
  --org-root-title: #8fcdb8;
  --org-reporting:  #5f646b;
  --org-functional: #7ea6d8;
  --org-legend:     #c2bdad;

  color-scheme: dark;
}

/* There is deliberately no prefers-color-scheme block.
   The cream ledger is the product. Dark is a choice made in folio 17,
   never something the operating system imposes on a first visit. */

/* Density is a user preference, remembered per module. */
:root[data-density="compact"] { --row-h: var(--row-compact); }
:root                          { --row-h: var(--row-comfortable); }
:root[data-density="comfortable"] { --row-h: var(--row-comfortable); }