/* atlasautomates.com — site token artifact
   Derived from .claude/design/design-systems/atlasautomates/ (schema v3, bible §2).
   Deltas from house artifact: hue channels swapped to Miami Vice pair
   (blue 229.5 = #41B6E6, pink 356.2 = #F04E98, converted to OKLCH);
   bg/border set re-tinted to the view hue at whisper chroma; glow token added. */
:root {
  /* ---------- Hue channels ---------- */
  --view-hue: 229.5;            /* vice blue — identity hue, all views */
  --role-hue: 356.2;            /* vice pink — role: direct line out to Adrian */

  /* ---------- Backgrounds (persistent world, whisper view-hue tint) ---------- */
  --bg-root: oklch(0.125 0.008 var(--view-hue));
  --bg-surface: oklch(0.155 0.010 var(--view-hue));
  --bg-elevated: oklch(0.185 0.012 var(--view-hue));
  --bg-overlay: oklch(0.088 0.010 var(--view-hue) / 0.85);

  /* ---------- Text ---------- */
  --text-primary: oklch(0.957 0.005 var(--view-hue));
  --text-secondary: oklch(0.815 0.015 var(--view-hue));
  --text-muted: oklch(0.560 0.020 var(--view-hue));
  --text-ghost: oklch(0.360 0.018 var(--view-hue));

  /* ---------- Borders ---------- */
  --border-subtle: oklch(0.200 0.012 var(--view-hue));
  --border-default: oklch(0.260 0.018 var(--view-hue));
  --border-hover: oklch(0.330 0.035 var(--view-hue));

  /* ---------- Accent family (identity — interaction states only) ---------- */
  --accent: oklch(0.731 0.123 var(--view-hue));          /* vice blue solid */
  --accent-strong: oklch(0.816 0.130 var(--view-hue));   /* hover emphasis */
  --accent-bg: oklch(0.731 0.123 var(--view-hue) / 0.07);
  --accent-border: oklch(0.731 0.123 var(--view-hue) / 0.30);

  /* ---------- Role accent (demoted, persistent meaning) ---------- */
  --accent-role: oklch(0.667 0.170 var(--role-hue));     /* vice pink, demoted C */
  --accent-role-strong: oklch(0.720 0.208 var(--role-hue));

  /* ---------- Glow — the ONE special moment per view (bible §5) ---------- */
  --glow-accent: 0 0 20px oklch(0.731 0.123 var(--view-hue) / 0.45);

  /* ---------- Typography ---------- */
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-sans: 'Inter', 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-hero: clamp(2.25rem, 7vw, 3rem);

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------- Spacing (8px grid) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 2.5rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* ---------- Layout ---------- */
  --column-max: 36rem;
  --column-padding: var(--space-5);
  --tap-min: 44px;              /* minimum touch-target edge (RS02) */

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ---------- Depth ---------- */
  --z-base: 0;
  --z-modal: 1000;
  --shadow-modal: 0 12px 40px oklch(0 0 0 / 0.3);

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-medium: 300ms;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Breakpoints (reference) ---------- */
  --bp-phone: 480px;
}

/* Pre-OKLCH engines (Safari <15.4, Chrome <111, FF <113): without this the
   accent/bg declarations go invalid-at-computed-value and the page inverts to
   the UA's white canvas. Hex values below are the exact OKLCH conversions —
   fallback definitions live in the token file, so build code stays literal-free. */
@supports not (color: oklch(0 0 0)) {
  :root {
    --bg-root: #040709;
    --bg-surface: #080D10;
    --bg-elevated: #0D1417;
    --bg-overlay: rgba(1, 3, 4, 0.85);
    --text-primary: #EDF1F3;
    --text-secondary: #B9C5CA;
    --text-muted: #69777E;
    --text-ghost: #343F45;
    --border-subtle: #11171A;
    --border-default: #1B262B;
    --border-hover: #223944;
    --accent: #41B6E6;
    --accent-strong: #58D2FF;
    --accent-bg: rgba(65, 182, 230, 0.07);
    --accent-border: rgba(65, 182, 230, 0.30);
    --accent-role: #E26097;
    --accent-role-strong: #FF60A8;
    --glow-accent: 0 0 20px rgba(65, 182, 230, 0.45);
    --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.3);
  }
}