/* ================================================================
   REGAL STEEL — DESIGN TOKENS  (Stage 3 — Premium)
   CSS Custom Properties · Full theme system
   ================================================================ */

/* ----------------------------------------------------------------
   DARK MODE  (Default — Industrial Night)
   Deep graphite steel. Controlled power. Factory at night.
   ---------------------------------------------------------------- */
:root,
[data-theme="dark"] {

  /* — Page Backgrounds — */
  --bg-void:        #06060c;
  --bg-primary:     #0a0a13;
  --bg-section-alt: #0e0f1b;
  --bg-surface:     #13141f;
  --bg-elevated:    #191a28;
  --bg-input:       rgba(255, 255, 255, 0.04);

  /* — Metallic Silver Tones — */
  --silver-white:   #f8f8f8;
  --silver-bright:  #e4e4e4;
  --silver-mid:     #b8b8b8;
  --silver-dim:     #787878;
  --silver-muted:   #444444;
  --silver-edge:    rgba(255, 255, 255, 0.07);

  /* — Text — */
  --text-primary:   #c4b898;
  --text-secondary: rgba(56, 189, 248, 0.70);
  --text-tertiary:  #5a7a96;
  --text-inverse:   #0d0d0d;
  --text-on-accent: #080808;

  /* — Accent Yellow (Hot Metal) — */
  --accent:         #f5c400;
  --accent-hover:   #d4a800;
  --accent-muted:   rgba(245, 196, 0, 0.60);
  --accent-dim:     rgba(245, 196, 0, 0.08);
  --accent-glow:    rgba(245, 196, 0, 0.18);

  /* — Accent Blue (Alusystems Family) — */
  --blue:           #38bdf8;
  --blue-muted:     rgba(56, 189, 248, 0.55);
  --blue-dim:       rgba(56, 189, 248, 0.08);
  --blue-glow:      rgba(56, 189, 248, 0.22);

  /* — Borders — */
  --border-subtle:  rgba(56, 189, 248, 0.07);
  --border-default: rgba(56, 189, 248, 0.12);
  --border-strong:  rgba(56, 189, 248, 0.20);
  --border-accent:  rgba(245, 196, 0, 1);

  /* — Overlays — */
  --overlay-hero:   rgba(5, 5, 5, 0.75);
  --overlay-card:   rgba(0, 0, 0, 0.55);
  --overlay-light:  rgba(0, 0, 0, 0.30);

  /* — Navigation — */
  --nav-bg:             transparent;
  --nav-bg-scrolled:    rgba(8, 8, 18, 0.92);
  --nav-border-scrolled:rgba(255, 255, 255, 0.07);
  --nav-backdrop:       blur(16px) saturate(180%);

  /* — Shadows — */
  --shadow-xs:      0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-sm:      0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-md:      0 8px 36px rgba(0, 0, 0, 0.55);
  --shadow-lg:      0 20px 60px rgba(0, 0, 0, 0.65);
  --shadow-accent:  0 0 0 1px var(--accent), 0 6px 28px var(--accent-glow);
  --shadow-glow:    0 0 50px var(--accent-glow);

  /* — Surface Sheen (light edge reflection) — */
  --surface-shine:        inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --surface-shine-strong: inset 0 1px 0 rgba(255, 255, 255, 0.11);
  --surface-left-edge:    inset 1px 0 0 rgba(255, 255, 255, 0.04);

  /* — Gradients — */
  --gradient-steel-sheen: linear-gradient(180deg,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.01) 40%,
      transparent 100%);

  --gradient-card-shine: linear-gradient(135deg,
      rgba(255,255,255,0.04) 0%,
      transparent 60%);

  --gradient-section-sep: linear-gradient(90deg,
      transparent 0%,
      rgba(56,189,248,0.15) 20%,
      rgba(245,196,0,0.25) 50%,
      rgba(56,189,248,0.15) 80%,
      transparent 100%);

  --gradient-hero-overlay: radial-gradient(
      ellipse 80% 100% at 8% 50%,
      rgba(16,16,16,0.5) 0%,
      rgba(5,5,5,0) 70%
    ),
    linear-gradient(
      to right,
      rgba(5,5,5,0.88) 30%,
      rgba(5,5,5,0.50) 70%,
      rgba(5,5,5,0.80) 100%
    );

  --gradient-metallic-text: linear-gradient(
      105deg,
      #7a5e28 0%,
      #c49040 18%,
      #e8c870 34%,
      #f8eeaa 50%,
      #e8c870 66%,
      #c49040 82%,
      #7a5e28 100%);

  /* — Grain texture opacity — */
  --grain-opacity: 0.038;

  /* — Misc — */
  --color-error:   #e05555;
  --color-success: #4caf7d;
}


