/* ============================================================================
   UNIKABIZ — style.css
   Design Tokens — CSS Custom Properties (dark default, light override)
   ----------------------------------------------------------------------------
   Load order on every page: style.css -> base.css -> components.css
   ============================================================================ */

/* ---------------------------------------------------------------------------
   FONT IMPORT — Fontshare (Cabinet Grotesk + Satoshi)
--------------------------------------------------------------------------- */
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@700,800,900&f[]=satoshi@300,400,500,700&display=swap');

/* ---------------------------------------------------------------------------
   DARK THEME (DEFAULT)
--------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  /* --- Surfaces --- */
  --color-bg: #0d0d0f;
  --color-surface: #131316;
  --color-surface-2: #1a1a1e;
  --color-surface-offset: #1e1e23;
  --color-surface-dynamic: #252529;
  --color-divider: #252528;
  --color-border: oklch(from #e8e6e1 l c h / 0.10);

  /* --- Text --- */
  --color-text: #e8e6e1;
  --color-text-muted: #9a9895;
  --color-text-faint: #5a5856;
  --color-text-inverse: #0d0d0f;

  /* --- Brand / Accent --- */
  --color-primary: #c9a84c;
  --color-primary-hover: #e0be6e;
  --color-primary-active: #f0d28a;
  --color-primary-highlight: oklch(from #c9a84c l c h / 0.15);
  --color-secondary: #2a6b8a;
  --color-secondary-hover: #3584a8;

  /* --- Fixed brand pair (gold/navy) — Stripe checkout CTA + thank-you pages.
     Intentionally NOT theme-reactive: unlike --color-primary (which shifts
     between dark/light), this exact pairing must render identically in both
     themes, since it mirrors the fixed brand kit used on /thank-you/* pages.
     Set once on :root (not re-declared in the light override block below),
     so the same values persist regardless of [data-theme]. */
  --color-brand-gold: #C9A84C;
  --color-brand-navy: #0D2137;

  /* --- Semantic --- */
  --color-success: #5a9e42;
  --color-error: #c94c4c;
  --color-warning: #c9884c;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 4px 16px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.5);
  --shadow-glow: 0 0 32px oklch(from #c9a84c l c h / 0.18);

  /* --- Fluid Type Scale --- */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 7.5rem);

  /* --- Fonts ---
     NOTE: Cabinet Grotesk (--font-display) is reserved for headings/text at
     --text-xl (24px+) and above. Below that threshold, always use
     --font-body (Satoshi Bold) — see components.css typography classes and
     base.css heading rules. Confirmed rule, validated in Prompt 01 QA. */
  --font-display: 'Cabinet Grotesk', Georgia, serif;
  --font-body: 'Satoshi', 'Inter', sans-serif;

  /* --- Spacing Scale (4px base unit) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 1.75rem;   /* 28px */
  --space-8: 2rem;      /* 32px */
  --space-9: 2.25rem;   /* 36px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-28: 7rem;     /* 112px */
  --space-32: 8rem;     /* 128px */

  /* --- Border Radius --- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* --- Content Widths --- */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;

  /* --- Transitions --- */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Hero / Page Gradient Backgrounds ---
     Centralized so the theme toggle can actually change them (previously
     these were hardcoded inline styles / hardcoded values in components.css
     that never responded to [data-theme="light"]). Dark values below are
     byte-identical to the original hardcoded colors — dark mode must render
     unchanged. See light override block for the light-mode fix. */
  --gradient-hero-inner: oklch(0.25 0.06 220);
  --gradient-hero-outer: #0d0d0f;
  --gradient-page-hero-inner: oklch(0.20 0.04 220);
  --gradient-page-hero-outer: #0d0d0f;
}

/* ---------------------------------------------------------------------------
   LIGHT THEME — applied via [data-theme="light"] on <html>
   (set in-memory only by theme.js — no localStorage/sessionStorage)
--------------------------------------------------------------------------- */
[data-theme="light"] {
  --color-bg: #f5f4f0;
  --color-surface: #faf9f6;
  --color-surface-2: #ffffff;
  --color-surface-offset: #eeede9;
  --color-surface-dynamic: #e5e3de;
  --color-divider: #dcdad5;
  --color-border: oklch(from #28251d l c h / 0.12);

  --color-text: #1a1812;
  --color-text-muted: #6b6a65;
  --color-text-faint: #a8a7a2;
  --color-text-inverse: #f5f4f0;

  --color-primary: #9a7c2e;
  --color-primary-hover: #7a6020;
  --color-primary-highlight: oklch(from #9a7c2e l c h / 0.12);

  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.10);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.14);

  /* --- Hero / Page Gradient Backgrounds (light override) ---
     Dark mode used a dark navy glow fading to near-black (#0d0d0f), which is
     illegible with light theme's dark text. Light mode instead uses a soft
     warm-neutral glow fading to the light surface color, keeping the same
     visual "glow" effect without breaking contrast for --color-text. */
  --gradient-hero-inner: oklch(0.90 0.02 80);
  --gradient-hero-outer: #faf9f6;
  --gradient-page-hero-inner: oklch(0.93 0.015 80);
  --gradient-page-hero-outer: #faf9f6;
}