/* fleet-web-tokens.css — one token base for DoorWerk, Skilled Routines, Starspace, BASSWAV (U2, 2026-11-02, ux-designer spec).
   Proposed home: ops/console/design/web/fleet-web-tokens.css (ux-builder lands it; WP-1/PS-1).
   Layers:  1 brand inputs (a brand file overrides ONLY these)  ->  2 fleet roles (shadcn/ui names, ADOPT)  ->  3 components.
   One edit to a layer-1 input moves every role, shadow, tint and state that derives from it, on every site that links this file.
   Provenance: role names = shadcn/ui theming (MIT, ui.shadcn.com/docs/theming); 12-step role logic = Radix Colors (MIT);
   type/space = Utopia method (utopia.fyi, 360->1440, 16->18 px, 1.2->1.25); easings = Open Props v1.6 values (MIT, copied, not a dependency);
   elevation = Material 3 levels 0-5 (dp 0/1/3/6/8/12) drawn as two-layer tinted shadows (Refactoring UI ch. "Depth"). */

:root {
  /* ---------- layer 1: brand inputs (override these, never the names below) ---------- */
  --hue-neutral: 250;        /* neutrals and shadows are tinted toward this hue: never pure grey, never pure black */
  --tint-neutral: 0.012;     /* chroma of the neutral ramp: 0.006 quiet .. 0.02 warm/cool obvious */
  --hue-primary: 250;  --chroma-primary: 0.14;  --l-primary: 0.52;   /* colour 2: action */
  --hue-accent: 75;    --chroma-accent: 0.12;    /* colour 3: rare signal (<=10% of the surface) */
  --scheme-dark: 0;          /* 0 light ground, 1 dark ground (set by the brand file) */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --radius: 10px;
  --motion: 1;               /* 0 under reduced motion (below) */
  --shadow-strength: 1;      /* dark grounds use ~2.2: shadows read weaker on dark */

  /* ---------- layer 2a: tinted neutral ramp (Radix-style 12 steps, light ground) ---------- */
  --n-1:  oklch(0.990 calc(var(--tint-neutral) * .4) var(--hue-neutral));  /* app background */
  --n-2:  oklch(0.975 calc(var(--tint-neutral) * .6) var(--hue-neutral));  /* subtle background */
  --n-3:  oklch(0.950 var(--tint-neutral) var(--hue-neutral));             /* element bg */
  --n-4:  oklch(0.925 var(--tint-neutral) var(--hue-neutral));             /* hovered element */
  --n-5:  oklch(0.900 var(--tint-neutral) var(--hue-neutral));             /* pressed element */
  --n-6:  oklch(0.870 var(--tint-neutral) var(--hue-neutral));             /* subtle border */
  --n-7:  oklch(0.820 var(--tint-neutral) var(--hue-neutral));             /* border */
  --n-8:  oklch(0.720 var(--tint-neutral) var(--hue-neutral));             /* strong border, focus */
  --n-9:  oklch(0.560 var(--tint-neutral) var(--hue-neutral));
  --n-10: oklch(0.500 var(--tint-neutral) var(--hue-neutral));
  --n-11: oklch(0.440 var(--tint-neutral) var(--hue-neutral));             /* low-contrast text (>=4.5:1 on n-1) */
  --n-12: oklch(0.200 calc(var(--tint-neutral) * 1.5) var(--hue-neutral)); /* high-contrast text */

  /* ---------- layer 2b: fleet roles (shadcn/ui names) ---------- */
  --background: var(--n-1);
  --foreground: var(--n-12);
  --card: oklch(1 calc(var(--tint-neutral) * .25) var(--hue-neutral));
  --card-raised: var(--card);   /* the surface that carries the ask; dark grounds step it one level lighter */
  --card-foreground: var(--n-12);
  --popover: var(--card);  --popover-foreground: var(--n-12);
  --muted: var(--n-3);     --muted-foreground: var(--n-11);
  --border: var(--n-6);    --input: var(--n-7);
  --primary: oklch(var(--l-primary) var(--chroma-primary) var(--hue-primary));
  --primary-foreground: oklch(0.985 0.005 var(--hue-primary));
  --secondary: var(--n-3); --secondary-foreground: var(--n-12);
  --accent: oklch(0.72 var(--chroma-accent) var(--hue-accent));
  --accent-foreground: oklch(0.20 0.03 var(--hue-accent));
  --destructive: oklch(0.55 0.18 28);
  /* status roles (01§6): success · warning · danger · info, each with its foreground (>= 4.5:1). Never colour-only: pair with an icon or word */
  --success: oklch(0.50 0.12 155);  --success-foreground: oklch(0.985 0.01 155);
  --warning: oklch(0.80 0.14 75);   --warning-foreground: oklch(0.24 0.05 75);
  --danger:  var(--destructive);    --danger-foreground:  oklch(0.985 0.01 28);
  --info:    oklch(0.52 0.12 240);  --info-foreground:    oklch(0.985 0.01 240);
  --destructive-foreground: var(--danger-foreground);

  /* stacking (09§8): named layers only, no literal z-index */
  --z-base: 0; --z-raised: 1; --z-dropdown: 100; --z-sticky: 200; --z-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --ring: oklch(from var(--primary) l c h / .55);

  /* button tints: hover and press move lightness AND hue a little (never just opacity) */
  --primary-hover:  oklch(from var(--primary) calc(l - .045) calc(c * 1.06) calc(h + 4));
  --primary-active: oklch(from var(--primary) calc(l - .09)  calc(c * 1.1)  calc(h + 6));
  --primary-edge:   oklch(from var(--primary) calc(l + .12)  c h / .5);   /* 1px inner top light = depth, not flat */
  --secondary-hover: var(--n-4); --secondary-active: var(--n-5);

  /* ---------- layer 2c: elevation (tinted, two layers: key + ambient; never rgba(0,0,0)) ---------- */
  --sh-c: oklch(0.22 0.04 var(--hue-neutral));
  --e0: none;
  --e1: 0 1px 1px oklch(from var(--sh-c) l c h / calc(.06 * var(--shadow-strength))), 0 1px 3px oklch(from var(--sh-c) l c h / calc(.08 * var(--shadow-strength)));
  --e2: 0 1px 2px oklch(from var(--sh-c) l c h / calc(.06 * var(--shadow-strength))), 0 4px 10px -2px oklch(from var(--sh-c) l c h / calc(.10 * var(--shadow-strength)));
  --e3: 0 2px 4px oklch(from var(--sh-c) l c h / calc(.06 * var(--shadow-strength))), 0 10px 24px -6px oklch(from var(--sh-c) l c h / calc(.14 * var(--shadow-strength)));
  --e4: 0 4px 8px oklch(from var(--sh-c) l c h / calc(.07 * var(--shadow-strength))), 0 18px 40px -10px oklch(from var(--sh-c) l c h / calc(.18 * var(--shadow-strength)));
  --e5: 0 8px 16px oklch(from var(--sh-c) l c h / calc(.08 * var(--shadow-strength))), 0 32px 64px -16px oklch(from var(--sh-c) l c h / calc(.24 * var(--shadow-strength)));
  /* use: e0 page, e1 card at rest, e2 card hover / sticky header, e3 popover, e4 sheet/drawer, e5 dialog */

  /* ---------- layer 2d: type (Utopia, 360->1440, 16->18 px, ratio 1.2->1.25) ---------- */
  --step--2: clamp(0.6944rem, 0.6855rem + 0.0397vw, 0.72rem);
  --step--1: clamp(0.8333rem, 0.8101rem + 0.1029vw, 0.9rem);
  --step-0:  clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1295rem + 0.3133vw, 1.4063rem);
  --step-2:  clamp(1.44rem, 1.3281rem + 0.4974vw, 1.7578rem);
  --step-3:  clamp(1.728rem, 1.5573rem + 0.7587vw, 2.1973rem);
  --step-4:  clamp(2.0736rem, 1.8213rem + 1.1214vw, 2.7466rem);
  --step-5:  clamp(2.4883rem, 2.1236rem + 1.6209vw, 3.4332rem);
  --step-6:  clamp(2.986rem, 2.4688rem + 2.2986vw, 4.2915rem);
  --leading-tight: 1.05; --leading-snug: 1.2; --leading-body: 1.55;
  --tracking-display: -0.035em; --tracking-label: 0.08em;
  --measure: 66ch;

  /* ---------- layer 2e: space (Utopia pairs) ---------- */
  --space-3xs: clamp(0.25rem, 0.2292rem + 0.0926vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4792rem + 0.0926vw, 0.5625rem);
  --space-xs:  clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem);
  --space-s:   clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --space-m:   clamp(1.5rem, 1.4375rem + 0.2778vw, 1.6875rem);
  --space-l:   clamp(2rem, 1.9167rem + 0.3704vw, 2.25rem);
  --space-xl:  clamp(3rem, 2.875rem + 0.5556vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8333rem + 0.7407vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.75rem + 1.1111vw, 6.75rem);
  --space-l-2xl: clamp(2rem, 1.0833rem + 4.0741vw, 4.5rem);
  --section: clamp(4rem, 2.5333rem + 6.5185vw, 8rem);   /* the ONE section rhythm */

  /* ---------- layer 2f: motion (Open Props easings, durations x --motion) ---------- */
  --ease-out: cubic-bezier(0.25, 0, 0.3, 1);        /* open-props --ease-out-3 */
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);         /* --ease-in-3 */
  --ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);      /* --ease-in-out-3 */
  --ease-story: cubic-bezier(0, 0, 0, 1);           /* --ease-out-5 */
  --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1); /* --ease-spring-3 */
  --dur-press: calc(120ms * var(--motion)); --dur-hover: calc(160ms * var(--motion)); --dur-pop: calc(200ms * var(--motion));
  --dur-panel: calc(260ms * var(--motion)); --dur-route: calc(300ms * var(--motion));
  --dur-entrance: calc(560ms * var(--motion)); --dur-story: calc(900ms * var(--motion));
  --stagger: 50ms;

  /* ---------- layer 2g: tables ---------- */
  --table-head-bg: var(--n-2); --table-head-fg: var(--n-11);
  --table-row-hover: var(--n-2); --table-rule: var(--n-6); --table-zebra: transparent;
  --table-pad-y: var(--space-2xs); --table-pad-x: var(--space-s);
  --table-num: tabular-nums lining-nums;   /* font-variant-numeric for every number column */
}

