/* ==========================================================================
   NOTARÍA BOHÓRQUEZ VEGA - DESIGN SYSTEM TOKENS (PRO MAX EDITION)
   Paleta: Deep Emerald, Warm Gold Champagne, Slate & Crisp Ivory
   ========================================================================== */

:root {
  /* Brand Primary: Deep Emerald */
  --color-primary-950: #031711;
  --color-primary-900: #06241b;
  --color-primary-850: #0a3326;
  --color-primary-800: #0e4333;
  --color-primary-700: #145944;
  --color-primary-600: #1c7258;
  --color-primary-500: #268f70;
  --color-primary-400: #3ab28e;
  --color-primary-300: #62cbb0;
  --color-primary-200: #9de3cf;
  --color-primary-100: #d6f4ec;
  --color-primary-50:  #f0faf6;

  /* Accent Gold / Champagne */
  --color-gold-800: #684c0c;
  --color-gold-700: #8c6818;
  --color-gold-600: #ab8124;
  --color-gold-500: #c89b3c;
  --color-gold-400: #dfb559;
  --color-gold-300: #ecd08c;
  --color-gold-200: #f5e4bd;
  --color-gold-100: #fbf5e7;
  --color-gold-50:  #fdfbf5;

  /* Neutrals */
  --color-slate-950: #090d16;
  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-400: #94a3b8;
  --color-slate-300: #cbd5e1;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f1f5f9;
  --color-slate-50:  #f8fafc;

  /* Surfaces & Backgrounds */
  --bg-body: #f8faf9;
  --bg-card: #ffffff;
  --bg-card-alt: #f1f6f4;
  --bg-card-hover: #ffffff;
  --bg-dark: #051e16;
  --bg-dark-surface: #0a2f24;

  /* Text Colors */
  --text-main: #1e293b;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --text-inverse: #ffffff;
  --text-gold: #c89b3c;

  /* Status Colors */
  --color-success: #10b981;
  --color-success-bg: #ecfdf5;
  --color-warning: #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-info: #0284c7;
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #128c7e;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Cinzel', Georgia, serif;

  /* Spacing Scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  /* Shadows & Elevation */
  --shadow-xs: 0 1px 2px rgba(6, 36, 27, 0.04);
  --shadow-sm: 0 3px 10px rgba(6, 36, 27, 0.06);
  --shadow-md: 0 8px 24px rgba(6, 36, 27, 0.08);
  --shadow-lg: 0 16px 36px rgba(6, 36, 27, 0.12);
  --shadow-xl: 0 24px 54px rgba(6, 36, 27, 0.15);
  --shadow-gold: 0 10px 28px rgba(200, 155, 60, 0.28);
  --shadow-wa: 0 10px 28px rgba(37, 211, 102, 0.35);

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-max: 1240px;
}

/* ==========================================================================
   DARK MODE TOKENS (Obsidian Emerald & Champagne Gold)
   ========================================================================== */
[data-theme="dark"] {
  --bg-body: #03140e;
  --bg-card: #082118;
  --bg-card-alt: #0c2b20;
  --bg-card-hover: #10382b;
  --bg-dark: #020d09;
  --bg-dark-surface: #061c14;

  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-light: #64748b;

  --color-slate-950: #f8fafc;
  --color-slate-900: #f1f5f9;
  --color-slate-800: #e2e8f0;
  --color-slate-700: #cbd5e1;
  --color-slate-600: #94a3b8;
  --color-slate-300: #cbd5e1;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f1f5f9;
  --color-slate-50:  #f8fafc;

  --color-primary-950: #f0faf6;
  --color-primary-900: #d6f4ec;
  --color-primary-850: #b5ebd9;
  --color-primary-800: #9de3cf;
  --color-primary-700: #62cbb0;
  --color-primary-50:  #0a271e;
  --color-primary-100: #10362a;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 26px 60px rgba(0, 0, 0, 0.8);
}