/* ═══════════════════════════════════════════
   DESIGN TOKENS (CSS Custom Properties)
   Single Source of Truth for Dictuzz Brand
   ═══════════════════════════════════════════ */

:root {
  /* Vanilla Site Tokens (Light) */
  --site-bg: #f5efe4;
  --site-bg-alt: #efe4d4;
  --site-bg-elevated: rgba(255, 250, 242, 0.84);
  --site-surface: #fffaf2;
  --site-surface-strong: #ede2d3;
  --site-surface-soft: rgba(255, 255, 255, 0.55);
  --site-text: #1d2430;
  --site-text-muted: #5a6778;
  --site-text-subtle: #7b8798;
  --site-border: rgba(29, 36, 48, 0.1);
  --site-border-strong: rgba(29, 36, 48, 0.16);
  --site-accent: #335c87;
  --site-accent-soft: rgba(51, 92, 135, 0.11);
  --site-accent-gold: #c4974f;
  --site-accent-gold-soft: rgba(196, 151, 79, 0.12);
  --site-shadow: 0 20px 52px rgba(52, 57, 68, 0.08);
  --site-shadow-hover: 0 26px 60px rgba(52, 57, 68, 0.12);
  --site-shadow-strong: 0 34px 80px rgba(52, 57, 68, 0.14);
  --site-radius: 30px;
  --site-radius-md: 22px;
  --site-radius-sm: 16px;
  --site-container: 1200px;
  
  /* Shared Base/Next.js Tokens */
  --color-bg: var(--site-bg);
  --color-bg-elevated: var(--site-bg-elevated);
  --color-surface: var(--site-surface);
  --color-surface-strong: var(--site-surface-strong);
  --color-panel: #ebe5dc;
  --color-text: var(--site-text);
  --color-text-muted: var(--site-text-muted);
  --color-text-soft: var(--site-text-subtle);
  --color-border: var(--site-border);
  --color-border-strong: var(--site-border-strong);
  --color-accent: var(--site-accent);
  --color-accent-soft: var(--site-accent-soft);
  --color-accent-strong: #16395f;
  --color-focus: #285992;
  
  /* Next.js Specific Component Tokens */
  --shadow-lg: 0 26px 60px rgba(27, 36, 48, 0.08);
  --shadow-md: 0 18px 40px rgba(27, 36, 48, 0.06);
  --shadow-sm: 0 10px 24px rgba(27, 36, 48, 0.04);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --container: 1200px;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  /* Spacing */
  --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;
  
  /* Animation */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-normal: 260ms;
  --duration-slow: 340ms;
}

[data-theme="dark"] {
  /* Vanilla Site Tokens (Dark) */
  --site-bg: #121820;
  --site-bg-alt: #171f29;
  --site-bg-elevated: rgba(24, 31, 40, 0.82);
  --site-surface: #171d25;
  --site-surface-strong: #222c38;
  --site-surface-soft: rgba(255, 255, 255, 0.04);
  --site-text: #f4efe7;
  --site-text-muted: #bec7d3;
  --site-text-subtle: #93a0b0;
  --site-border: rgba(255, 255, 255, 0.08);
  --site-border-strong: rgba(255, 255, 255, 0.14);
  --site-accent: #8da8c6;
  --site-accent-soft: rgba(141, 168, 198, 0.1);
  --site-accent-gold: #d1ab69;
  --site-accent-gold-soft: rgba(209, 171, 105, 0.12);
  --site-shadow: 0 24px 62px rgba(0, 0, 0, 0.28);
  --site-shadow-hover: 0 30px 72px rgba(0, 0, 0, 0.34);
  --site-shadow-strong: 0 40px 90px rgba(0, 0, 0, 0.4);

  /* Shared Base/Next.js Tokens mapped for Dark mode */
  --color-panel: #202b38;
  --color-accent-strong: #a4bfda;
  --color-focus: #7393b3;

  --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.24);
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.20);
}