/* Design Tokens - High-Assurance Infrastructure */
:root {
  /* Canvas System - "Illuminated Precision" dark mode */
  --color-canvas-base: #1C1E22;        /* Deep charcoal, warm bias */
  --color-canvas-surface-1: #24262B;   /* Elevated +8% lightness */
  --color-canvas-surface-2: #2C2E33;   /* More elevated +16% lightness */
  --color-canvas-surface-3: #34363B;   /* Highest elevation +24% lightness */

  /* Dual Green System - "Signal vs. Foundation" */
  --color-green-foundation: #2F5A1E;     /* Stability: buttons, brand anchors */
  --color-green-foundation-hover: #3A6B26; /* Hover state */
  --color-green-signal: #4ADE80;          /* Data states: success, profit, "go" */
  --color-green-signal-glow: #22C55E;     /* Signal depth/glow */

  /* Legacy Brand Colors (keep for logo compatibility) */
  --color-brand-primary: #418D20;      /* Original Oakie green */
  --color-brand-secondary: #4E9660;
  --color-brand-accent: #6FB87E;
  --color-brand-light: #E8F5EB;

  /* Background Colors - Light mode (non-hero sections) */
  --color-bg-white: #ffffff;
  --color-bg-cream: #EAE7DF;
  --color-bg-light: #EAE7DF;
  --color-bg-light-secondary: #DDD9D2;
  --color-bg-lime: #B8E962;
  --color-bg-dark: #34404A;
  --color-bg-dark-navy: #2C3942;

  /* Text Colors - "Paper on Metal" */
  --color-text-primary: #F5F1E8;       /* Bone/paper - warm off-white */
  --color-text-secondary: #C7C3B8;     /* Muted, aged paper */
  --color-text-tertiary: #8F8B80;      /* Subtle, low-hierarchy */
  --color-text-disabled: #5A5850;      /* Nearly invisible */

  /* Text Colors - Light mode */
  --color-text-light-primary: #2A2A2A;
  --color-text-light-secondary: #6B6B6B;
  --color-text-light-tertiary: #9ca3af;

  /* Legacy */
  --color-text-on-dark: #F5F1E8;       /* Updated to paper color */
  --color-text-on-brand: #ffffff;

  /* Border Colors */
  --color-border-light: #e5e7eb;
  --color-border-medium: #d1d5db;
  --color-border-accent: var(--color-brand-accent);

  /* Typography Scale - Contemporary 2025 (larger sizes) */
  --font-size-h1: clamp(3rem, 2rem + 4vw, 5.5rem);
  --font-size-h2: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --font-size-h3: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  --font-size-h4: clamp(1.375rem, 1.125rem + 1vw, 2rem);
  --font-size-body-large: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --font-size-body: 1.0625rem;
  --font-size-small: 0.9375rem;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* Spacing Scale - Contemporary 2025 (more generous) */
  --spacing-xs: 0.75rem;
  --spacing-sm: clamp(2rem, 1.5rem + 2vw, 3rem);
  --spacing-md: clamp(4rem, 3rem + 3vw, 6rem);
  --spacing-lg: clamp(5rem, 4rem + 4vw, 8rem);
  --spacing-xl: clamp(7rem, 5rem + 6vw, 10rem);

  /* Border Radius - "Machined Materiality" */
  --radius-sm: 0.25rem;    /* 4px - very tight, precision-cut */
  --radius-md: 0.375rem;   /* 6px - still precise */
  --radius-lg: 0.5rem;     /* 8px - maximum softness for cards */
  --radius-xl: 0.625rem;   /* 10px - reserved for large surfaces */
  --radius-2xl: 0.75rem;   /* 12px - hero video container only */

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-brand: 0 10px 30px rgba(37, 99, 235, 0.15);

  /* Transitions - "Zero Latency" snap feel */
  --transition-instant: 100ms cubic-bezier(0.4, 0, 1, 1);      /* Snap out */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.6, 1);       /* Quick settle */
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);       /* Standard */
  --transition-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1);     /* Deliberate */
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);       /* Slow reveal */

  /* Z-index Scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;

  /* Container Widths */
  --container-max-width: 1480px;  /* Changed from 1280px - +200px total space */
  --container-padding: clamp(1rem, 3vw, 2rem);

  /* Video Indicator Positions - aligned with control connector arrival points */
  --indicator-position-queue: 134px;     /* Control 1 center */
  --indicator-position-outlook: 238px;   /* Control 2 center */
  --indicator-position-accuracy: 340px;  /* Control 3 center */

  /* Video Background Frame System */
  --video-frame-height: 38.15rem;  /* ~610px - empirically tuned to match content */
  --video-frame-color: var(--color-canvas-surface-2);  /* #2C2E33 - subtle elevation */
  --video-frame-border: rgba(74, 222, 128, 0.15);  /* Subtle green tint */
  --video-frame-glow: rgba(74, 222, 128, 0.08);  /* Very subtle brand glow */
}