/* ============================================================
   OPTILUME — Core CSS Foundations
   Colors, typography, spacing, motion, elevation.
   Import this first in every Optilume surface.
   ============================================================ */

/* ---------- TYPOGRAPHY IMPORTS ------------------------------- */
/* All type is now loaded locally from brand-licensed variable/static TTFs.
   No CDN dependency.                                                   */

/* ---- Inter — body / UI (variable, subset woff2) ---- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.woff2') format('woff2-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Oswald — H1–H3 (variable, subset woff2) ---- */
@font-face {
  font-family: 'Oswald';
  src: url('fonts/Oswald-VariableFont_wght.woff2') format('woff2-variations'),
       url('fonts/Oswald-VariableFont_wght.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Saira Condensed — display / hero (static weights, subset woff2) ---- */
@font-face { font-family: 'Saira Condensed'; src: url('fonts/SairaCondensed-Thin.woff2')       format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/SairaCondensed-ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/SairaCondensed-Light.woff2')      format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/SairaCondensed-Regular.woff2')    format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/SairaCondensed-Medium.woff2')     format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/SairaCondensed-SemiBold.woff2')   format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/SairaCondensed-Bold.woff2')       format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/SairaCondensed-ExtraBold.woff2')  format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/SairaCondensed-Black.woff2')      format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

