/* ═══════════════════════════════════════════════════════════════════════════
   Genesis Operator + Genesis Downloads — design tokens.
   Mirrors ai-studio-v2-frontend/src/app/globals.css ("Refined Clinical").
   Keep in lockstep with that file when the main product rebrands; the
   portal, the in-cluster operator, and ai-studio must feel like one
   product even though they're different stacks.

   Authoritative reference HTML pages:
     portal/src/download_portal/_design_reference/portal-dashboard.html
     ops/control-plane/src/genesis_control_plane/_design_reference/console-dashboard.html
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Neue Montreal';
  src: url('/static/fonts/NeueMontreal-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('/static/fonts/NeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('/static/fonts/NeueMontreal-Medium.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('/static/fonts/NeueMontreal-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ───── core HSL palette (Refined Clinical) ────────────────────────── */
  --background: 250 100% 99%;     /* page bg, purple-tinted white */
  --foreground: 240 6% 10%;       /* body text */

  --card: 0 0% 100%;              /* card surfaces */
  --card-foreground: 240 6% 10%;

  --primary: 262 60% 52%;         /* refined violet — CTAs, focus rings */
  --primary-foreground: 0 0% 100%;

  --accent: 262 65% 58%;          /* slightly lighter violet — links, hovers */
  --accent-foreground: 0 0% 100%;

  --secondary: 220 9% 94%;        /* cool gray — secondary chips */
  --secondary-foreground: 220 9% 20%;

  --muted: 250 100% 97%;          /* light purple tint background */
  --muted-foreground: 220 9% 46%; /* muted text, captions */

  --border: 220 13% 91%;          /* hairline rules, input borders */
  --input: 220 13% 91%;
  --ring: 262 60% 52%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --success: 160 84% 39%;
  --success-foreground: 0 0% 100%;

  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 0%;

  --info: 206 100% 50%;
  --info-foreground: 0 0% 100%;

  /* Autonomize brand */
  --autonomize-primary: 262 60% 52%;
  --autonomize-secondary: 262 70% 60%;
  --autonomize-dark: 262 85% 29%;     /* #350e84 — header/sidebar bg */

  /* Header/sidebar dark theme */
  --header-bg: 262 85% 29%;
  --header-foreground: 0 0% 100%;
  --header-muted: 262 30% 80%;        /* faded white for sub-text */
  --header-border: 262 50% 38%;

  /* ───── radius ─────────────────────────────────────────────────────── */
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: calc(var(--radius) + 2px);
  --radius-xl: calc(var(--radius) + 6px);
  --radius-full: 9999px;

  /* ───── spacing (4px grid) ─────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ───── typography ─────────────────────────────────────────────────── */
  --font-sans: 'Neue Montreal', system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;

  --t-display: 38px;
  --t-h1:      28px;
  --t-h2:      22px;
  --t-h3:      16px;
  --t-body:    14px;
  --t-caption: 13px;
  --t-micro:   11px;
  --t-kpi:     44px;

  /* ───── shadow ─────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow:    0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 6px 10px -2px rgb(0 0 0 / 0.06), 0 3px 6px -3px rgb(0 0 0 / 0.06);

  /* ───── motion ─────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --motion-fast: 120ms;
  --motion: 160ms;
  --motion-slow: 220ms;

  /* ───── layout ─────────────────────────────────────────────────────── */
  --header-height: 56px;
  --page-max-width: 1280px;
  --page-gutter: 32px;
}