/* ==========================================================================
   DESIGN TOKENS: ARCHETYPE 0 - DEEP OBSIDIAN & GOLD PRIMARY
   Domain: 999jilli.com | Brand: 999jili
   27 Architectural CSS Custom Variables
   ========================================================================== */

:root {
  /* Surface & Base Colors (OKLCH) */
  --bg-base: oklch(10% 0.008 240);
  --bg-surface: oklch(14% 0.012 240);
  --bg-surface-elevated: oklch(18% 0.016 240);
  --bg-surface-hover: oklch(22% 0.020 240);

  /* Primary Brand Accents (Gold Spectrum) */
  --primary: oklch(72% 0.18 68);
  --primary-hover: oklch(78% 0.20 68);
  --primary-active: oklch(65% 0.16 68);
  --primary-light: oklch(85% 0.10 70);
  --primary-alpha: oklch(72% 0.18 68 / 0.15);

  /* Secondary & Highlight Tokens */
  --accent: oklch(68% 0.16 45);
  --accent-hover: oklch(74% 0.18 45);

  /* Typography Colors */
  --text-main: oklch(96% 0.005 240);
  --text-muted: oklch(75% 0.010 240);
  --text-dim: oklch(58% 0.010 240);

  /* Borders & Geometry (Archetype 0: 4px base geometry) */
  --border-subtle: oklch(25% 0.012 240);
  --border-strong: oklch(40% 0.020 240);
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-radius-full: 9999px;

  /* Typography Font Stacks */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65);
  --glow-primary: 0 0 20px oklch(72% 0.18 68 / 0.35);

  /* Motion & Dynamics */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}