/*
 * AUTONUMY app — design tokens (ADR-0007 design-system, ADR-0101 brand parity with the POC).
 *
 * This is the intended single global stylesheet for the app shell: it defines the brand as CSS
 * custom properties on :root, the dark-mode overrides on .dark, loads the brand fonts, and styles
 * the light-DOM page chrome. It is linked into index.html when the shell is rebuilt in B1 — the
 * legacy skeleton still links the old styles.css until then. Custom properties inherit through
 * shadow boundaries, so every web component reads the same tokens via var(--…). Shared in-shadow
 * utility classes (.btn, .card, .gradient-text, …) live in the constructable base sheet
 * (lib/base-style.mjs), because class selectors do NOT pierce shadow DOM — only inheriting custom
 * properties do. (Self-hosting the brand fonts in place of the Google Fonts @import below is a
 * tracked follow-up — ADR-0007's self-hosted-asset posture + the TTI budget.)
 *
 * Values are taken verbatim from the POC design system (tailwind.config.js + design-system.css +
 * index.css); see ADR-0101. British English throughout.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-feature: 'cv02', 'cv03', 'cv04', 'cv11';

  --text-xs: 0.75rem;   --lh-xs: 1rem;
  --text-sm: 0.875rem;  --lh-sm: 1.25rem;
  --text-base: 1rem;    --lh-base: 1.5rem;
  --text-lg: 1.125rem;  --lh-lg: 1.75rem;
  --text-xl: 1.25rem;   --lh-xl: 1.75rem;
  --text-2xl: 1.5rem;   --lh-2xl: 2rem;
  --text-3xl: 1.875rem; --lh-3xl: 2.25rem;
  --text-4xl: 2.25rem;  --lh-4xl: 2.5rem;
  --text-5xl: 3rem;     --lh-5xl: 1;

  /* Neutral scale */
  --neutral-50: #fafafa;  --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040;
  --neutral-800: #262626; --neutral-900: #171717; --neutral-950: #0a0a0a;

  /* Primary (professional blue) */
  --primary-50: #eff6ff;  --primary-100: #dbeafe; --primary-200: #bfdbfe; --primary-300: #93bbfc;
  --primary-400: #60a5fa; --primary-500: #3b82f6; --primary-600: #2563eb; --primary-700: #1d4ed8;
  --primary-800: #1e40af; --primary-900: #1e3a8a;

  /* Success (green) */
  --success-50: #f0fdf4;  --success-100: #dcfce7; --success-200: #bbf7d0; --success-300: #86efac;
  --success-400: #4ade80; --success-500: #22c55e; --success-600: #16a34a; --success-700: #15803d;
  --success-800: #166534; --success-900: #14532d;

  /* Warning (amber) */
  --warning-50: #fffbeb;  --warning-100: #fef3c7; --warning-200: #fde68a; --warning-300: #fcd34d;
  --warning-400: #fbbf24; --warning-500: #f59e0b; --warning-600: #d97706; --warning-700: #b45309;
  --warning-800: #92400e; --warning-900: #78350f;

  /* Danger (red) */
  --danger-50: #fef2f2;  --danger-100: #fee2e2; --danger-200: #fecaca; --danger-300: #fca5a5;
  --danger-400: #f87171; --danger-500: #ef4444; --danger-600: #dc2626; --danger-700: #b91c1c;
  --danger-800: #991b1b; --danger-900: #7f1d1d;

  /* Accents (brand gradient stops) */
  --cyan-400: #22d3ee;   --cyan-500: #06b6d4;   --cyan-600: #0891b2;   --cyan-700: #0e7490;
  --violet-500: #8b5cf6; --violet-600: #7c3aed;
  --purple-500: #a855f7; --purple-600: #9333ea;
  --indigo-600: #4f46e5;
  --emerald-400: #34d399; --emerald-500: #10b981;

  /* Brand gradient — cyan -> blue -> purple (the canonical BrandPageShell title gradient).
     `--brand-gradient` and `--gradient-text` are the SEMANTIC tokens components use; they
     resolve to the light stops here and flip to the dark stops under `.dark` (below). Driving
     the light/dark choice through an inheriting custom property — rather than a class selector
     in the adopted shadow sheet — is what makes dark mode work across the shadow boundary and
     in every engine (a `.dark .x` or `:host-context(.dark)` rule cannot, the latter unsupported
     in Firefox). Light uses the -600 stops; dark uses the brighter -400/-500 stops. */
  --brand-gradient-light: linear-gradient(to right, #0891b2, #2563eb, #9333ea);
  --brand-gradient-dark: linear-gradient(to right, #22d3ee, #3b82f6, #a855f7);
  --brand-gradient: var(--brand-gradient-light);
  /* gradient-text utility gradients (index.css winner): light blue->indigo->violet, dark blue->cyan */
  --gradient-text-light: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%);
  --gradient-text-dark: linear-gradient(to right, #60a5fa, #3b82f6, #22d3ee);
  --gradient-text: var(--gradient-text-light);

  /* Semantic surface/ink tokens (resolve light by default; .dark overrides below) */
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: var(--neutral-50);
  --ink: var(--neutral-900);
  /* Muted secondary text. neutral-500 (#737373) is only 4.04:1 on our grey surfaces — below the
     WCAG 2.1 AA 4.5:1 floor (PRD §C). neutral-600 (#525252) clears it everywhere down to ~#eaeaea
     while staying visibly secondary to --ink. Dark mode keeps #9ca3af (ample on the dark surfaces). */
  --ink-muted: var(--neutral-600);
  --border: rgba(15, 23, 42, 0.08);
  --accent: var(--primary-600);
  /* Solid accent for active nav text/icons/borders. cyan-600 (#0891b2) is only 3.68:1 on white —
     below the AA 4.5:1 floor for the active nav label — so use cyan-700 (#0e7490, ~5.4:1). Dark
     mode flips to the brighter cyan-400 (ample on the dark surfaces). The brand GRADIENT tokens
     are unaffected; this is only the solid accent ink. */
  --accent-ink: var(--cyan-700);

  /* Spacing */
  --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-24: 6rem;

  /* Radius */
  --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-3xl: 2rem;

  /* Shadows */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);

  /* Motion */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Chrome geometry (ADR-0101 parity: 44px header bar, 16rem/5rem sidebar) */
  --header-h: 2.75rem;
  --sidebar-w: 16rem;
  --sidebar-w-collapsed: 5rem;
  --bottom-nav-h: 4rem;
}