/* ----------------------------------------------------------------
   LIGHT MODE  (Day Steel — White + Blue + Navy)
   Clean white ground. Navy depth. Sky-blue precision.
   ---------------------------------------------------------------- */
[data-theme="light"] {

  /* — Page Backgrounds — */
  --bg-void:        #e2e7f2;
  --bg-primary:     #f4f6fb;
  --bg-section-alt: #eaeff8;
  --bg-surface:     #ffffff;
  --bg-elevated:    #eef2fa;
  --bg-input:       rgba(14, 42, 88, 0.04);

  /* — Navy-mapped Silver Tones — */
  --silver-white:   #0c1e4f;   /* deep navy (pic 3) */
  --silver-bright:  #1a3258;
  --silver-mid:     #3d5e8a;
  --silver-dim:     #7a96be;
  --silver-muted:   #bfcfe0;
  --silver-edge:    rgba(14, 42, 88, 0.07);

  /* — Text (user-specified palette) — */
  --text-primary:   #0c1e4f;   /* deep navy (pic 3) — display & headings */
  --text-secondary: #000000;   /* black — body & paragraphs */
  --text-tertiary:  #1b6cbe;   /* medium blue (pic 2) — labels & mono */
  --text-inverse:   #f5f7fb;
  --text-on-accent: #0c1e4f;   /* navy on accent button */

  /* — Accent Blue (replaces gold in light mode) — */
  --accent:         #0ea5e9;
  --accent-hover:   #0284c7;
  --accent-muted:   rgba(14, 165, 233, 0.65);
  --accent-dim:     rgba(14, 165, 233, 0.09);
  --accent-glow:    rgba(14, 165, 233, 0.28);

  /* — Accent Blue (Alusystems family — prominent in light mode) — */
  --blue:           #0ea5e9;   /* slightly richer in light */
  --blue-muted:     rgba(14, 165, 233, 0.65);
  --blue-dim:       rgba(14, 165, 233, 0.10);
  --blue-glow:      rgba(14, 165, 233, 0.28);

  /* — Borders — */
  --border-subtle:  rgba(14, 165, 233, 0.14);
  --border-default: rgba(14, 42, 88, 0.12);
  --border-strong:  rgba(14, 42, 88, 0.22);
  --border-accent:  rgba(14, 165, 233, 1);

  /* — Overlays — */
  --overlay-hero:   rgba(5, 14, 36, 0.74);
  --overlay-card:   rgba(5, 14, 36, 0.48);
  --overlay-light:  rgba(5, 14, 36, 0.18);

  /* — Navigation — */
  --nav-bg:             transparent;
  --nav-bg-scrolled:    rgba(255, 255, 255, 0.97);
  --nav-border-scrolled:rgba(14, 165, 233, 0.20);
  --nav-backdrop:       blur(20px) saturate(200%);

  /* — Shadows — */
  --shadow-xs:      0 2px 8px  rgba(14, 42, 88, 0.08);
  --shadow-sm:      0 4px 20px rgba(14, 42, 88, 0.11);
  --shadow-md:      0 8px 36px rgba(14, 42, 88, 0.15);
  --shadow-lg:      0 20px 60px rgba(14, 42, 88, 0.20);
  --shadow-accent:  0 0 0 1px var(--accent), 0 6px 24px var(--accent-glow);
  --shadow-glow:    0 0 40px var(--blue-glow);

  /* — Surface Sheen — */
  --surface-shine:        inset 0 1px 0 rgba(255, 255, 255, 0.90);
  --surface-shine-strong: inset 0 1px 0 rgba(255, 255, 255, 0.98);
  --surface-left-edge:    inset 1px 0 0 rgba(255, 255, 255, 0.70);

  /* — Gradients — */
  --gradient-steel-sheen: linear-gradient(180deg,
      rgba(255,255,255,0.75) 0%,
      rgba(255,255,255,0.20) 40%,
      transparent 100%);

  --gradient-card-shine: linear-gradient(135deg,
      rgba(255,255,255,0.85) 0%,
      transparent 60%);

  --gradient-section-sep: linear-gradient(90deg,
      transparent 0%,
      rgba(14,165,233,0.25) 20%,
      rgba(192,136,0,0.30) 50%,
      rgba(14,165,233,0.25) 80%,
      transparent 100%);

  --gradient-hero-overlay: radial-gradient(
      ellipse 80% 100% at 8% 50%,
      rgba(5,14,36,0.52) 0%,
      rgba(0,0,0,0) 70%
    ),
    linear-gradient(
      to right,
      rgba(5,14,36,0.90) 30%,
      rgba(5,14,36,0.52) 70%,
      rgba(5,14,36,0.82) 100%
    );

  /* — Metallic text: navy → sky-blue shimmer — */
  --gradient-metallic-text: linear-gradient(
      92deg,
      #1a3258 0%,
      #38bdf8 28%,
      #93d9fb 50%,
      #38bdf8 72%,
      #1a3258 100%);

  /* — Grain texture opacity — */
  --grain-opacity: 0;

  /* — Misc — */
  --color-error:   #cc3333;
  --color-success: #2e7d52;
}


/* ----------------------------------------------------------------
   TYPOGRAPHY TOKENS  (global — not theme-specific)
   ---------------------------------------------------------------- */
:root {
  --font-display: 'Barlow Condensed', 'Impact', sans-serif;
  --font-body:    'Outfit', 'Barlow', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  /* Scale */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.125rem;    /* 18px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  2rem;        /* 32px */
  --text-3xl:  2.75rem;     /* 44px */
  --text-4xl:  3.5rem;      /* 56px */

  /* Fluid sizes */
  --text-hero:   clamp(3.75rem, 9.5vw, 9rem);
  --text-h2:     clamp(2.5rem,  5.5vw, 5.25rem);
  --text-stat:   clamp(2.25rem, 3.8vw, 4rem);

  /* Weights */
  --w-light:     300;
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;
  --w-xbold:     800;

  /* Leading */
  --lead-tight:   1.04;
  --lead-snug:    1.20;
  --lead-normal:  1.60;
  --lead-relaxed: 1.78;

  /* Tracking */
  --track-tighter: -0.04em;
  --track-tight:   -0.02em;
  --track-normal:  0em;
  --track-wide:    0.06em;
  --track-wider:   0.10em;
  --track-widest:  0.16em;
}


/* ----------------------------------------------------------------
   SPACING TOKENS
   ---------------------------------------------------------------- */
:root {
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-10: 2.5rem;    /* 40 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */
  --sp-20: 5rem;      /* 80 */
  --sp-24: 6rem;      /* 96 */

  /* Sections */
  --section-y: clamp(5rem, 9vw, 9rem);

  /* Chrome metallic gradient — clean cool silver, smooth top-to-bottom,
     NO dark horizon, NO warm tint. Used by hero "ENGINEERED",
     dark-section headlines, and footer text. */
  --gradient-chrome:
    linear-gradient(
      180deg,
      #f6f7f8 0%,
      #d6d8da 30%,
      #b4b6b8 60%,
      #989a9c 100%
    );
}


/* ----------------------------------------------------------------
   LAYOUT TOKENS
   ---------------------------------------------------------------- */
:root {
  --container-max:  1300px;
  --container-pad:  clamp(1.25rem, 4vw, 2.75rem);
  --nav-h:          75px;
  --nav-h-sm:       60px;
  --radius:         3px;
  --radius-md:      5px;
  --radius-lg:      8px;
  --radius-xl:      12px;
}


/* ----------------------------------------------------------------
   MOTION TOKENS
   ---------------------------------------------------------------- */
:root {
  --ease-steel:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:    cubic-bezier(0.40, 0, 0, 1);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  --dur-instant:  100ms;
  --dur-fast:     160ms;
  --dur-base:     260ms;
  --dur-slow:     420ms;
  --dur-slower:   640ms;
}