/* tokens.css — THE DESIGN VARIABLES, the one file (10/26/26; Marco via the HUB: "a true set of design
   variables"). Every colour, radius, shadow, hairline, space, type size, weight, line height, duration,
   layer and control height the portal's v2 look uses is named HERE and nowhere else; kit.css, the v2
   rules of styles.css and the kit's components read them as var(--o-…) and type no value of their own
   (backend/tests/test_design_variables_2026_10_26.py refuses a literal). Change a value here and every
   screen that reads it follows.

   The admin app loads this sheet FIRST (index.html: tokens.css, then styles.css, then kit.css). The
   three outside sites carry a byte-equal copy (`python tools/sync_tokens.py` writes it; a test fails
   when a copy drifts) and a small override layer of their own, tokens-<site>.css (the front theme).

   The set of record, design/premium-look-2026-10-25/origin-v2.css, declares the same names with the
   same values in its `.v-after` blocks (the mocks' scope); test_look_v2_tokens_2026_10_25.py holds the
   two together. Light is `:root`; dark (staged: nothing sets data-theme yet, step 6 switches it on)
   overrides colour and depth only, everything else is the same in both themes. A variable built from
   others (a shadow with a hairline colour) resolves on :root, where it is declared; it still follows
   the theme because data-theme sits on :root too, so the dark block's colours are the ones it reads. */

