/**
 * Focus AI Design System. CSS variable tokens.
 * Imported by every app. The single source of truth for color, type, spacing, radius, shadows.
 *
 * The system is DARK-ONLY by design: a graphite canvas (#0C0C0F), one accent blue
 * (#2C61D2) expressed through glow, monospace-first typography, and zero border-radius.
 */

:root {
  color-scheme: dark;

  /* Brand colors */
  --color-accent: #2C61D2;        /* brand blue: buttons, active states, glows, lit cells */
  --color-accent-light: #b5d2ff;  /* periwinkle: HI cell states, eyebrows, halftone dots */
  --color-accent-strong: #1E40AF; /* deep blue: drop-shadow glow filters, logo bars */
  --color-accent-text: #4B7BE5;   /* WCAG-safe lighter accent for small text on dark */
  --color-ink: #FFFFFF;           /* strongest foreground on the dark canvas */
  --color-snow: #E2E8F0;          /* wordmark silver-white */

  /* Gradients. Used sparingly; the brand expresses depth through glow, not gradient fills. */
  --gradient-brand: linear-gradient(135deg, #2C61D2 0%, #122870 100%);
  --gradient-brand-reverse: linear-gradient(315deg, #2C61D2 0%, #122870 100%);
  --gradient-brand-horizontal: linear-gradient(90deg, #2C61D2 0%, #122870 100%);
  --gradient-brand-icon-matched: linear-gradient(180deg, #1E40AF 0%, #183490 50%, #122870 100%);

  /* Neutrals. Single dark palette; "page" is graphite, never pure black. */
  --color-bg-page: #0C0C0F;
  --color-bg-section-alt: #101014;
  --color-bg-dark: #070709;
  --color-bg-hero: #070709;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.60);
  --color-text-muted: rgba(255, 255, 255, 0.40);
  --color-text-on-dark: #FFFFFF;
  --color-border-default: #343434;
  --color-border-subtle: #232327;

  /* Surfaces. Recessed to raised, all within the graphite family. */
  --color-surface-sunken: #070709;
  --color-surface-well: #101014;
  --color-surface-input: #121216;
  --color-surface-header: #141414;
  --color-surface-icon: #1a1a1a;
  --color-surface-raised: #1c1c1c;
  --color-inactive: #303030;
  --color-faint: #838385;
  --color-tick: #d9d9d9;

  /* Status */
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-error: #F87171;
  --color-info: #4B7BE5;
  --color-success-soft: rgba(52, 211, 153, 0.12);
  --color-warning-soft: rgba(251, 191, 36, 0.12);
  --color-error-soft: rgba(248, 113, 113, 0.12);
  --color-info-soft: rgba(75, 123, 229, 0.12);

  /* Pixel-grid cell states. The signature "AI-native" visual language:
     OFF cells are dormant border-gray, ON cells are accent, HI cells are
     periwinkle with glow. Used by icons, data viz, and decorative grids. */
  --cell-off: rgba(52, 52, 52, 0.35);
  --cell-on: #2C61D2;
  --cell-hi: #b5d2ff;
  --cell-size: 11px;
  --cell-gap: 2px;

  /* Chart surfaces. Shared by every data-viz panel. */
  --chart-bg: var(--color-surface-header);
  --chart-border: var(--color-border-default);

  /* Typography. Geist Mono IS the identity: headlines, labels, nav, data.
     Inter is the support face for rare long-form body copy. */
  --font-display: var(--font-geist-mono, "Geist Mono"), "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: var(--font-inter, "Inter"), "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-geist-mono, "Geist Mono"), "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale. Floors are LEGIBILITY RULES: informative text never
     drops below 12px; decorative micro-labels never below 11px. */
  --text-hero: clamp(44px, 6vw, 56px);
  --text-h1: clamp(36px, 5vw, 48px);
  --text-h2: clamp(28px, 4vw, 40px);
  --text-h3: clamp(18px, 2.2vw, 24px);
  --text-h4: clamp(16px, 1.8vw, 18px);
  --text-body-lg: 15px;
  --text-body: 14px;
  --text-body-sm: 13px;
  --text-meta-lg: 14px;
  --text-meta: 13px;
  --text-caption: 12px;
  --text-ui: 12px;
  --text-micro: 11px;
  --text-eyebrow: 14px;

  --leading-none: 1;
  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-tight: 1.25;
  --leading-subheading: 1.2857;
  --leading-ui: 1.4;
  --leading-normal: 1.5;
  --leading-snug: 1.55;
  --leading-body: 1.55;
  --leading-relaxed: 1.7;

  /* Tracking. Uppercase mono demands positive, wide letter-spacing.
     Negative tracking is banned in this system. */
  --tracking-display-tight: 0.08em;
  --tracking-display: 0.12em;
  --tracking-heading-tight: 0.08em;
  --tracking-heading: 0.10em;
  --tracking-snug: 0.04em;
  --tracking-body: 0.02em;
  --tracking-caps-tight: 0.06em;
  --tracking-caps-narrow: 0.08em;
  --tracking-caps-mid-narrow: 0.10em;
  --tracking-caps: 0.12em;
  --tracking-caps-mid: 0.14em;
  --tracking-caps-wide: 0.18em;

  /* Weights. The brand uses 400 for nearly everything (uppercase + tracking
     do the work bold would); 700 is reserved for rare emphasis. The upper
     aliases intentionally resolve to 400 so display type stays light. */
  --weight-light: 400;
  --weight-regular: 400;
  --weight-medium: 400;
  --weight-semibold: 400;
  --weight-bold: 700;
  --weight-extrabold: 400;
  --weight-black: 400;

  /* Spacing */
  --space-0: 0;
  --space-0-5: 4px;
  --space-1: 8px;
  --space-1-5: 12px;
  --space-2: 16px;
  --space-2-5: 20px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
  --space-12: 96px;
  --space-14: 112px;
  --space-16: 128px;
  --space-20: 160px;
  --space-24: 192px;

  /* Container widths. Semantic names plus the legacy size scale. */
  --container-narrow: 720px;
  --container-prose: 1080px;
  --container-default: 1128px;
  --container-wide: 1400px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1128px;
  --container-2xl: 1280px;

  /* Fluid spacing. Scale smoothly between mobile and desktop. */
  --space-section-y: clamp(48px, 6vw, 96px);
  --space-section-x: clamp(20px, 4vw, 40px);
  --space-hero-y: clamp(64px, 9vw, 132px);
  --space-card-pad: clamp(20px, 3vw, 32px);
  --space-stack-sm: clamp(8px, 1vw, 12px);
  --space-stack-md: clamp(16px, 2vw, 24px);
  --space-stack-lg: clamp(24px, 3vw, 48px);
  --space-gutter: clamp(12px, 2vw, 24px);

  /* Radius. ZERO everywhere. Sharp 90-degree corners are a brand absolute;
     corner-tick markers stand in for rounded affordance. --radius-full is
     kept only for circular dots and pulse indicators. */
  --radius-none: 0;
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-3xl: 0;
  --radius-full: 9999px;

  --radius-card: 0;
  --radius-card-lg: 0;
  --radius-menu: 0;
  --radius-pill: 0;
  --radius-hero: 0;
  --radius-section: 0;

  /* Shadows. Two families: elevation (dark, for panels above the canvas)
     and glow (accent as light source; the brand's substitute for color fills). */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.60);
  --shadow-2xl: 0 14px 48px rgba(0, 0, 0, 0.65);

  --shadow-glow-accent: 0 0 8px rgba(44, 97, 210, 0.90), 0 0 24px rgba(44, 97, 210, 0.50), 0 0 48px rgba(44, 97, 210, 0.20);
  --shadow-glow-accent-light: 0 0 6px rgba(44, 97, 210, 0.95), 0 0 14px rgba(44, 97, 210, 0.60), 0 0 28px rgba(44, 97, 210, 0.35);
  --shadow-glow-gradient: 0 0 8px rgba(44, 97, 210, 0.90), 0 0 24px rgba(44, 97, 210, 0.50), 0 0 48px rgba(44, 97, 210, 0.20);
  --shadow-glow-cell: 0 0 6px rgba(44, 97, 210, 0.95), 0 0 14px rgba(44, 97, 210, 0.60), 0 0 28px rgba(44, 97, 210, 0.35), 0 0 50px rgba(44, 97, 210, 0.15);

  /* Glow filters. drop-shadow() variant of the glow, for icons and text. */
  --glow-filter: drop-shadow(0 0 4px rgba(30, 64, 175, 0.90)) drop-shadow(0 0 10px rgba(30, 64, 175, 0.55)) drop-shadow(0 0 18px rgba(30, 64, 175, 0.25));
  --glow-filter-soft: drop-shadow(0 0 2px rgba(30, 64, 175, 0.55)) drop-shadow(0 0 6px rgba(30, 64, 175, 0.18));

  /* Composite shadows for the brandbook surfaces. */
  --shadow-nav: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 10px 40px rgba(0, 0, 0, 0.60);
  --shadow-mega: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 14px 48px rgba(0, 0, 0, 0.65);
  --shadow-card-hover: 0 0 8px rgba(44, 97, 210, 0.35), 0 0 24px rgba(44, 97, 210, 0.15);
  --shadow-card-hero-hover: 0 0 8px rgba(44, 97, 210, 0.45), 0 0 24px rgba(44, 97, 210, 0.25), 0 0 48px rgba(44, 97, 210, 0.10);

  /* Motion */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-snappy: 180ms;
  --duration-base: 200ms;
  --duration-medium: 280ms;
  --duration-nav: 300ms;
  --duration-slow: 400ms;
  --duration-slowest: 600ms;

  --easing-linear: linear;
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --easing-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-snap: cubic-bezier(0.7, 0, 0.2, 1);
  --easing-cinematic: cubic-bezier(0.87, 0, 0.13, 1);
  --easing-scroll: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easing-decelerate: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
  --easing-liquid-glass: cubic-bezier(0.32, 0.72, 0, 1);

  /* Breakpoints. Documented contract for @media queries and JS. */
  --bp-phone: 480px;
  --bp-tablet: 720px;
  --bp-laptop: 960px;
  --bp-desktop: 1200px;
  --bp-wide: 1440px;

  /* Icon sizes */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-2xl: 48px;

  /* Focus ring. Used on every interactive element with :focus-visible. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-accent-text);
  --focus-ring-soft-width: 3px;

  /* Control sizing. Shared by Button, Input, and other controls.
     Touch-target compliant (44px = AAA). */
  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 56px;
  --control-padding-x-sm: 16px;
  --control-padding-x-md: 24px;
  --control-padding-x-lg: 32px;
  --control-font-size-sm: 12px;
  --control-font-size-md: 14px;
  --control-font-size-lg: 14px;

  /* Badge sizing */
  --badge-height-sm: 20px;
  --badge-height-md: 24px;
  --badge-height-lg: 28px;
  --badge-padding-x-sm: 8px;
  --badge-padding-x-md: 12px;
  --badge-padding-x-lg: 14px;
  --badge-font-size-sm: 11px;
  --badge-font-size-md: 12px;
  --badge-font-size-lg: 12px;

  /* Interactive hover. The brand does NOT lift on hover; it glows.
     Lift tokens resolve to 0 and stay only for API compatibility. */
  --button-hover-lift: 0px;
  --card-hover-lift: 0px;

  /* Z-index scale */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 10;
  --z-overlay: 50;
  --z-nav: 100;
  --z-dropdown: 200;
  --z-modal: 1000;
  --z-toast: 1500;
  --z-tooltip: 2000;

  /* HUD nav (dark glass island) */
  --nav-height: 56px;
  --nav-top: 16px;
  --nav-max-width: 1080px;
  --nav-clearance: calc(var(--nav-height) + var(--nav-top) + 32px);
  --nav-blur: 24px;
  --nav-saturate: 140%;
  --nav-brightness: 1;

  /* Backdrop-filter recipes wrapped in a custom property so build-time CSS
     minifiers cannot concatenate the function names without whitespace.
     Dark glass: blur + slight saturation over the graphite canvas keeps
     white mono text at WCAG AAA everywhere. */
  --liquid-glass-nav-backdrop: blur(24px) saturate(140%) brightness(0.9);
  --liquid-glass-mini-backdrop: blur(18px) saturate(140%) brightness(0.9);

  /* Surface tint applied on top of the backdrop. Dark tint so white mono
     text reads at AAA over any underlying section. */
  --liquid-glass-tint-top: rgba(12, 12, 15, 0.72);
  --liquid-glass-tint-bottom: rgba(12, 12, 15, 0.86);
  --liquid-glass-border: rgba(255, 255, 255, 0.14);
}

::selection {
  background: var(--color-accent);
  color: var(--color-text-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}