/**
 * A.R.C Technology — Design Tokens v7.0
 * "Resilient Orbit" — Retro-Futurist Neubrutalist Design System
 * v7: light-first — light chrome + heroes for readability; navy anchors
 * the dark islands (stats bar, CTA bands, footer, .section--dark)
 */

:root {
  /* ===========================
     RESILIENT ORBIT COLOR SYSTEM
     High-contrast vibrant palette
     =========================== */

  /* Navy — Deep cosmic base */
  --color-navy:           #0A2540;
  --color-navy-light:     #0f3460;
  --color-navy-muted:     #153d6e;

  /* White surfaces */
  --color-white:          #ffffff;
  --color-off-white:      #f8fafc;
  --color-light-gray:     #e2e8f0;

  /* Teal — Primary energy */
  --color-teal:           #00D4FF;
  --color-teal-dark:      #00a8cc;
  --color-teal-glow:      rgba(0, 212, 255, 0.25);
  --color-teal-subtle:    rgba(0, 212, 255, 0.08);

  /* Coral — Warm accent */
  --color-coral:          #FF6B6B;
  --color-coral-dark:     #e55a5a;
  --color-coral-glow:     rgba(255, 107, 107, 0.25);
  --color-coral-subtle:   rgba(255, 107, 107, 0.08);

  /* Yellow — Sunny highlight */
  --color-yellow:         #FFD60A;
  --color-yellow-dark:    #e6c009;
  --color-yellow-glow:    rgba(255, 214, 10, 0.25);
  --color-yellow-subtle:  rgba(255, 214, 10, 0.08);

  /* Inline / body links — navy on white (~12:1); keep --color-teal for UI chrome & dark surfaces */
  --color-link:           #0A2540;
  --color-link-hover:     #0f3460;

  /* WCAG 2.2 AA — borders/UI components on white or light surfaces.
     teal-a11y now also passes AA normal text (4.6:1 vs #fff) so the name
     can no longer mislead; coral-a11y remains UI/large-text only (4.05:1) —
     use --color-on-light-coral(-deep) for small coral-family text. */
  --color-teal-a11y:           #007487;
  --color-coral-a11y:          #d94f4f;

  /* WCAG 2.2 AA — small text / icons on white or very light surfaces (~4.5:1+ vs #fff) */
  --color-on-light-teal:       #006B82;
  --color-on-light-coral:      #c2410c;
  --color-on-light-coral-deep: #b91c1c;
  --color-on-light-purple:     #5b21b6;
  --color-on-light-green:      #047857;
  --color-on-light-yellow:     #854d0e;

  /* Semantic mappings */
  --color-primary:        var(--color-teal);
  --color-primary-dark:   var(--color-teal-dark);
  --color-primary-glow:   var(--color-teal-glow);
  --color-accent:         var(--color-coral);
  --color-accent-dark:    var(--color-coral-dark);
  --color-highlight:      var(--color-yellow);
  --color-highlight-dark: var(--color-yellow-dark);

  /* Surface & text */
  --color-surface:        var(--color-white);
  --color-surface-alt:    var(--color-off-white);
  --color-bg-dark:        var(--color-navy);
  --color-text:           var(--color-navy);
  --color-text-secondary: rgba(10, 37, 64, 0.65);
  /* 0.78: keeps ~4.5:1 even under a stacked 0.85 disabled-state opacity */
  --color-text-muted:     rgba(10, 37, 64, 0.78);
  --color-text-on-dark:   #ffffff;
  --color-text-on-dark-secondary: rgba(255, 255, 255, 0.7);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.50);

  /* Borders */
  --color-border:         rgba(10, 37, 64, 0.12);
  --color-border-bold:    var(--color-navy);
  --color-border-hover:   rgba(10, 37, 64, 0.25);
  --color-border-on-dark: rgba(255, 255, 255, 0.12);

  /* Dark surface (for inverted cards) */
  --color-dark-surface:   var(--color-navy);
  --color-dark-border:    rgba(255, 255, 255, 0.1);

  /* Gradients */
  --gradient-hero:        linear-gradient(135deg, #0A2540 0%, #0f3460 50%, #0A2540 100%);
  /* Text gradient — light-surface default (every stop ≥4.5:1 vs #fff);
     vibrant original reserved for dark islands via --gradient-text-vibrant */
  --gradient-text:         linear-gradient(135deg, #006B82, #0f3460 50%, #b91c1c);
  --gradient-text-vibrant: linear-gradient(135deg, #00D4FF, #FF6B6B, #FFD60A);
  --gradient-teal-coral:  linear-gradient(135deg, #00D4FF, #FF6B6B);
  --gradient-glow:        radial-gradient(circle, rgba(0,212,255,0.15) 0%, rgba(255,214,10,0.06) 40%, transparent 70%);
  /* Light hero wash — off-white base with faint teal/yellow blooms */
  --gradient-hero-light:
    radial-gradient(56rem 28rem at 14% 8%, rgba(0, 212, 255, 0.10), transparent 65%),
    radial-gradient(46rem 24rem at 86% 22%, rgba(255, 214, 10, 0.08), transparent 65%),
    linear-gradient(var(--color-off-white), var(--color-white));

  /* ===========================
     TYPOGRAPHY
     =========================== */
  --font-display:    'Space Grotesk', sans-serif;
  --font-family:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Weights — bold & chunky for neubrutalist feel */
  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-black:      900;

  /* Fluid font sizes */
  --fs-xs:           0.75rem;
  --fs-sm:           0.875rem;
  --fs-body:         1.125rem;
  --fs-lg:           var(--fs-body);
  --fs-xl:           1.25rem;
  --fs-2xl:          clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --fs-3xl:          clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --fs-4xl:          clamp(2.5rem, 2rem + 3vw, 4rem);
  --fs-hero:         clamp(3.5rem, 3rem + 4vw, 6rem);
  --fs-label:        0.6875rem;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ===========================
     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-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ===========================
     BORDERS & RADIUS
     Neubrutalist: thick borders + generous radius
     =========================== */
  --border-thin:     1px;
  --border-medium:   2px;
  --border-thick:    4px;
  --border-chunky:   6px;

  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-2xl:      24px;
  --radius-full:     9999px;

  /* ===========================
     SHADOWS
     Vibrant colored glows + solid neubrutalist shadows
     =========================== */
  --shadow-sm:       0 2px 8px rgba(10, 37, 64, 0.06);
  --shadow-md:       0 4px 20px rgba(10, 37, 64, 0.1);
  --shadow-lg:       0 8px 40px rgba(10, 37, 64, 0.12);
  --shadow-xl:       0 16px 60px rgba(10, 37, 64, 0.15);
  --shadow-brutal:   6px 6px 0px var(--color-navy);
  --shadow-teal:     0 0 20px rgba(0, 212, 255, 0.3);
  --shadow-coral:    0 0 20px rgba(255, 107, 107, 0.3);
  --shadow-yellow:   0 0 20px rgba(255, 214, 10, 0.3);

  /* ===========================
     MOTION
     Playful, energetic, bouncy
     =========================== */
  --transition-fast:   150ms;
  --transition-base:   300ms;
  --transition-slow:   500ms;
  --transition-reveal:  700ms;

  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);

  /* ===========================
     LAYOUT
     =========================== */
  --container-max:   1280px;
  --container-px:    clamp(1.25rem, 4vw, 2rem);
  --header-height:   80px;
  --section-py:      clamp(5rem, 8vw, 8rem);
  /* Space below centered section titles (matches .section-header) */
  --section-header-mb: clamp(2.5rem, 5vw, 4rem);
  /* Multi-column grids — prefer over raw rem */
  --gap-grid-tight:  var(--space-6);
  --gap-grid:        var(--space-8);
  --gap-grid-wide:   var(--space-12);
  /* @media breakpoints: use max-width 767px (mobile), 1023px (tablet) sitewide */

  /* ===========================
     CURSOR TRACKING (set by JS)
     =========================== */
  --mouse-x: 50%;
  --mouse-y: 50%;

  /* ===========================
     HEADER + BREADCRUMB CHROME (shared frosted bar + cursor glow; keep in sync)
     v7: frosted off-white — navy text sits on it, teal/yellow glow stays subtle
     =========================== */
  --chrome-radial-glow: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(0, 212, 255, 0.10) 0%,
    rgba(255, 214, 10, 0.05) 40%,
    transparent 70%
  );
  --chrome-tint: linear-gradient(
    rgba(248, 250, 252, 0.86),
    rgba(248, 250, 252, 0.86)
  );
  --chrome-tint-scrolled: linear-gradient(
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.95)
  );
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --chrome-radial-glow: radial-gradient(
      circle at 50% 35%,
      rgba(0, 212, 255, 0.08) 0%,
      rgba(255, 214, 10, 0.04) 45%,
      transparent 72%
    );
    --chrome-tint: linear-gradient(
      rgba(248, 250, 252, 0.9),
      rgba(248, 250, 252, 0.9)
    );
  }
}

/* ===========================
   DARK SECTIONS (navy bg)
   =========================== */
.section--dark,
.bg-navy,
.cta-section:not(.cta-section--light) {
  --color-surface: var(--color-navy);
  --color-text: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-muted: rgba(255, 255, 255, 0.50);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-hover: rgba(255, 255, 255, 0.25);
}

/* ===========================
   SCROLLBAR
   =========================== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-light-gray); }
::-webkit-scrollbar-thumb {
  background: var(--color-teal-dark);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-teal-a11y); }