/*************************************
 * Design Tokens — "The Digital Sommelier"
 *
 * Source of truth: DESIGN.md
 * All visual values as CSS custom properties.
 * Loaded BEFORE common.css so tokens are
 * available throughout the cascade.
 *************************************/

:root {
  /* ── Colour: Primary & Accent ── */
  --color-primary: #561371;
  --color-primary-container: #702f8a;
  --color-on-primary: #ffffff;

  /* ── Colour: Surfaces & Backgrounds ── */
  --color-background: #fcf9f4;
  --color-surface-container-low: #f6f3ee;
  --color-surface-container-lowest: #ffffff;
  --color-surface-tint: rgba(86, 19, 113, 0.05);
  --color-surface-variant: #ede8e3;

  /* ── Colour: On-Surface & Outlines ── */
  --color-on-surface: #1c1c19;
  --color-on-surface-variant: #49454f;
  --color-outline-variant: #d1c2d1;

  /* ── Colour: Tertiary (Tooltips & Overlays) ── */
  --color-tertiary: #353535;
  --color-on-tertiary: #ffffff;

  /* ── Colour: Secondary (legacy compat) ── */
  --color-secondary-container: #f0efed;

  /* ── Typography ── */
  --font-display: 'Noto Serif', serif;
  --font-body: 'Manrope', sans-serif;
  --font-label: 'Inter', sans-serif;

  /* ── Spacing Scale ── */
  --spacing-1: 0.25rem;   /*  4px */
  --spacing-2: 0.5rem;    /*  8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.5rem;    /* 24px */
  --spacing-6: 2rem;      /* 32px */
  --spacing-7: 2.25rem;   /* 36px */
  --spacing-8: 2.75rem;   /* 44px */
  --spacing-9: 3.5rem;    /* 56px */
  --spacing-10: 4.5rem;   /* 72px */

  /* ── Corner Radius ── */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* ── Elevation & Shadows ── */
  --shadow-ambient: 0 20px 40px rgba(86, 19, 113, 0.05);
  --shadow-ghost-border: 0 0 0 1px rgba(209, 194, 209, 0.15);

  /* ── Glassmorphism ── */
  --glass-blur: blur(12px);
  --glass-opacity: 0.85;

  /* ── Gradients ── */
  --gradient-cta: linear-gradient(135deg, var(--color-primary), var(--color-primary-container));
}