/* ---- JetBrains Mono — SKUs / specs (variable, subset woff2) ---- */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.woff2') format('woff2-variations'),
       url('fonts/JetBrainsMono-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============ BRAND CORE ============ */
  --brand-amber:        #E4A73A;   /* Logo ring — warm beam */
  --brand-amber-hi:     #F5C366;   /* Glow peak */
  --brand-amber-lo:     #B8832A;   /* Pressed / shadow */

  --brand-cyan:         #19A0C1;   /* Logo inner swoosh — LED chill */
  --brand-cyan-hi:      #4BC4DE;
  --brand-cyan-lo:      #0F7A95;

  --signal-orange:      #EB7F29;   /* High-emphasis CTA, pulled from packaging */
  --signal-orange-hi:   #FF9747;
  --signal-orange-lo:   #C45F15;

  /* ============ NEUTRAL / SURFACE (dark-first) ============ */
  --obsidian:           #0F1214;   /* App background */
  --graphite-900:       #1A1D20;   /* Deep plate */
  --graphite-800:       #25292C;   /* Primary card */
  --graphite-700:       #2B3033;   /* Raised card / panel */
  --graphite-600:       #373C40;   /* Hover fill */
  --graphite-500:       #4A5056;   /* Divider / stroke */
  --graphite-400:       #6B7278;   /* Disabled text */
  --graphite-300:       #9AA1A7;   /* Secondary text */
  --graphite-200:       #C2C7CB;   /* Tertiary silver */
  --graphite-100:       #E2E2E1;   /* Chrome / primary text */
  --white-pure:         #FFFFFF;

  /* ============ SEMANTIC ============ */
  --fg-1:               var(--graphite-100);   /* Primary text */
  --fg-2:               var(--graphite-300);   /* Secondary text */
  --fg-3:               var(--graphite-400);   /* Tertiary / hint */
  --fg-inverse:         var(--obsidian);       /* on light */
  --fg-accent:          var(--signal-orange);
  --fg-beam:            var(--brand-amber);

  --bg-0:               var(--obsidian);
  --bg-1:               var(--graphite-900);
  --bg-2:               var(--graphite-800);
  --bg-3:               var(--graphite-700);
  --bg-hover:           var(--graphite-600);

  --border-1:           #33383C;                /* Default card edge */
  --border-2:           #484E53;                /* Raised / focus-adjacent */
  --border-accent:      var(--signal-orange);

  /* Status */
  --success:            #2BB673;
  --warning:            #F5C366;
  --danger:             #E54C3C;
  --info:               var(--brand-cyan);

  /* ============ GRADIENTS / SIGNATURE ============ */
  /* The beam: amber → orange → cyan, Optilume's signature stripe */
  --beam-gradient:      linear-gradient(90deg, #E4A73A 0%, #EB7F29 48%, #19A0C1 100%);
  --beam-gradient-soft: linear-gradient(90deg, rgba(228,167,58,.22) 0%, rgba(235,127,41,.22) 48%, rgba(25,160,193,.22) 100%);
  /* Chrome — used on silver type and metal surfaces */
  --chrome-gradient:    linear-gradient(180deg, #F6F6F5 0%, #C2C7CB 45%, #8F969B 55%, #E2E2E1 100%);
  /* Radial glow for hero / light-source moments */
  --glow-amber:         radial-gradient(ellipse at center, rgba(245,195,102,.55) 0%, rgba(228,167,58,.12) 40%, transparent 70%);
  --glow-cyan:          radial-gradient(ellipse at center, rgba(75,196,222,.45) 0%, rgba(25,160,193,.10) 40%, transparent 70%);

  /* ============ TYPOGRAPHY — FAMILIES ============ */
  --font-display:       'Saira Condensed', 'Oswald', 'Arial Narrow', sans-serif;  /* Headline / hero / logo-adjacent */
  --font-heading:       'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;   /* H1–H3 */
  --font-body:          'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:          'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ============ TYPOGRAPHY — SCALE ============ */
  /* Automotive-display feel: big, tight, UPPERCASE headings; humanist body */
  --fs-hero:            clamp(56px, 7vw, 96px);
  --fs-h1:              48px;
  --fs-h2:              32px;
  --fs-h3:              24px;
  --fs-h4:              18px;
  --fs-body:            16px;
  --fs-body-sm:         14px;
  --fs-caption:         12px;
  --fs-micro:           10.5px;        /* Eyebrow / spec tag */

  --lh-tight:           1.02;
  --lh-snug:            1.18;
  --lh-normal:          1.5;
  --lh-loose:           1.7;

  --ls-hero:            -0.02em;
  --ls-wide:            0.08em;        /* UPPERCASE labels, eyebrows */
  --ls-wider:           0.14em;        /* Spec / caption */

  /* ============ SPACING ============ */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;

  /* ============ RADIUS ============ */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-pill: 9999px;

  /* ============ ELEVATION / SHADOW ============ */
  /* Deep, crisp shadows (premium auto feel — not soft/diffuse) */
  --shadow-1:      0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  --shadow-2:      0 1px 0 rgba(255,255,255,.05) inset, 0 6px 14px rgba(0,0,0,.45);
  --shadow-3:      0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px rgba(0,0,0,.55);
  --shadow-beam:   0 0 0 1px rgba(228,167,58,.35), 0 10px 30px rgba(228,167,58,.22);
  --shadow-cyan:   0 0 0 1px rgba(25,160,193,.35), 0 10px 30px rgba(25,160,193,.22);
  --shadow-orange: 0 0 0 1px rgba(235,127,41,.40), 0 10px 30px rgba(235,127,41,.28);
  /* Inner engraved */
  --shadow-inset:  inset 0 2px 4px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.04);

  /* ============ MOTION ============ */
  --ease-out:       cubic-bezier(.16,.84,.32,1);     /* Default — swift arrival */
  --ease-in-out:    cubic-bezier(.7,0,.3,1);          /* Reveals, swaps */
  --ease-spring:    cubic-bezier(.32,1.6,.5,.98);     /* Gentle overshoot */
  --dur-fast:       120ms;
  --dur-base:       220ms;
  --dur-slow:       420ms;
  --dur-reveal:     700ms;

  /* ============ LAYOUT ============ */
  --container-max:  1440px;
  --gutter:         var(--sp-6);
}

/* ============================================================
   BASE ELEMENT STYLES (semantic)
   ============================================================ */
html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headings — automotive display, UPPERCASE, tight ------- */
.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  text-transform: uppercase;
  color: var(--fg-1);
  font-weight: 800;
}

h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--fg-1);
  margin: 0;
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}

h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
}

/* Eyebrow: small UPPERCASE accent above a title — very on-brand */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--signal-orange);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

small, .caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0.02em;
}

/* Spec tag — used for SKU, "DOT/SAE COMPLIANT", measurements */
.spec-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--fg-2);
}

/* Silver/chrome text — hero treatment */
.text-chrome {
  background: var(--chrome-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Amber glow text — for signature moments */
.text-beam {
  color: var(--brand-amber);
  text-shadow: 0 0 24px rgba(245,195,102,.55);
}

/* Selection */
::selection {
  background: var(--signal-orange);
  color: var(--obsidian);
}