/* ==========================================================================
   NEXISTEK — Design Tokens
   Single source of truth. No raw colour literals anywhere else in the codebase.
   ========================================================================== */

:root {
  /* --- Brand core ------------------------------------------------------- */
  --c-primary: #ff7a00;
  --c-accent: #ffb347;
  --c-void: #05070d;
  --c-deep: #111827;
  --c-text: #ffffff;
  --c-muted: #a0aec0;

  /* Channel values let us composite alpha without new colour literals */
  --rgb-primary: 255 122 0;
  --rgb-accent: 255 179 71;
  --rgb-void: 5 7 13;
  --rgb-deep: 17 24 39;
  --rgb-text: 255 255 255;
  --rgb-muted: 160 174 192;

  /* Circuit accent — the one deliberate departure from the orange system,
     reserved for the About page's PCB diagram so it reads as its own object
     rather than another orange tech-object. */
  --c-circuit: #22e88f;
  --rgb-circuit: 34 232 143;

  /* Hologram blue — the reference hero's floating schematic panels (cyan
     wireframe on dark glass, against the industrial orange of the rest of
     the scene). Scoped to the hero's own panels and WebGL scene only. */
  --c-hologram: #38bdf8;
  --rgb-hologram: 56 189 248;

  /* --- Ember ramp -------------------------------------------------------- *
   * Sampled directly from the NEXISTEK monogram. The mark is a bevelled
   * metal form, so its orange runs a full shadow-to-highlight ramp rather
   * than a single flat hue. Reusing that ramp is what makes rendered
   * surfaces read as the same material as the logo.                        */
  --c-ember-900: #530e02;
  --c-ember-800: #842205;
  --c-ember-700: #b43a03;
  --c-ember-600: #cf4f04;
  --c-ember-500: #e15703;
  --c-ember-400: #f66d03;
  --c-ember-300: #fa7f04;

  /* --- Graphite ramp ----------------------------------------------------- *
   * The "NEXIS" half of the wordmark. Gives us a cool, machined counterpart
   * to the ember so the palette isn't orange-on-black alone.               */
  --c-steel-900: #0e0e0d;
  --c-steel-800: #232323;
  --c-steel-700: #3c3c3c;
  --c-steel-600: #535352;
  --c-steel-500: #696969;

  /* Print is the one surface that is not dark — it needs its own ink. */
  --c-print-ink: #000000;
  --c-print-paper: #ffffff;

  /* --- Material gradients ------------------------------------------------ */
  --gradient-forge: linear-gradient(
    145deg,
    var(--c-ember-800) 0%,
    var(--c-ember-300) 34%,
    var(--c-accent) 48%,
    var(--c-ember-600) 68%,
    var(--c-ember-900) 100%
  );
  --gradient-steel: linear-gradient(
    145deg,
    var(--c-steel-900) 0%,
    var(--c-steel-500) 42%,
    var(--c-steel-700) 58%,
    var(--c-steel-800) 100%
  );

  /* --- Semantic surfaces ------------------------------------------------ */
  --surface-base: var(--c-void);
  --surface-raised: rgb(var(--rgb-deep) / 0.55);
  --surface-glass: rgb(var(--rgb-text) / 0.035);
  --surface-glass-strong: rgb(var(--rgb-text) / 0.07);
  --surface-scrim: rgb(var(--rgb-void) / 0.86);

  --border-hairline: rgb(var(--rgb-text) / 0.08);
  --border-soft: rgb(var(--rgb-text) / 0.16);
  --border-energised: rgb(var(--rgb-primary) / 0.45);

  /* --- Semantic text ----------------------------------------------------- */
  --text-primary: var(--c-text);
  --text-secondary: var(--c-muted);
  --text-tertiary: rgb(var(--rgb-muted) / 0.7);
  --text-energised: var(--c-accent);
  --text-on-primary: var(--c-void);

  /* --- Energy / glow ----------------------------------------------------- */
  --glow-sm: 0 0 12px rgb(var(--rgb-primary) / 0.35);
  --glow-md: 0 0 32px rgb(var(--rgb-primary) / 0.28);
  --glow-lg: 0 0 90px rgb(var(--rgb-primary) / 0.2);
  --gradient-energy: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  --gradient-panel: linear-gradient(
    155deg,
    rgb(var(--rgb-text) / 0.07) 0%,
    rgb(var(--rgb-text) / 0.015) 48%,
    rgb(var(--rgb-primary) / 0.05) 100%
  );

  /* --- Elevation (fixed scale, never ad-hoc) ----------------------------- */
  --elev-1: 0 1px 2px rgb(var(--rgb-void) / 0.6);
  --elev-2: 0 8px 24px -8px rgb(var(--rgb-void) / 0.8);
  --elev-3: 0 24px 60px -20px rgb(var(--rgb-void) / 0.9);
  --elev-4: 0 40px 120px -32px rgb(var(--rgb-void) / 0.95);

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;

  /* Fluid scale — 375px floor, 1440px ceiling */
  --fs-mega: clamp(3rem, 11vw, 10rem);
  --fs-display: clamp(2.5rem, 7.2vw, 6rem);
  --fs-h1: clamp(2.125rem, 5vw, 4rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.1875rem, 1.9vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  /* Floor for labels and eyebrows. Wide tracking makes 12px read as smaller
     than it is, so this must not go below it. */
  --fs-micro: 0.75rem;

  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-heading: 1.22;
  --lh-body: 1.65;

  --tracking-mega: -0.045em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-widest: 0.22em;

  /* --- Spacing (4pt rhythm) ---------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;
  --sp-12: 8rem;

  --section-y: clamp(6rem, 12vw, 11rem);
  --section-y-tight: clamp(4rem, 7vw, 7rem);

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 84rem;
  --container-narrow: 52rem;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --nav-h: 4.5rem;

  /* --- Shape -------------------------------------------------------------- */
  --r-xs: 0.375rem;
  --r-sm: 0.625rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-full: 62.5rem;

  --blur-glass: 18px;
  --blur-heavy: 40px;

  /* --- Motion -------------------------------------------------------------- */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --dur-cinematic: 900ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* --- Layering (never invent a z-index outside this scale) --------------- */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-nav: 100;
  --z-overlay: 200;
  --z-preloader: 900;
  --z-cursor: 1000;
}

/* Low-motion: OS-level request or the in-page toggle.
   Durations collapse so transitions still land on their end state instantly. */
:root.is-low-motion {
  --dur-instant: 1ms;
  --dur-fast: 1ms;
  --dur-base: 1ms;
  --dur-slow: 1ms;
  --dur-cinematic: 1ms;
}