/* ==== Design tokens — Midnight Pro (AdVault) ====
   Single source of truth. Components must not hardcode hex/px values.
   Dark-first theme: --ink family is TEXT on dark, --surface family is the dark
   ground. Anything that used --ink as a background has been repointed. */

:root {
  /* Brand */
  --brand: #F5C518;
  --brand-strong: #FFD84D;
  /* translucent gold surfaces replace the old cream tints */
  --brand-soft: rgba(245, 197, 24, 0.10);
  --brand-soft-border: rgba(245, 197, 24, 0.32);
  /* Gold reads 10.9:1 on #0B0B10 — usable directly as text/ink accent */
  --brand-ink: #F5C518;
  /* Dark text used ON gold surfaces (buttons, topbar) */
  --on-brand: #0B0B10;

  /* Ink = text on the dark ground */
  --ink: #EDEDF0;
  --ink-2: #C9C9D3;
  --ink-3: #A9A9B6;
  --ink-muted: #83838F;

  /* Surfaces (near-black, slightly blue-tinted) */
  --surface: #0B0B10;
  --surface-2: #101017;
  --surface-3: #191922;
  --border: #23232E;
  --border-strong: #33333F;

  /* Deep panels (footer, pro card, flash header) — one step darker */
  --dark-bg: #060609;
  --dark-surface: #14141C;
  --dark-border: #272732;
  --dark-text: #E7E7EA;
  --dark-muted: #9C9CA8;

  /* Glass */
  --glass: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.12);

  /* Ambient glows (background art only — never text) */
  --glow-violet: rgba(124, 58, 237, 0.16);
  --glow-cyan: rgba(34, 211, 238, 0.10);
  --glow-gold: rgba(245, 197, 24, 0.12);

  /* Semantic */
  --danger: #FF5A4D;
  --danger-strong: #FF7A6E;

  /* Spacing (4/8 rhythm) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Type scale */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-4xl: 34px;
  --fs-5xl: 56px;

  --lh-tight: 1.25;
  --lh-heading: 1.35;
  --lh-body: 1.7;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Elevation — on a dark ground shadows need more alpha to register */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
  --sh-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 18px 48px rgba(0, 0, 0, 0.55);
  --sh-brand: 0 6px 24px rgba(245, 197, 24, 0.28);

  /* Motion */
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layers */
  --z-header: 100;
  --z-nav: 110;
  --z-sticky-cta: 120;
  --z-lightbox: 200;

  /* Layout */
  --container: 1140px;
  --container-narrow: 980px;
  --gutter: 20px;
  --header-h: 92px;
}