/**
 * E57 DESIGN TOKENS — Master Token System
 * ═══════════════════════════════════════════════════════════════════
 *
 * Single source of truth for ALL visual values on efiftyseven.com.
 * Change values here → entire site restyles. No hunting through files.
 *
 * Architecture: 16 token dimensions derived from:
 * - WMVILLAGE proven production token system (Oscar Artica)
 * - Open Props (MIT) — Adam Argyle, Google Chrome team
 * - Tailwind v4 (MIT) — color science (OKLCH)
 * - Utopia (MIT) — fluid type/space scales
 * - Pico CSS (MIT) — semantic color patterns
 * - Shoelace (MIT) — z-index / focus ring patterns
 *
 * License: All source references are MIT/BSD/Apache/ISC.
 * This file is E57 proprietary, built from permissive-licensed foundations.
 *
 * Token Categories (16):
 *  1. Brand Colors          9. Easings
 *  2. Semantic Colors       10. Animations
 *  3. Neutral Palette       11. Durations
 *  4. Typography            12. Layout
 *  5. Spacing (Fluid)       13. Glass Effects
 *  6. Sizing                14. Noise & Texture
 *  7. Borders & Radius      15. Gradients
 *  8. Shadows               16. Masks & Filters
 */


/* ═══════════════════════════════════════════
   1. BRAND COLORS
   ═══════════════════════════════════════════ */

:root {
  --e57-blue:          #174b7f;
  --e57-blue-light:    #2e6094;
  --e57-blue-dark:     #0d2f54;
  --e57-green:         #31a85b;
  --e57-green-light:   #4cc774;
  --e57-green-dark:    #1b7a3d;
  --e57-amber:         #f1b512;
  --e57-amber-light:   #ffd166;
  --e57-amber-dark:    #c89200;
  --e57-red:           #df2727;
  --e57-red-light:     #ff5252;
  --e57-red-dark:      #b71c1c;
}


/* ═══════════════════════════════════════════
   2. SEMANTIC COLORS
   ═══════════════════════════════════════════ */

:root {
  --color-primary:        var(--e57-blue);
  --color-secondary:      var(--e57-green);
  --color-accent:         var(--e57-amber);

  /* Feedback states */
  --color-success:        var(--e57-green);
  --color-success-bg:     #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-success-text:   #166534;

  --color-warning:        var(--e57-amber);
  --color-warning-bg:     #fff8e1;
  --color-warning-border: #ffe082;
  --color-warning-text:   #856404;

  --color-error:          var(--e57-red);
  --color-error-bg:       #fef2f2;
  --color-error-border:   #fecaca;
  --color-error-text:     #991b1b;

  --color-info:           var(--e57-blue-light);
  --color-info-bg:        #eff6ff;
  --color-info-border:    #bfdbfe;
  --color-info-text:      #1e40af;

  /* Surfaces */
  --color-bg:             #ffffff;
  --color-bg-alt:         #f5f7f9;
  --color-bg-page:        #f8f9fa;
  --color-surface-1:      #ffffff;
  --color-surface-2:      #f5f7f9;
  --color-surface-3:      #edf0f3;
  --color-surface-raised: #ffffff;

  /* Text */
  --color-text:           #151b17;
  --color-text-secondary: #3e423f;
  --color-text-muted:     #6b7280;
  --color-text-inverse:   #ffffff;

  /* Borders */
  --color-border:         #d4ddd2;
  --color-border-light:   #e5e7eb;
  --color-border-focus:   var(--e57-blue);

  /* Text — extended scale */
  --color-text-dim:       #9ca3af;

  /* Manufacturer accent (default McMenon green) */
  --mfr-accent:           var(--e57-green);
  --mfr-accent-rgb:       49, 168, 91;
}


/* ═══════════════════════════════════════════
   3. NEUTRAL PALETTE
   ═══════════════════════════════════════════ */