/* dark ground: the same inputs, a mirrored ramp; shadows get stronger + a top highlight carries the depth */
[data-scheme="dark"], :root[data-scheme="dark"] {
  --scheme-dark: 1; --shadow-strength: 2.4;
  --n-1:  oklch(0.165 calc(var(--tint-neutral) * 1.2) var(--hue-neutral));
  --n-2:  oklch(0.195 calc(var(--tint-neutral) * 1.2) var(--hue-neutral));
  --n-3:  oklch(0.225 var(--tint-neutral) var(--hue-neutral));
  --n-4:  oklch(0.255 var(--tint-neutral) var(--hue-neutral));
  --n-5:  oklch(0.285 var(--tint-neutral) var(--hue-neutral));
  --n-6:  oklch(0.320 var(--tint-neutral) var(--hue-neutral));
  --n-7:  oklch(0.380 var(--tint-neutral) var(--hue-neutral));
  --n-8:  oklch(0.480 var(--tint-neutral) var(--hue-neutral));
  --n-11: oklch(0.760 var(--tint-neutral) var(--hue-neutral));
  --n-12: oklch(0.940 calc(var(--tint-neutral) * .6) var(--hue-neutral));
  /* 2026-11-02 F1 (U2 re-proof): depth on dark = a lightness step (ground n-1 -> card n-3 -> raised n-4, dL >= .035 each)
     + a tinted top-light edge + tinted shadows sized for dark (a 3px blur at L .08 was a 1px band nobody saw). */
  --card: var(--n-3);
  --card-raised: oklch(from var(--card) calc(l + .04) c h);   /* the ask surface: one fixed step above the card (DESIGN.md dL >= .035) */
  --sh-c: oklch(0.045 0.02 var(--hue-neutral));
  --surface-edge: inset 0 1px 0 oklch(from var(--n-12) l c h / .07);   /* light from above, tinted by the neutral hue */
  --e1: 0 1px 2px oklch(from var(--sh-c) l c h / calc(.20 * var(--shadow-strength))), 0 3px 8px -2px oklch(from var(--sh-c) l c h / calc(.16 * var(--shadow-strength)));
  --e2: 0 2px 4px oklch(from var(--sh-c) l c h / calc(.18 * var(--shadow-strength))), 0 12px 28px -8px oklch(from var(--sh-c) l c h / calc(.22 * var(--shadow-strength)));
  --e3: 0 4px 8px oklch(from var(--sh-c) l c h / calc(.20 * var(--shadow-strength))), 0 20px 44px -10px oklch(from var(--sh-c) l c h / calc(.26 * var(--shadow-strength)));
  --primary-foreground: oklch(0.16 0.02 var(--hue-primary));
  --success: oklch(0.72 0.13 155); --success-foreground: oklch(0.18 0.03 155);
  --warning: oklch(0.82 0.14 75);  --warning-foreground: oklch(0.20 0.04 75);
  --destructive: oklch(0.68 0.16 28); --danger-foreground: oklch(0.18 0.03 28);
  --info:    oklch(0.72 0.11 240); --info-foreground:    oklch(0.18 0.03 240);
}

