/* tokens.css - Brand Design Tokens */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Playfair+Display:ital,wght@0,500;0,700;1,500&display=swap');

:root {
  /* Brand Colors */
  --primary-rose: #8B1A4A;
  --blush-pink: #C4547A;
  --champagne-gold: #D4A853;
  --ivory-white: #FDF8F4;
  --velvet-cream: #F5EDE5;
  --deep-charcoal: #2D2D2D;
  --warm-gray: #888888;
  --deep-rose: #5C0F2E;
  
  /* System States */
  --success: #2e7d32;
  --error: #d32f2f;
  --warning: #f57c00;
  --info: #0288d1;
  --wa-green: #25D366;
  --wa-green-hover: #128C7E;

  /* Fixed roles that must NOT flip with the theme: text sitting on saturated
     brand-color buttons/badges (always light), and the toast's own chrome
     (always dark, for consistent contrast regardless of page theme). */
  --text-on-accent: #FDF8F4;
  --toast-bg: #2D2D2D;
  /* Dark text for elements sitting on the light/gold accent (champagne-gold
     stays light in both themes, so its text must stay fixed-dark too --
     using the flipping --deep-charcoal here goes light-on-light in dark mode). */
  --text-on-light-accent: #2D2D2D;

  /* Typography */
  --font-display: 'Cormorant Garamond', serif;
  --font-heading: 'Playfair Display', serif;
  --font-ui: 'DM Sans', sans-serif;
  --font-body: 'Lato', sans-serif;

  /* Borders & Radius */
  --radius-card: 8px;
  --radius-button: 4px;
  --radius-modal: 12px;
  --radius-round: 50%;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(45, 45, 45, 0.06);
  --shadow-md: 0 4px 12px rgba(45, 45, 45, 0.1);
  --shadow-lg: 0 8px 24px rgba(139, 26, 74, 0.12);
  --shadow-hover: 0 12px 30px rgba(139, 26, 74, 0.16);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease-in-out;
  
  /* Layout */
  --max-width: 1200px;
  --header-height: 70px;
}

/* --- DARK THEME ---
   Only the neutrals (surfaces, text, borders) and shadow strength flip here;
   --text-on-accent / --toast-bg are intentionally NOT redefined (see above).
   Brand rose/gold are nudged brighter so they stay vivid on dark surfaces
   instead of looking muddy, while remaining clearly "the same" brand. */
:root[data-theme="dark"] {
  --primary-rose: #C4547A;
  --blush-pink: #D97FA0;
  --champagne-gold: #E0BC77;
  --ivory-white: #1F1A18;
  --velvet-cream: #332C29;
  --deep-charcoal: #F0E9E4;
  --warm-gray: #ABA39D;
  /* --deep-rose intentionally NOT overridden: it's the footer's fixed dark
     background (shouldn't turn light-pink in dark mode) and also the
     hover-darken shade for primary buttons -- #5C0F2E still reads as a
     natural "darken on hover" against the brighter dark-mode primary-rose. */

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 26px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* Respect OS-level dark mode for first-time visitors who haven't toggled
   yet (theme-init.js overrides this with their saved choice once they do). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-rose: #C4547A;
    --blush-pink: #D97FA0;
    --champagne-gold: #E0BC77;
    --ivory-white: #1F1A18;
    --velvet-cream: #332C29;
    --deep-charcoal: #F0E9E4;
    --warm-gray: #ABA39D;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 26px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
}