:root{
  /* ───── colour: surfaces ───── */
  --o-bg:#f5f5f7; --o-surface:#ffffff; --o-surface-2:#f9f9fb; --o-surface-3:#f2f2f7; --o-surface-4:#e8e8ed; --o-side:#f5f5f7;
  /* ───── colour: ink (--o-ink-3 lifted 10/26/26 from #8b96a5, 3.0:1, to 4.55:1 on --o-surface, same hue; then to #5f6b7d,
     4.84:1 on --o-surface-3, by the v2 fixer for QA-2 F29;
     4.3:1 on --o-surface-2, 4.2:1 on --o-bg, 4.1:1 on --o-surface-3) ───── */
  --o-ink:#16202c; --o-ink-2:#5a6678; --o-ink-3:#5f6b7d; --o-ink-4:#b4bcc7;
  /* ───── colour: hairlines (alpha, so they sit on any surface) ───── */
  --o-hair:rgba(22,32,44,.09); --o-hair-2:rgba(22,32,44,.055); --o-hair-3:rgba(22,32,44,.035);
  /* ───── colour: the one accent (brand teal), the commit (brand navy) ───── */
  --o-accent:#0b7f77; --o-accent-bright:#00a99d; --o-accent-tint:#e3f4f2; --o-accent-ink:#ffffff;
  /* the teal for WORDS (QA-2 F71): 4.96:1 on the accent tint, 5.05 on surface-3; --o-accent stays
     the fill, the ring and the dot */
  --o-accent-text:#08746d;
  --o-primary:#1b2740; --o-primary-hover:#263656; --o-primary-ink:#ffffff;
  /* ───── colour: status families, ink on tint ───── */
  --o-pos:#1d7a55; --o-pos-tint:#e4f3ec; --o-warn:#8f5c10; --o-warn-tint:#fbf1dc; --o-neg:#b42318; --o-neg-tint:#fcebea; --o-info:#2456a6; --o-info-tint:#e7eefb;
  --o-neg-ink:#fff;
  --o-star:#d2961a; --o-star-ink:#8f6300; --o-star-tint:#fff6e3;
  --o-test:#b4236a; --o-test-tint:#fbe6f0;
  /* ───── colour: roles ───── */
  --o-fund:#6b3fa0; --o-fund-tint:#efe7f8; --o-investor:#2456a6; --o-investor-tint:#e4ecfa; --o-manager:#0e6f8a; --o-manager-tint:#dff1f7; --o-property:#177a53; --o-property-tint:#e3f4ec; --o-custodial:#7a5a12; --o-custodial-tint:#f6edd6;
  /* ───── colour: the tip, the dialog backdrop, the constants ───── */
  --o-tip-bg:#1c2633; --o-tip-ink:#f2f5f8; --o-tip-tint:rgba(255,255,255,.15);
  --o-overlay:rgba(16,24,40,.42);
  --o-white:#fff; --o-black:#000;
  --o-x-hover:rgba(127,127,127,.2); --o-x-hover-soft:rgba(127,127,127,.18);

  /* ───── radii ───── */
  --o-r-hair:1px; --o-r-2xs:2px; --o-r-xs:4px; --o-r-mark:5px; --o-r-sm:6px; --o-r-ctl-sm:7px; --o-r-row:8px; --o-r-item:9px;
  --o-r-ctl:10px; --o-r-tip:11px; --o-r-box:12px; --o-r-menu:14px; --o-r-tile:16px; --o-r-card:18px; --o-r-dialog:20px;
  --o-r-pill:999px; --o-r-round:50%;

  /* ───── shadows: the depth trio, the ring, the focus ring, the segment ───── */
  --o-ring:0 0 0 1px rgba(22,32,44,.06);
  --o-focus:0 0 0 2px var(--o-surface),0 0 0 4px var(--o-accent);
  --o-s1:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.05);
  --o-s2:0 2px 6px rgba(0,0,0,.05),0 14px 40px rgba(0,0,0,.08);
  --o-s3:0 2px 8px rgba(0,0,0,.06),0 28px 80px rgba(0,0,0,.20);
  --o-seg-shadow:0 1px 2px rgba(0,0,0,.10),0 0 0 .5px rgba(0,0,0,.04);
  /* ───── shadows: edges (an inset hairline), rules, halos, gloss ───── */
  --o-sh-edge:inset 0 0 0 1px var(--o-hair); --o-sh-edge-2:inset 0 0 0 1px var(--o-hair-2);
  --o-sh-edge-strong:inset 0 0 0 1px var(--o-ink-4); --o-sh-edge-hover:inset 0 0 0 1px var(--o-ink-3);
  --o-sh-edge-accent:inset 0 0 0 1px var(--o-accent); --o-sh-edge-neg:inset 0 0 0 1px var(--o-neg);
  --o-sh-inner:inset 0 1px 2px rgba(16,24,40,.035);
  --o-sh-outline:0 0 0 .5px var(--o-hair); --o-sh-lift:0 1px 2px rgba(0,0,0,.04);
  --o-sh-rule-under:inset 0 -1px 0 var(--o-hair); --o-sh-rule-top:0 -1px 0 var(--o-hair); --o-sh-rule-over:inset 0 1px 0 var(--o-hair-2);
  --o-sh-pin:1px 0 0 var(--o-hair-2);
  --o-sh-halo:0 0 0 3px var(--o-accent-tint); --o-sh-halo-neg:0 0 0 3px var(--o-neg-tint);
  --o-sh-field-focus:inset 0 0 0 1.5px var(--o-accent),0 0 0 4px var(--o-accent-tint);
  --o-sh-field-bad:inset 0 0 0 1.5px var(--o-neg),0 0 0 4px var(--o-neg-tint);
  --o-sh-sel:0 0 0 1.5px var(--o-accent); --o-sh-menu-cur:inset 0 0 0 2px var(--o-accent-tint);
  --o-sh-wtab-cur:inset 0 0 0 1.5px color-mix(in srgb,var(--o-accent) 55%,transparent);
  --o-sh-ring-current:inset 0 0 0 1.5px currentColor;
  --o-sh-live:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent); --o-sh-live-soft:0 0 0 3px color-mix(in srgb,currentColor 20%,transparent);
  --o-sh-gloss:inset 0 1px 0 rgba(255,255,255,.65); --o-sh-gloss-dim:inset 0 1px 0 rgba(255,255,255,.05);
  --o-sh-gloss-primary:inset 0 1px 0 rgba(255,255,255,.1); --o-sh-gloss-accent:inset 0 1px 0 rgba(255,255,255,.12);
  --o-sh-knob:0 1px 2px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.05);
  --o-sh-tip:0 6px 20px rgba(16,24,40,.22),0 0 0 1px rgba(255,255,255,.06);
  --o-sh-scrim:0 0 0 100vmax var(--o-overlay);

  /* ───── hairline widths (a border, an outline, a drawn chevron) ───── */
  --o-line:1px; --o-line-md:1.5px; --o-line-lg:2px; --o-line-sort:1.4px; --o-line-chev:1.6px; --o-focus-offset:2px;

  /* ───── spacing: the scale, and the off-scale steps the set types today (--o-sx-N is N px) ───── */
  --o-s-1:4px; --o-s-2:8px; --o-s-3:12px; --o-s-4:16px; --o-s-5:22px; --o-s-6:28px; --o-s-7:32px; --o-s-8:44px;
  --o-sx-1:1px; --o-sx-2:2px; --o-sx-3:3px; --o-sx-5:5px; --o-sx-6:6px; --o-sx-7:7px; --o-sx-9:9px; --o-sx-10:10px;
  --o-sx-11:11px; --o-sx-13:13px; --o-sx-14:14px; --o-sx-15:15px; --o-sx-18:18px; --o-sx-20:20px; --o-sx-24:24px;
  --o-sx-26:26px; --o-sx-30:30px; --o-sx-34:34px; --o-sx-40:40px; --o-sx-48:48px; --o-sx-50:50px; --o-sx-54:54px;
  --o-sx-64:64px; --o-sx-72:72px;

  /* ───── type: the faces, the ladder, the weights, the line heights ───── */
  --o-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --o-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --o-mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  --o-fs-micro:10px; --o-fs-caps:11px; --o-fs-small:12px; --o-fs-label:12.5px; --o-fs-body:13px; --o-fs-body-lg:14px;
  --o-fs-lead:15px; --o-fs-title:16px; --o-fs-h2:17px; --o-fs-h1:22px; --o-fs-figure:26px; --o-fs-display:28px; --o-fs-hero:34px;
  --o-fw-regular:400; --o-fw-medium:500; --o-fw-semi:600; --o-fw-strong:650; --o-fw-bold:700;
  --o-lh-none:1; --o-lh-figure:1.05; --o-lh-tight:1.1; --o-lh-title:1.2; --o-lh-heading:1.25; --o-lh-snug:1.3;
  --o-lh-compact:1.4; --o-lh-note:1.45; --o-lh-body:1.5; --o-lh-dialog:22px; --o-lh-nav:18px;

  /* ───── motion ───── */
  --o-ease:cubic-bezier(.2,.8,.2,1); --o-spring:cubic-bezier(.32,.72,0,1);
  --o-fast:140ms; --o-med:180ms; --o-slow:260ms;
  --o-dur-spin:.7s; --o-dur-pulse:1.2s; --o-dur-shimmer:1.4s;

  /* ───── layers (z) ───── */
  --o-z-base:0; --o-z-raised:1; --o-z-pin:1; --o-z-head:2; --o-z-corner:3; --o-z-rowmenu:3; --o-z-bar:20; --o-z-band:29;
  --o-z-menu:30; --o-z-dialog:40; --o-z-tip:50; --o-z-toast:60; --o-z-drawer:96;

  /* ───── control heights ───── */
  --o-h-sm:28px; --o-h-field-sm:30px; --o-h-md:32px; --o-h:34px; --o-h-field:36px; --o-h-lg:38px; --o-h-xl:40px; --o-h-btn-lg:42px; --o-h-xxl:44px;
}

