/* ==========================================================================
   AND Elektrik — Design tokens
   Single source of truth for colour, type, spacing, motion and elevation.
   ========================================================================== */

:root {
  /* --- Brand: petrol/teal (from the AND Elektrik mark) ------------------- */
  --brand-50: #e8f4f7;
  --brand-100: #c6e3ea;
  --brand-300: #58a6b8;
  --brand-400: #2d8699;
  --brand-500: #1b7183;
  --brand-600: #115665; /* brand base */
  --brand-700: #0d4250;
  --brand-800: #092e38;
  --brand-900: #061e25;

  /* --- Accent: industrial orange ---------------------------------------- */
  --accent-300: #ffb27a;
  --accent-400: #ff8c42;
  --accent-500: #f26b21; /* brand accent */
  --accent-600: #d6521a;
  --accent-700: #a93d13;

  /* --- Neutrals: graphite ----------------------------------------------- */
  --ink-950: #04070a;
  --ink-900: #070c10;
  --ink-850: #0a1116;
  --ink-800: #0d161c;
  --ink-700: #121e26;
  --ink-600: #18272f;
  --ink-500: #21323c;
  --ink-400: #334853;

  --steel-100: #eef3f5;
  --steel-200: #d6e0e4;
  --steel-400: #9aadb5;

  /* --- Semantic surfaces ------------------------------------------------ */
  --surface-base: var(--ink-900);
  --surface-raised: rgba(18, 30, 38, 0.72);
  --surface-glass: rgba(15, 26, 33, 0.55);
  --surface-inset: rgba(4, 7, 10, 0.55);

  --line-soft: rgba(230, 244, 247, 0.08);
  --line: rgba(230, 244, 247, 0.14);
  --line-strong: rgba(230, 244, 247, 0.24);

  /* --- Text ------------------------------------------------------------- */
  --text: #e9f1f3;
  --text-muted: #9db1b9;
  --text-dim: #6d848d;
  --text-on-accent: #1a0d05;

  /* --- Heat ramp (used by the 3D scene + thermal UI) -------------------- */
  --heat-0: #ffe08a;
  --heat-1: #ff9f2e;
  --heat-2: #f2521a;
  --heat-3: #b41f12;

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display scales off the hero column width, not the full viewport, so the
     headline keeps its three-line composition next to the 3D stage. */
  --fs-display: clamp(2.4rem, 1.5rem + 2.3vw, 3.9rem);
  --fs-h1: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);
  --fs-h2: clamp(1.85rem, 1.25rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-h4: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-lead: clamp(1.05rem, 0.99rem + 0.42vw, 1.3rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-normal: 1.6;
  --lh-relaxed: 1.72;

  --tracking-display: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.22em;

  /* --- Spacing (4px base) ----------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --shell-max: 1280px;
  --shell-pad: clamp(1.25rem, 0.6rem + 2.4vw, 3rem);

  /* --- Radii ------------------------------------------------------------ */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* --- Elevation & glow ------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 40px 80px -32px rgba(0, 0, 0, 0.85);
  --glow-accent: 0 0 0 1px rgba(242, 107, 33, 0.35), 0 18px 45px -18px rgba(242, 107, 33, 0.55);
  --glow-brand: 0 0 0 1px rgba(45, 134, 153, 0.3), 0 18px 45px -20px rgba(27, 113, 131, 0.5);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-reveal: 820ms;

  /* --- Layers ----------------------------------------------------------- */
  --z-canvas: 1;
  --z-content: 10;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-float: 400;
}