/**
 * Ailands design tokens — runtime source of truth (design-system.md §3).
 *
 * The committed brand foundation (M8 · Epics A/B): a deep-water OCEAN brand
 * ramp, a luminous HORIZON-TEAL accent ramp (the "AI spark + the sea"), slate
 * neutral chrome, product-agnostic feedback ramps, plus the full tier set
 * (spacing, weight, elevation, display type, tracking, motion, focus). The
 * platform reads teal-accented on an ocean/ink ground — deliberately distinct
 * from Horyzon's terracotta. Dark mode lives behind [data-theme="dark"] (and
 * [data-theme="auto"] + prefers-color-scheme).
 *
 * Three tiers (design-system.md §3.1):
 *   base      — raw ramps + scales. Only --color-brand-*, --color-accent-*,
 *               and --font-sans / --font-display may be overridden by a
 *               product sub-brand (§4.4).
 *   semantic  — role aliases the components consume. The ONLY layer dark mode
 *               re-maps; base ramps, spacing, type, and radius never flip.
 *   component — (reserved) per-component knobs; default to semantic.
 *
 * Accessibility: every semantic pairing meets WCAG 2.1 AA in BOTH themes,
 * enforced by test/contrast.test.ts (issue #66). The luminous accent-500
 * (#16bdca) is a graphic/on-dark spark only — it never carries text on light.
 */
