/* Milzune — tokens.css
   Single source of truth for the "Elegant Light" design system.
   Every page and component references these custom properties. */

:root {
  /* Colors */
  --color-bg: #FAF8F5;              /* warm off-white */
  --color-surface: #FFFFFF;
  --color-surface-alt: #F0ECE5;     /* warm light grey for section bands */
  --color-text-primary: #2B2723;    /* rich near-black grey, not pure black */
  --color-text-secondary: #6B645C;
  --color-border: #E2DDD4;

  --color-accent-gold: #C9A227;     /* primary accent — buttons, links, highlights */
  --color-accent-gold-hover: #B08D1F;
  --color-accent-red: #B4432E;      /* secondary accent — warnings, Pro badge, CTA emphasis */
  --color-accent-red-hover: #9A3925;

  --color-success: #4A7C59;
  --color-error: #B4432E;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;       /* elegant serif for headings */
  --font-body: 'Inter', -apple-system, sans-serif;  /* clean sans for body/UI */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;
  --line-height-tight: 1.2;
  --line-height-base: 1.6;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(43, 39, 35, 0.08);
  --shadow-glow: 0 0 0 3px rgba(201, 162, 39, 0.25);  /* gold focus ring */

  /* Z-index */
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}