@media (prefers-reduced-motion: reduce) { :root { --motion: 0; } }

/* ---------- layer 3: components (recipes; sites may keep their own selectors and point them at these roles) ---------- */
.f-btn { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 1.15em; border-radius: var(--radius);
  font: 600 var(--step-0)/1 var(--font-sans); border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-spring); }
.f-btn--primary { background: var(--primary); color: var(--primary-foreground); box-shadow: inset 0 1px 0 var(--primary-edge), var(--e1); }
.f-btn--primary:hover { background: var(--primary-hover); box-shadow: inset 0 1px 0 var(--primary-edge), var(--e2); }
.f-btn--primary:active { background: var(--primary-active); transform: scale(.97); box-shadow: var(--e0); }
.f-btn--secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); }
.f-btn--secondary:hover { background: var(--secondary-hover); } .f-btn--secondary:active { background: var(--secondary-active); transform: scale(.97); }
.f-btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.f-btn[disabled], .f-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }
.f-card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.4);
  box-shadow: var(--surface-edge, 0 0 #0000), var(--e1); transition: box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out); }
a.f-card:hover, .f-card[data-interactive]:hover { box-shadow: var(--surface-edge, 0 0 #0000), var(--e2); transform: translateY(-2px); }
.f-table { width: 100%; border-collapse: collapse; font-variant-numeric: var(--table-num); }
.f-table th { background: var(--table-head-bg); color: var(--table-head-fg); font: 600 var(--step--1)/1.3 var(--font-sans); letter-spacing: .02em; text-align: left; }
.f-table th, .f-table td { padding: var(--table-pad-y) var(--table-pad-x); border-bottom: 1px solid var(--table-rule); }
.f-table td[data-num], .f-table th[data-num] { text-align: right; }
.f-table tbody tr:hover { background: var(--table-row-hover); }