:root {
  --gray-50:   #f9fafb;
  --gray-100:  #f3f4f6;
  --gray-200:  #e5e7eb;
  --gray-300:  #d1d5db;
  --gray-400:  #9ca3af;
  --gray-500:  #6b7280;
  --gray-600:  #4b5563;
  --gray-700:  #374151;
  --gray-800:  #1f2937;
  --gray-900:  #111827;
  --gray-950:  #030712;
}


/* ═══════════════════════════════════════════
   4. TYPOGRAPHY
   ═══════════════════════════════════════════ */

:root {
  /* Font stacks — self-hosted, no external requests */
  --font-body:     "Public Sans", system-ui, -apple-system, sans-serif;
  --font-heading:  "Public Sans", system-ui, -apple-system, sans-serif;
  --font-display:  "Poppins", var(--font-heading);
  --font-mono:     "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  /* Fluid type scale (Utopia: 16px–20px, 1.25 ratio, 320–1440px) */
  --text-xs:    clamp(0.64rem, 0.61rem + 0.13vw, 0.70rem);
  --text-sm:    clamp(0.80rem, 0.76rem + 0.18vw, 0.89rem);
  --text-base:  clamp(1.00rem, 0.93rem + 0.36vw, 1.13rem);
  --text-md:    clamp(1.13rem, 1.04rem + 0.43vw, 1.25rem);
  --text-lg:    clamp(1.25rem, 1.14rem + 0.54vw, 1.41rem);
  --text-xl:    clamp(1.56rem, 1.41rem + 0.76vw, 1.76rem);
  --text-2xl:   clamp(1.95rem, 1.73rem + 1.11vw, 2.20rem);
  --text-3xl:   clamp(2.44rem, 2.12rem + 1.60vw, 2.75rem);
  --text-4xl:   clamp(3.05rem, 2.58rem + 2.35vw, 3.43rem);
  --text-5xl:   clamp(3.50rem, 2.90rem + 3.00vw, 4.00rem);

  /* Font weights */
  --font-thin:       100;
  --font-light:      300;
  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;
  --font-black:      900;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.8;

  /* Letter spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;
}


/* ═══════════════════════════════════════════
   5. SPACING (Fluid — Utopia scale)
   ═══════════════════════════════════════════ */

:root {
  --space-3xs:  clamp(0.25rem,  0.23rem + 0.09vw,  0.31rem);
  --space-2xs:  clamp(0.50rem,  0.46rem + 0.18vw,  0.63rem);
  --space-xs:   clamp(0.75rem,  0.70rem + 0.27vw,  0.94rem);
  --space-sm:   clamp(1.00rem,  0.93rem + 0.36vw,  1.25rem);
  --space-md:   clamp(1.50rem,  1.39rem + 0.54vw,  1.88rem);
  --space-lg:   clamp(2.00rem,  1.86rem + 0.71vw,  2.50rem);
  --space-xl:   clamp(3.00rem,  2.79rem + 1.07vw,  3.75rem);
  --space-2xl:  clamp(4.00rem,  3.71rem + 1.43vw,  5.00rem);
  --space-3xl:  clamp(6.00rem,  5.57rem + 2.14vw,  7.50rem);

  /* One-up pairs — for margins between sections of different visual weight */
  --space-xs-sm:  clamp(0.75rem,  0.57rem + 0.89vw,  1.25rem);
  --space-sm-md:  clamp(1.00rem,  0.71rem + 1.43vw,  1.88rem);
  --space-md-lg:  clamp(1.50rem,  1.18rem + 1.61vw,  2.50rem);
  --space-lg-xl:  clamp(2.00rem,  1.43rem + 2.86vw,  3.75rem);
  --space-xl-2xl: clamp(3.00rem,  2.36rem + 3.21vw,  5.00rem);
}


/* ═══════════════════════════════════════════
   6. SIZING
   ═══════════════════════════════════════════ */

:root {
  --size-px:       1px;
  --size-0:        0;
  --size-1:        0.25rem;
  --size-2:        0.5rem;
  --size-3:        0.75rem;
  --size-4:        1rem;
  --size-6:        1.5rem;
  --size-8:        2rem;
  --size-12:       3rem;
  --size-16:       4rem;
  --size-24:       6rem;
  --size-32:       8rem;
  --size-48:       12rem;
  --size-64:       16rem;

  /* Content widths */
  --container-xs:   20rem;    /* 320px — mobile */
  --container-sm:   30rem;    /* 480px — forms */
  --container-md:   48rem;    /* 768px — content */
  --container-lg:   64rem;    /* 1024px — wide content */
  --container-max:  82.5rem;  /* 1320px — full layout (matches configurator) */

  /* Header */
  --header-height:  5rem;

  /* Aspect ratios */
  --ratio-square:     1;
  --ratio-landscape:  4/3;
  --ratio-portrait:   3/4;
  --ratio-widescreen: 16/9;
  --ratio-ultrawide:  21/9;
  --ratio-golden:     1.618/1;
}


/* ═══════════════════════════════════════════
   7. BORDERS & RADIUS
   ═══════════════════════════════════════════ */

:root {
  /* Border widths */
  --border-1:  1px;
  --border-2:  2px;
  --border-3:  3px;
  --border-4:  4px;

  /* Border radius */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-full:  9999px;

  /* Focus ring (accessibility) */
  --focus-ring-width:  3px;
  --focus-ring-color:  var(--e57-blue-light);
  --focus-ring:        0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}


/* ═══════════════════════════════════════════
   8. SHADOWS
   ═══════════════════════════════════════════ */

:root {
  /* Outer shadows — elevation scale */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl:   0 20px 25px rgba(0, 0, 0, 0.10), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl:  0 25px 50px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* Inner shadows */
  --shadow-inner-sm: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-inner-md: inset 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-inner-lg: inset 0 4px 8px rgba(0, 0, 0, 0.10);

  /* Colored glow shadows */
  --shadow-glow-blue:  0 0 20px rgba(23, 75, 127, 0.25);
  --shadow-glow-green: 0 0 20px rgba(49, 168, 91, 0.25);
  --shadow-glow-amber: 0 0 20px rgba(241, 181, 18, 0.25);
}


/* ═══════════════════════════════════════════
   9. EASINGS (from Open Props, MIT)
   ═══════════════════════════════════════════ */

:root {
  /* Standard */
  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);

  /* In */
  --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(0.50, 0, 1, 1);
  --ease-in-3: cubic-bezier(0.70, 0, 1, 1);

  /* Out */
  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
  --ease-out-2: cubic-bezier(0, 0, 0.50, 1);
  --ease-out-3: cubic-bezier(0, 0, 0.30, 1);
  --ease-out-4: cubic-bezier(0, 0, 0.10, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);

  /* In-Out */
  --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
  --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
  --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);

  /* Elastic — like a pressure gauge needle */
  --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
  --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
  --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);

  /* Spring — controlled bounce */
  --ease-spring-soft: cubic-bezier(0.5, 1.2, 0.7, 1);
  --ease-spring-firm: cubic-bezier(0.3, 1.3, 0.6, 1);
  --ease-spring-stiff: cubic-bezier(0.2, 1.5, 0.5, 1);

  /* Squish — mechanical actuator feel */
  --ease-squish-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
  --ease-squish-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);

  /* Engineering-specific */
  --ease-precision:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-mechanical: cubic-bezier(0.4, 0, 0, 1);
  --ease-servo:      cubic-bezier(0.2, 0, 0, 1);

  /* Steps — digital readout effects */
  --ease-step-4:  steps(4, jump-both);
  --ease-step-8:  steps(8, jump-both);
  --ease-step-16: steps(16, jump-both);
}


