/* Hallmark · macrostructure: Workbench continua · tone: dark-technical
 * theme: design.md-locked (deXevel main-site DNA)
 * studied-DNA: dexevel.com visual system · designed-as-app
 * pre-emit critique: P5 H4 E5 S4 R5 V4
 */

:root {
  /* Paper / surfaces — pure near-black (matches dexevel.com hsl(0 0% 6.3%)) */
  --color-bg: oklch(9% 0 0);
  --color-bg-elevated: oklch(12% 0 0);
  --color-bg-card: #101010;
  --color-bg-card-hover: #161616;
  --color-surface: oklch(11% 0 0);
  --color-paper: var(--color-bg);
  --color-paper-2: var(--color-bg-elevated);
  --color-paper-3: var(--color-bg-card);

  --color-border: #222222;
  --color-border-strong: #333333;
  --color-border-hover: #444444;
  --color-rule: var(--color-border);

  /* Ink */
  --color-text: #ffffff;
  --color-text-muted: oklch(65% 0 0);
  --color-text-dim: oklch(42% 0 0);
  --color-ink: var(--color-text);
  --color-ink-2: var(--color-text-muted);

  /* Brand accent family — deXevel teal/green/cyan */
  --color-primary: #00CAB1;
  --color-primary-hover: #0FDB7E;
  --color-primary-soft: rgba(0, 202, 177, 0.15);
  --color-accent: #56C0DB;
  --color-accent-soft: rgba(86, 192, 219, 0.15);
  --color-core: #0FDB7E;
  --color-enhance: var(--color-accent);
  --color-gap: #ff8f6b;
  --color-warning: oklch(82% 0.14 85);
  --color-warning-soft: oklch(82% 0.14 85 / 0.14);
  --color-danger: oklch(68% 0.16 15);
  --color-danger-soft: oklch(68% 0.16 15 / 0.14);
  --color-focus: var(--color-primary);
  --color-on-primary: #0a0a0a;
  --color-header-bg: rgba(10, 10, 10, 0.92);

  /* Glass morphism overlays — from dexevel.com */
  --overlay-bg-start: rgba(0, 202, 177, 0.2);
  --overlay-bg-end: rgba(15, 219, 126, 0.2);
  --overlay-accent-start: rgba(0, 202, 177, 0.2);
  --overlay-accent-end: rgba(86, 192, 219, 0.2);

  /* Hex bridges for SVG stop-colors & places that can't take oklch vars mid-attr */
  --hex-primary: #00cab1;
  --hex-core: #0fdb7e;
  --hex-accent: #56c0db;
  --hex-gap: #ff8f6b;
  --hex-canvas: #0a0a0a;

  /* Type — deXevel main-site fonts */
  --font-display: "Darker Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: var(--font-body);
  --font-mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.75rem;
  --text-display: clamp(2rem, 4.5vw, 3.25rem);
  --text-display-s: clamp(1.5rem, 3vw, 2.25rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* 4pt scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-3xs: var(--space-1);
  --space-2xs: var(--space-2);
  --space-xs: var(--space-3);
  --space-sm: var(--space-4);
  --space-md: var(--space-6);
  --space-lg: var(--space-8);
  --space-xl: var(--space-12);
  --space-2xl: var(--space-16);
  --space-3xl: var(--space-20);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;
  --radius-card: var(--radius-lg);
  --radius-pill: var(--radius-full);
  --radius-input: var(--radius-md);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.28);
  --shadow-md: 0 10px 28px oklch(0% 0 0 / 0.32);
  --shadow-lg: 0 18px 44px oklch(0% 0 0 / 0.38);
  /* No coloured glow token — elevation via lightness only */

  --container: 1120px;
  --header-h: 64px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease: var(--ease-out);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 400ms;
  --dur-short: var(--dur-med);
  --dur-score: 800ms;
  --dur-gauge: 900ms;
}