/* ============================================================
   Mzansi Automations — Design Tokens
   "Living Machine" — dark premium / luxury tech
   ============================================================ */

:root {
  /* ── Canvas: layered charcoals (dark, cinematic) ── */
  --bg-0: #07080A;          /* deepest — page base */
  --bg-1: #0C0E12;          /* primary surface */
  --bg-2: #121419;          /* raised surface */
  --bg-3: #181B22;          /* card / glass base */
  --bg-4: #20242D;          /* hover surface */
  --vignette: rgba(0,0,0,0.55);

  /* ── Gold accent (the glow) ── */
  --gold: #FFB81C;          /* SA flag gold — primary accent */
  --gold-soft: #F0A93B;
  --gold-deep: #C8702A;     /* ochre — secondary warmth */
  --gold-ink: #2A1D08;      /* gold text-on-light contexts */
  --glow-gold: rgba(255,184,28,0.55);
  --glow-ochre: rgba(200,112,42,0.40);

  /* ── Semantic SA accents (sparing) ── */
  --green: #1FA463;         /* success / active */
  --green-soft: #2BD17E;
  --red: #DE3831;           /* emphasis / urgent */
  --blue: #2C6BE0;          /* rare cool accent */

  /* ── Text ── */
  --ink: #F4F1EA;           /* near-white warm */
  --ink-soft: #C7C3BA;
  --ink-mute: #8B8780;
  --ink-faint: #5E5B55;
  --ink-on-gold: #15100A;

  /* ── Lines & glass ── */
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.13);
  --line-gold: rgba(255,184,28,0.28);
  --glass: rgba(22,25,31,0.55);
  --glass-strong: rgba(28,32,40,0.72);

  /* ── Back-compat aliases (old class system still references these) ── */
  --ochre: var(--gold-deep);
  --ochre-light: var(--gold-soft);
  --sa-green: var(--green);
  --sa-gold: var(--gold);
  --sa-red: var(--red);
  --sa-blue: var(--blue);
  --sand: var(--ink);
  --sand-light: var(--ink-soft);
  --off-white: var(--bg-0);
  --deep: var(--bg-1);
  --warm-black: var(--bg-0);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--ink-mute);

  /* ── Typography ── */
  --font-display: 'Outfit', 'Helvetica Neue', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* Fluid type scale */
  --text-xs: 0.72rem;
  --text-sm: 0.84rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  --text-hero: clamp(2.6rem, 1.2rem + 6.2vw, 6.4rem);

  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-wide: 0.04em;
  --tracking-label: 0.16em;

  /* ── Spacing & rhythm ── */
  --space-section: clamp(5rem, 3.5rem + 6vw, 11rem);
  --gutter: clamp(1.25rem, 0.8rem + 3vw, 3.5rem);
  --maxw: 1320px;
  --maxw-narrow: 880px;

  /* ── Radii ── */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
  --radius: var(--r);
  --radius-sm: var(--r-sm);
  --radius-lg: var(--r-lg);

  /* ── Shadows / depth ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow: 0 18px 40px -18px rgba(0,0,0,0.65);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,0.75);
  --shadow-gold: 0 18px 50px -16px rgba(255,184,28,0.35);
  --inner-line: inset 0 1px 0 rgba(255,255,255,0.05);

  /* ── Motion ── */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale ── */
  --z-bg: 0;
  --z-content: 10;
  --z-nav: 900;
  --z-cursor: 9000;
  --z-modal: 9500;
  --z-grain: 9800;
}