/* Dark mode: invert the neutral scale (the POC inverts neutrals only) and flip the semantic
   gradient tokens to their dark stops. Because these are inheriting custom properties, the swap
   reaches every component's shadow tree in all browsers — no shadow-piercing selector needed. */
.dark {
  --neutral-50: #0a0a0a;  --neutral-100: #171717; --neutral-200: #262626; --neutral-300: #404040;
  --neutral-400: #525252; --neutral-500: #737373; --neutral-600: #a3a3a3; --neutral-700: #d4d4d4;
  --neutral-800: #e5e5e5; --neutral-900: #f5f5f5; --neutral-950: #fafafa;

  --bg: #030712;
  --surface: rgba(17, 24, 39, 0.6);
  --surface-2: rgba(255, 255, 255, 0.03);
  --ink: var(--neutral-100);
  --ink-muted: #9ca3af;
  --border: rgba(255, 255, 255, 0.1);
  --accent-ink: var(--cyan-400);
  --brand-gradient: var(--brand-gradient-dark);
  --gradient-text: var(--gradient-text-dark);
}

/* Light-DOM page chrome (the shadow components style themselves via the base sheet). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-feature-settings: var(--font-feature);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.dark body {
  background: linear-gradient(to bottom, #030712, #111827, #000000);
}