:root[data-theme="dark"]{
  --o-bg:#0e1014; --o-surface:#17181c; --o-surface-2:#1c1e23; --o-surface-3:#23252b; --o-surface-4:#2b2e35; --o-side:#111216;
  /* --o-ink-3 lifted 10/26/26 from #6f7a89, 4.07:1, to 4.55:1 on --o-surface, same hue; then to #8691a0,
     4.79:1 on --o-surface-3 (QA-2 F29) */
  --o-ink:#e8ecf2; --o-ink-2:#a2acba; --o-ink-3:#8691a0; --o-ink-4:#4a5564;
  --o-hair:rgba(255,255,255,.09); --o-hair-2:rgba(255,255,255,.055); --o-hair-3:rgba(255,255,255,.035);
  --o-accent:#4fcbc0; --o-accent-bright:#2cc4b8; --o-accent-tint:rgba(0,169,157,.16); --o-accent-ink:#06211f;
  --o-accent-text:#4fcbc0;
  --o-primary:#e8ecf2; --o-primary-hover:#ffffff; --o-primary-ink:#0e1219;
  --o-pos:#6fcf9c; --o-pos-tint:rgba(29,122,85,.25); --o-warn:#e2b45a; --o-warn-tint:rgba(154,100,19,.25); --o-neg:#f08a80; --o-neg-tint:rgba(180,35,24,.25); --o-info:#9dbbf2; --o-info-tint:rgba(36,86,166,.3);
  --o-neg-ink:#1a0b09;
  --o-star:#e8b43a; --o-star-ink:#f0c35a; --o-star-tint:rgba(232,180,58,.14);
  --o-test:#f09ac4; --o-test-tint:rgba(180,35,106,.28);
  --o-fund:#c7a9ef; --o-fund-tint:rgba(107,63,160,.3); --o-investor:#9dbbf2; --o-investor-tint:rgba(36,86,166,.32); --o-manager:#83cde5; --o-manager-tint:rgba(14,111,138,.32); --o-property:#7ed3a8; --o-property-tint:rgba(29,138,95,.3); --o-custodial:#e0bd6a; --o-custodial-tint:rgba(122,90,18,.3);
  --o-tip-bg:#2a3444; --o-tip-ink:#f2f5f8; --o-overlay:rgba(0,0,0,.6);
  --o-ring:0 0 0 1px rgba(255,255,255,.06);
  --o-focus:0 0 0 2px var(--o-surface),0 0 0 4px var(--o-accent);
  --o-s1:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
  --o-s2:0 2px 6px rgba(0,0,0,.35),0 14px 40px rgba(0,0,0,.5);
  --o-s3:0 2px 8px rgba(0,0,0,.4),0 28px 80px rgba(0,0,0,.6);
  --o-seg-shadow:0 1px 2px rgba(0,0,0,.4),0 0 0 .5px rgba(255,255,255,.06);
}