/* ═══════════════════════════════════════════
   10. ANIMATIONS (keyframes + tokens)
   ═══════════════════════════════════════════ */

:root {
  --animation-fade-in:         fade-in 0.5s var(--ease-3);
  --animation-fade-in-up:      fade-in-up 0.6s var(--ease-out-3);
  --animation-fade-in-down:    fade-in-down 0.6s var(--ease-out-3);
  --animation-scale-up:        scale-up 0.5s var(--ease-3);
  --animation-slide-in-up:     slide-in-up 0.5s var(--ease-3);
  --animation-slide-in-down:   slide-in-down 0.5s var(--ease-3);
  --animation-slide-in-left:   slide-in-left 0.5s var(--ease-3);
  --animation-slide-in-right:  slide-in-right 0.5s var(--ease-3);
  --animation-spin:            spin 2s linear infinite;
  --animation-pulse:           pulse 2s var(--ease-out-3) infinite;
  --animation-ping:            ping 5s var(--ease-out-3) infinite;
  --animation-shimmer:         shimmer 1.8s ease-in-out infinite;

  /* Scroll reveal */
  --reveal-distance: 30px;
  --reveal-duration: 0.6s;
  --reveal-easing:   var(--ease-out-3);
  --reveal-stagger:  80ms;
}

