/* ============================================================================
   OWNERS FIRST — DESIGN TOKENS  (v2 · Web3 / dark-glass aesthetic)
   Single source of truth. Dark canvas, glassmorphism, gradient + glow accents.
   Token NAMES are preserved from v1 so existing markup keeps working — only the
   VALUES changed to the new visual language.
   ========================================================================== */

:root {
  /* --- Canvas (brand scheme: black / white / gold #D4AF37) --------------- */
  --bg-0: #0a0a0c;        /* near-black page background */
  --bg-1: #15151a;        /* elevated panel */
  --bg-2: #11142400;      /* (reserved) */

  /* --- Brand accent ramp (gold) ------------------------------------------ */
  --c-violet: #b8941f;    /* deep gold (gradient start / hovers) */
  --c-indigo: #c9a227;
  --c-blue:   #d4af37;    /* BRAND GOLD — primary action */
  --c-cyan:   #e7c86a;    /* light champagne gold — accent */
  --c-mint:   #489f48;    /* brand success green */

  /* Signature gradients (metallic gold sheen) */
  --grad-brand: linear-gradient(120deg, #b8941f 0%, #d4af37 48%, #f2d98a 100%);
  --grad-brand-2: linear-gradient(120deg, #c9a227 0%, #e7c86a 100%);
  --grad-cyan: linear-gradient(120deg, #d4af37 0%, #f0d486 100%);
  --grad-line: linear-gradient(90deg, transparent, rgba(212,175,55,.6), rgba(212,175,55,.3), transparent);

  /* --- Glass -------------------------------------------------------------- */
  --glass-bg:        rgba(255, 255, 255, 0.045);
  --glass-bg-strong: rgba(255, 255, 255, 0.075);
  --glass-border:    rgba(255, 255, 255, 0.10);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-blur: 16px;

  /* --- Legacy brand names remapped to dark ------------------------------- */
  --navy-900: #05060d;
  --navy-800: #0b0e1b;
  --navy-700: #11152a;
  --navy-600: #182040;
  --blue-700: #b8941f;
  --blue-600: #d4af37;     /* primary action color (solid fallback) */
  --blue-500: #dcbb4e;
  --blue-100: #f0e2b0;
  --blue-50:  rgba(212,175,55,0.10);   /* gold translucent tint */
  --teal-700: #b8941f;
  --teal-600: #d4af37;     /* accent (gold) */
  --teal-100: #f3e6b8;
  --teal-50:  rgba(212,175,55,0.10);
  --gold-600: #b8941f;
  --gold-500: #d4af37;
  --gold-50:  rgba(212,175,55,0.12);

  /* --- Text & neutrals (inverted for dark) ------------------------------- */
  --ink:       #f5f4ef;   /* warm white — primary text / headings */
  --slate-700: #c6c4ba;   /* secondary text (paragraphs) */
  --slate-500: #9a988d;   /* muted text */
  --slate-400: #7b796f;
  --slate-300: #565550;
  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --surface:   rgba(255,255,255,0.025);
  --surface-2: rgba(255,255,255,0.045);
  --white:     #ffffff;

  /* --- Semantic ----------------------------------------------------------- */
  --success: #4caf50;
  --success-bg: rgba(72,159,72,0.14);
  --info: var(--c-blue);
  --info-bg: rgba(212,175,55,0.12);
  --warning: #e98316;
  --warning-bg: rgba(233,131,22,0.12);
  --danger: #d82222;
  --danger-bg: rgba(216,34,34,0.12);

  /* --- Semantic aliases --------------------------------------------------- */
  --color-bg: var(--bg-0);
  --color-text: var(--ink);
  --color-text-muted: var(--slate-500);
  --color-primary: var(--c-blue);
  --color-primary-hover: var(--c-violet);
  --color-on-primary: #ffffff;
  --color-accent: var(--c-cyan);

  /* --- Typography --------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.4rem);
  --fs-xl:   clamp(1.5rem, 1.3rem + 0.9vw, 1.85rem);
  --fs-2xl:  clamp(1.9rem, 1.55rem + 1.5vw, 2.55rem);
  --fs-3xl:  clamp(2.35rem, 1.8rem + 2.4vw, 3.4rem);
  --fs-display: clamp(2.7rem, 1.9rem + 3.4vw, 4.4rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  --tracking-tight: -0.025em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.14em;

  /* --- Spacing (4px base) ------------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* --- Radii -------------------------------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* --- Elevation & glow --------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 14px 34px -12px rgba(0,0,0,0.7);
  --shadow-lg: 0 36px 80px -24px rgba(0,0,0,0.8);
  --glow-violet: 0 12px 40px -8px rgba(212,175,55,0.45);
  --glow-blue:   0 12px 40px -8px rgba(212,175,55,0.40);
  --glow-cyan:   0 12px 40px -8px rgba(212,175,55,0.33);
  --shadow-focus: 0 0 0 3px rgba(212,175,55,0.50);

  /* --- Layout ------------------------------------------------------------- */
  --container-max: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* --- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 380ms;

  /* --- Z-index ------------------------------------------------------------ */
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 300;

  color-scheme: dark;
}

/* ============================================================================
   LIGHT THEME  —  activated by <html data-theme="light">
   Only theme-dependent VALUES are overridden; type/space/radii/motion stay.
   The accent ramp + gradients are shared with dark (web3 hues work on light).
   ========================================================================== */
:root[data-theme="light"] {
  --bg-0: #f4f3ee;        /* warm off-white canvas (brand #F2F2F2) */
  --bg-1: #ffffff;        /* elevated panel */

  --glass-bg:        rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.80);
  --glass-border:    rgba(28, 26, 20, 0.10);
  --glass-border-strong: rgba(28, 26, 20, 0.16);

  --navy-900: #ffffff;
  --navy-800: #f6f5f1;
  --navy-700: #f0efe9;

  --blue-50:  rgba(212,175,55,0.12);
  --teal-50:  rgba(212,175,55,0.12);
  --gold-50:  rgba(212,175,55,0.16);

  --ink:       #14130e;   /* near-black (brand) — primary text / headings */
  --slate-700: #44423a;   /* secondary text */
  --slate-500: #6b6a60;   /* muted text */
  --slate-400: #8a887e;
  --slate-300: #c0bfb6;
  --border:        rgba(28,26,20,0.12);
  --border-strong: rgba(28,26,20,0.18);
  --surface:   rgba(28,26,20,0.03);
  --surface-2: rgba(28,26,20,0.055);

  --shadow-sm: 0 1px 2px rgba(28,26,20,0.08);
  --shadow-md: 0 14px 34px -14px rgba(28,26,20,0.16);
  --shadow-lg: 0 36px 80px -28px rgba(28,26,20,0.20);
  --glow-violet: 0 12px 40px -10px rgba(212,175,55,0.32);
  --glow-blue:   0 12px 40px -10px rgba(212,175,55,0.28);
  --glow-cyan:   0 12px 40px -10px rgba(212,175,55,0.24);
  --shadow-focus: 0 0 0 3px rgba(212,175,55,0.45);

  --success-bg: rgba(72,159,72,0.14);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}