:root {
  /* ═══════════ base: brand ramp — deep ocean (product-overridable) ═══════════ */
  --color-brand-50: #f2f7fb;
  --color-brand-100: #e0edf5;
  --color-brand-200: #c2daea;
  --color-brand-300: #97bdd8;
  --color-brand-400: #6499be;
  --color-brand-500: #3e749d;
  --color-brand-600: #23557b;
  --color-brand-700: #0f3d5c;
  --color-brand-800: #0a2c44;
  --color-brand-900: #071f30;
  --color-brand-950: #04121d;

  /* Deep-water ink ground — the platform "ground" used by the horizon-line
     gradient signature and as the dark-mode base (brand.md §7.1). */
  --color-ink: #0b2a3a;

  /* ═══════════ base: accent ramp — luminous horizon teal (AI spark + sea) ═════ */
  --color-accent-50: #ecfeff;
  --color-accent-100: #cbf6f9;
  --color-accent-200: #a2eef3;
  --color-accent-300: #6ee0e9;
  --color-accent-400: #2ed0dd;
  --color-accent-500: #16bdca; /* luminous signature — graphic / on-dark only */
  --color-accent-600: #0c9aa8;
  --color-accent-700: #0c757f; /* AA-dark step — carries text on light */
  --color-accent-800: #115e68;
  --color-accent-900: #134e57;
  --color-accent-950: #06333b;

  /* ═══════════ base: neutral ramp — slate (platform-uniform chrome) ═══════════ */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-neutral-950: #020617;

  /* ═══════════ base: feedback ramps (platform-uniform, NON-overridable) ═══════ */
  --color-success-50: #ecfdf5;
  --color-success-100: #d1fae5;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;
  --color-success-800: #065f46;
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;
  --color-info-800: #1e40af;

  /* ═══════════ semantic: surfaces & text ═════════════════════════════════════ */
  --color-bg: #f6f8fa;
  --color-bg-subtle: #eceff3;
  --color-surface: #ffffff;
  --color-surface-hover: #f1f5f9;
  --color-fg: var(--color-neutral-900);
  --color-fg-muted: #5a6b81;
  --color-border: var(--color-neutral-200);
  --color-skeleton: var(--color-neutral-200);
  --color-overlay: rgb(2 6 23 / 0.5);

  /* ═══════════ semantic: accent (teal) — decoupled from the brand ramp ═══════ */
  --color-accent: var(--color-accent-700);
  --color-accent-hover: var(--color-accent-800);
  --color-accent-fg: #ffffff;
  --color-accent-soft: #e2f8fb;

  /* ═══════════ semantic: focus ring ══════════════════════════════════════════ */
  --color-ring: var(--color-accent-700);

  /* ═══════════ semantic: feedback role aliases (dark mode re-maps these) ══════ */
  --color-success-soft: var(--color-success-50);
  --color-success: var(--color-success-600);
  --color-success-strong: var(--color-success-700);
  --color-success-fg: #ffffff;
  --color-warning-soft: var(--color-warning-50);
  --color-warning: var(--color-warning-600);
  --color-warning-strong: var(--color-warning-700);
  --color-warning-fg: #ffffff;
  --color-danger-soft: var(--color-danger-50);
  --color-danger: var(--color-danger-600);
  --color-danger-strong: var(--color-danger-700);
  --color-danger-fg: #ffffff;
  --color-info-soft: var(--color-info-50);
  --color-info: var(--color-info-600);
  --color-info-strong: var(--color-info-700);
  --color-info-fg: #ffffff;
  /* QR quiet zone (auth MFA enrolment): theme-INVARIANT literal white —
     the QR canvas interior is drawn #ffffff/#000000 for scanner contrast,
     so its frame must not follow the theme. Not for general UI use. */
  --color-qr-frame: #ffffff;

  /* ═══════════ base: spacing — 4px rhythm (design-system.md §3.3) ═════════════ */
  --space-0: 0;
  --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-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ═══════════ semantic: radius / control sizes ══════════════════════════════ */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.875rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;
  --radius-control: var(--radius-md);
  --control-sm: 2rem; /* 32px — a11y minimum hit target (issue #66) */
  --control-md: 2.5rem; /* 40px */
  --control-lg: 3rem; /* 48px */

  /* ═══════════ base: elevation — soft, cool-tinted (kills the "flat" read) ════ */
  --shadow-xs: 0 1px 2px 0 rgb(11 42 58 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(11 42 58 / 0.09), 0 1px 2px -1px rgb(11 42 58 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(11 42 58 / 0.1), 0 2px 6px -2px rgb(11 42 58 / 0.06);
  --shadow-lg: 0 12px 28px -6px rgb(11 42 58 / 0.14), 0 4px 10px -4px rgb(11 42 58 / 0.08);
  --shadow-xl: 0 24px 48px -12px rgb(11 42 58 / 0.2), 0 8px 20px -8px rgb(11 42 58 / 0.1);

  /* ═══════════ base: typography ══════════════════════════════════════════════ */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Geist", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Tabular, lining figures for R$ / CPF / CNPJ / IDs (issue #60). */
  --font-feature-tabular: "tnum" 1, "lnum" 1, "cv01" 1;

  --font-size-xs: 0.75rem;
  --line-height-xs: 1rem;
  --font-size-sm: 0.875rem;
  --line-height-sm: 1.25rem;
  --font-size-md: 1rem;
  --line-height-md: 1.5rem;
  --font-size-lg: 1.125rem;
  --line-height-lg: 1.75rem;
  --font-size-xl: 1.25rem;
  --line-height-xl: 1.75rem;
  --font-size-2xl: 1.5rem;
  --line-height-2xl: 2rem;
  --font-size-3xl: 1.875rem;
  --line-height-3xl: 2.25rem;
  /* display / hero steps for the bold moments */
  --font-size-4xl: 2.25rem;
  --line-height-4xl: 2.5rem;
  --font-size-5xl: 3rem;
  --line-height-5xl: 3.25rem;
  --font-size-display: 4rem;
  --line-height-display: 4.25rem;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.02em;

  /* ═══════════ base: focus & motion (a11y floor, issue #66) ═══════════════════ */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/*
 * Dark mode — the deep-water ink ground. Re-maps ONLY the semantic layer
 * (design-system.md §3.2, §4.4); base ramps, spacing, type, and radius are
 * untouched, so the flip is a value swap with zero component changes. Every
 * pairing keeps WCAG AA (verified by test/contrast.test.ts).
 */
[data-theme="dark"] {
  --color-bg: #081c25;
  --color-bg-subtle: #122e3a;
  --color-surface: #0e2a36;
  --color-surface-hover: #163a48;
  --color-fg: #e8eef2;
  --color-fg-muted: #93a7b5;
  --color-border: #1e3a47;
  --color-skeleton: #1a3644;
  --color-overlay: rgb(1 10 15 / 0.6);

  --color-accent: var(--color-accent-400); /* bright teal reads on the ink ground */
  --color-accent-hover: #55dae5;
  --color-accent-fg: #06222b; /* dark text on the bright teal solid */
  --color-accent-soft: #0f3a44;
  --color-ring: var(--color-accent-400);

  --color-success-soft: #0d3327;
  --color-success: #34d399;
  --color-success-strong: #6ee7b7;
  --color-success-fg: #052e1f;
  --color-warning-soft: #3a2c0a;
  --color-warning: #fbbf24;
  --color-warning-strong: #fcd34d;
  --color-warning-fg: #422006;
  --color-danger-soft: #3a1414;
  --color-danger: #f87171;
  --color-danger-strong: #fca5a5;
  --color-danger-fg: #450a0a;
  --color-info-soft: #0f2544;
  --color-info: #60a5fa;
  --color-info-strong: #93c5fd;
  --color-info-fg: #0a1a33;

  /* Shadows on dark read as deeper, lower-spread pools. */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.6), 0 4px 10px -4px rgb(0 0 0 / 0.45);
  --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.7), 0 8px 20px -8px rgb(0 0 0 / 0.5);
}

/*
 * prefers-color-scheme is honored ONLY when a surface opts in with
 * data-theme="auto" (design-system.md §3.2). Default = light; forced dark =
 * data-theme="dark". The values below mirror the [data-theme="dark"] block.
 */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --color-bg: #081c25;
    --color-bg-subtle: #122e3a;
    --color-surface: #0e2a36;
    --color-surface-hover: #163a48;
    --color-fg: #e8eef2;
    --color-fg-muted: #93a7b5;
    --color-border: #1e3a47;
    --color-skeleton: #1a3644;
    --color-overlay: rgb(1 10 15 / 0.6);
    --color-accent: var(--color-accent-400);
    --color-accent-hover: #55dae5;
    --color-accent-fg: #06222b;
    --color-accent-soft: #0f3a44;
    --color-ring: var(--color-accent-400);
    --color-success-soft: #0d3327;
    --color-success: #34d399;
    --color-success-strong: #6ee7b7;
    --color-success-fg: #052e1f;
    --color-warning-soft: #3a2c0a;
    --color-warning: #fbbf24;
    --color-warning-strong: #fcd34d;
    --color-warning-fg: #422006;
    --color-danger-soft: #3a1414;
    --color-danger: #f87171;
    --color-danger-strong: #fca5a5;
    --color-danger-fg: #450a0a;
    --color-info-soft: #0f2544;
    --color-info: #60a5fa;
    --color-info-strong: #93c5fd;
    --color-info-fg: #0a1a33;
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.6), 0 4px 10px -4px rgb(0 0 0 / 0.45);
    --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.7), 0 8px 20px -8px rgb(0 0 0 / 0.5);
  }
}

/*
 * Reduced motion (a11y floor, issue #66): neutralize non-essential animation
 * and transitions for every surface that imports the tokens (X7 cross-stack).
 * Components also gate decorative animation behind Tailwind's motion-safe:.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}