/* ============================================
   Design Tokens — Valentine's Letter Site
   ============================================ */

/* Display — elegant serif for letter text and headings */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* Handwriting — decorative calligraphic for signature and special moments */
@import url('https://fonts.googleapis.com/css2?family=Quintessential&display=swap');

/* Body — bold geometric sans for UI, buttons, captions */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Backgrounds (inverted — light mode) ---- */
  --bg-deep:        #F5F0E8;
  --bg-warm:        #EDE6DA;
  --bg-soft:        #FFFFFF;
  --bg-mystery:     #E8E0F0;

  /* ---- Primary accent — gold (deepened for light bg) ---- */
  --gold:           #A07848;
  --gold-bright:    #C09050;
  --amber:          #8B6520;

  /* ---- Secondary accent — purple (Stephanie) ---- */
  --purple:         #6B5B8A;
  --purple-soft:    #8B7BA8;
  --purple-deep:    #E8E0F0;

  /* ---- Text (inverted — dark on light) ---- */
  --text-primary:   #2A2018;
  --text-secondary: #6B5D50;
  --text-dark:      #1a1714;

  /* ---- Effects (adjusted for light bg) ---- */
  --particle-gold:  rgba(160, 120, 72, 0.35);
  --particle-purple: rgba(107, 91, 138, 0.3);
  --glow:           rgba(160, 120, 72, 0.12);
  --glow-bright:    rgba(192, 144, 80, 0.25);
  --glow-purple:    rgba(139, 123, 168, 0.2);

  /* ---- Typography ---- */
  --font-display:     'EB Garamond', Georgia, serif;
  --font-handwriting: 'Quintessential', cursive;
  --font-body:        'League Spartan', -apple-system, sans-serif;

  /* ---- Spacing ---- */
  --section-padding:  clamp(3rem, 8vh, 6rem);
  --content-max:      680px;
  --content-narrow:   600px;
  --gap-sm:           0.5rem;
  --gap-md:           1rem;
  --gap-lg:           2rem;
  --gap-xl:           3rem;

  /* ---- Transitions ---- */
  --ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:    0.2s;
  --duration-normal:  0.4s;
  --duration-slow:    0.8s;

  /* ---- Border radius ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 9999px;
}

[data-theme="dark"] {
  /* ---- Backgrounds (original dark mode) ---- */
  --bg-deep:        #1a1714;
  --bg-warm:        #2a2520;
  --bg-soft:        #221e19; /* Slightly lighter than deep */
  --bg-mystery:     #2D2640;

  /* ---- Primary accent — gold (brighter for dark bg) ---- */
  --gold:           #d4a574;
  --gold-bright:    #e8c07a;
  --amber:          #cc8844;

  /* ---- Secondary accent — purple ---- */
  --purple:         #8B7BA8;
  --purple-soft:    #A899C2;
  --purple-deep:    #2D2640;

  /* ---- Text (light on dark) ---- */
  --text-primary:   #f5f0e8;
  --text-secondary: #b8a89a;
  --text-dark:      #1a1714; 

  /* ---- Effects ---- */
  --particle-gold:  rgba(212, 165, 116, 0.5);
  --particle-purple: rgba(139, 123, 168, 0.4);
  --glow:           rgba(212, 165, 116, 0.15);
  --glow-bright:    rgba(232, 192, 122, 0.3);
  --glow-purple:    rgba(168, 153, 194, 0.2);
}