@keyframes fade-in       { from { opacity: 0 } }
@keyframes fade-in-up    { from { opacity: 0; transform: translateY(30px) } }
@keyframes fade-in-down  { from { opacity: 0; transform: translateY(-30px) } }
@keyframes scale-up      { from { transform: scale(0.75) } }
@keyframes slide-in-up   { from { transform: translateY(25%) } }
@keyframes slide-in-down { from { transform: translateY(-25%) } }
@keyframes slide-in-left { from { transform: translateX(-25%) } }
@keyframes slide-in-right{ from { transform: translateX(25%) } }
@keyframes spin          { to   { transform: rotate(1turn) } }
@keyframes pulse         { 50%  { transform: scale(0.95) } }
@keyframes ping          { 90%, 100% { transform: scale(2); opacity: 0 } }
@keyframes shimmer {
  0%   { background-position: -200% 0 }
  100% { background-position: 200% 0 }
}


/* ═══════════════════════════════════════════
   11. DURATIONS
   ═══════════════════════════════════════════ */

:root {
  --duration-instant:   100ms;
  --duration-fast:      200ms;
  --duration-normal:    350ms;
  --duration-slow:      500ms;
  --duration-dramatic:  800ms;
  --duration-cinematic: 1200ms;
}


/* ═══════════════════════════════════════════
   12. LAYOUT
   ═══════════════════════════════════════════ */

:root {
  /* Z-index layers */
  --layer-base:      0;
  --layer-dropdown:  10;
  --layer-sticky:    20;
  --layer-drawer:    30;
  --layer-modal:     40;
  --layer-toast:     50;
  --layer-tooltip:   60;

  /* Breakpoints (reference — CSS vars can't be used in @media) */
  /* --bp-sm: 480px;  --bp-md: 768px;  --bp-lg: 1024px;  --bp-xl: 1280px; */
}


/* ═══════════════════════════════════════════
   13. GLASS EFFECTS
   ═══════════════════════════════════════════ */

:root {
  /* Blur intensities */
  --glass-blur-sm: 4px;
  --glass-blur-md: 12px;
  --glass-blur-lg: 24px;
  --glass-blur-xl: 40px;

  /* Light theme glass surfaces */
  --glass-surface-1: rgba(255, 255, 255, 0.60);
  --glass-surface-2: rgba(255, 255, 255, 0.75);
  --glass-surface-3: rgba(255, 255, 255, 0.85);

  /* Dark theme glass surfaces (instrument panel) */
  --glass-dark-1: rgba(15, 23, 42, 0.60);
  --glass-dark-2: rgba(15, 23, 42, 0.75);
  --glass-dark-3: rgba(15, 23, 42, 0.85);

  /* Borders */
  --glass-border:        1px solid rgba(255, 255, 255, 0.12);
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.06);
  --glass-border-accent: 1px solid rgba(23, 75, 127, 0.20);

  /* Composite shadows */
  --glass-shadow:          0 8px 32px rgba(0, 0, 0, 0.12);
  --glass-shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.20);

  /* Backdrop-filter composites */
  --backdrop-standard:   blur(12px) saturate(1.5);
  --backdrop-readout:    blur(8px) saturate(1.8) brightness(0.85);
  --backdrop-data:       blur(4px) saturate(1.2) contrast(1.05);
  --backdrop-instrument: blur(20px) saturate(1.3) brightness(0.85) contrast(1.1);
  --backdrop-modal:      blur(24px) saturate(1.5) brightness(0.6);
}


/* ═══════════════════════════════════════════
   14. NOISE & TEXTURE (SVG inline, no images)
   ═══════════════════════════════════════════ */

:root {
  --noise-fine:   url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  --noise-coarse: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.50' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  --noise-heavy:  url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E");
  --noise-blend:        overlay;
  --noise-blend-subtle: soft-light;
}


/* ═══════════════════════════════════════════
   15. GRADIENTS
   ═══════════════════════════════════════════ */

:root {
  /* E57 Brand gradients */
  --gradient-e57-hero:     linear-gradient(135deg, var(--e57-blue-dark) 0%, var(--e57-blue) 50%, var(--e57-blue-light) 100%);
  --gradient-e57-cta:      linear-gradient(135deg, var(--e57-green) 0%, var(--e57-green-dark) 100%);

  /* Technical gradients */
  --gradient-energy-blue:  linear-gradient(135deg, hsl(199, 89%, 48%) 0%, hsl(217, 91%, 60%) 100%);
  --gradient-nuclear-cyan: linear-gradient(135deg, hsl(183, 100%, 40%) 0%, hsl(199, 89%, 48%) 100%);
  --gradient-status-green: linear-gradient(135deg, hsl(142, 71%, 45%) 0%, hsl(160, 84%, 39%) 100%);
  --gradient-alert-amber:  linear-gradient(135deg, hsl(38, 92%, 50%) 0%, hsl(25, 95%, 53%) 100%);

  /* Surface gradients */
  --gradient-surface-subtle: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
  --gradient-depth:          linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);

  /* Radial glow (for KPI highlights) */
  --gradient-glow-blue:  radial-gradient(ellipse at 50% 0%, rgba(23, 75, 127, 0.15) 0%, transparent 70%);
  --gradient-glow-green: radial-gradient(ellipse at 50% 0%, rgba(49, 168, 91, 0.15) 0%, transparent 70%);

  /* Mesh gradient (industrial) */
  --gradient-mesh:
    radial-gradient(at 20% 20%, hsla(199, 89%, 48%, 0.12) 0%, transparent 50%),
    radial-gradient(at 80% 40%, hsla(183, 100%, 40%, 0.08) 0%, transparent 50%),
    radial-gradient(at 40% 80%, hsla(222, 47%, 20%, 0.15) 0%, transparent 50%);
}


/* ═══════════════════════════════════════════
   16. MASKS & FILTERS
   ═══════════════════════════════════════════ */

:root {
  /* Skeleton loading */
  --skeleton-base:     var(--gray-200);
  --skeleton-shine:    var(--gray-100);
  --skeleton-duration: 1.8s;

  /* Image filters */
  --filter-grayscale:  grayscale(100%);
  --filter-muted:      saturate(0.7) brightness(0.95);
  --filter-vivid:      saturate(1.3) contrast(1.05);

  /* Scroll progress */
  --scroll-progress-height: 3px;
  --scroll-progress-color:  var(--gradient-energy-blue);
}


/* ═══════════════════════════════════════════
   DARK THEME (future — instrument panel mode)
   ═══════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --color-bg:             var(--gray-900);
    --color-bg-alt:         var(--gray-800);
    --color-surface-1:      var(--gray-800);
    --color-surface-2:      var(--gray-700);
    --color-surface-3:      var(--gray-600);
    --color-text:           var(--gray-50);
    --color-text-secondary: var(--gray-300);
    --color-text-muted:     var(--gray-400);
    --color-border:         var(--gray-600);
    --color-border-light:   var(--gray-700);

    --skeleton-base:        var(--gray-700);
    --skeleton-shine:       var(--gray-600);
  }
}