/* ============================================================
   CALGARY CHAI PARTY — Design Tokens
   Palette: Chai-warm — deep crimson, warm brown, cream, saffron
   ============================================================ */

:root,
[data-theme="light"] {
  /* === SURFACES (warm cream/parchment) === */
  --color-bg:              #fdf8f3;
  --color-surface:         #fefaf6;
  --color-surface-2:       #fff9f4;
  --color-surface-offset:  #f5ede2;
  --color-surface-offset-2:#ede0d1;
  --color-surface-dynamic: #e5d5c2;
  --color-divider:         #ddd0c0;
  --color-border:          #d4c5b0;

  /* === TEXT === */
  --color-text:            #2a1a0e;
  --color-text-muted:      #7a5f47;
  --color-text-faint:      #b89f88;
  --color-text-inverse:    #fdf8f3;

  /* === PRIMARY — Deep Chai Red === */
  --color-primary:         #c0392b;
  --color-primary-hover:   #a93226;
  --color-primary-active:  #8e2219;
  --color-primary-highlight: #f5d5d0;

  /* === SECONDARY — Warm Brown === */
  --color-brown:           #7b4f2e;
  --color-brown-hover:     #6a3f22;
  --color-brown-light:     #c8956a;

  /* === ACCENT — Saffron Gold === */
  --color-gold:            #d4890a;
  --color-gold-hover:      #b87308;
  --color-gold-light:      #f5c842;
  --color-gold-highlight:  #fdf2db;

  /* === SUCCESS / ERROR === */
  --color-success:         #2e7d32;
  --color-error:           #c0392b;
  --color-warning:         #e65100;

  /* === RADIUS === */
  --radius-sm:  0.375rem;
  --radius-md:  0.625rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-full: 9999px;

  /* === TRANSITIONS === */
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* === SHADOWS (warm-tinted) === */
  --shadow-sm:  0 1px 3px rgba(42, 26, 14, 0.08);
  --shadow-md:  0 4px 16px rgba(42, 26, 14, 0.10);
  --shadow-lg:  0 12px 40px rgba(42, 26, 14, 0.14);

  /* === CONTENT WIDTHS === */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* === TYPE SCALE === */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(2.5rem,   0.5rem  + 5vw,    5.5rem);

  /* === SPACING === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* === FONTS === */
  --font-display: 'DM Sans', 'Helvetica Neue', sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
}

/* === DARK MODE === */
[data-theme="dark"] {
  --color-bg:              #1a0f08;
  --color-surface:         #221308;
  --color-surface-2:       #2a1a0d;
  --color-surface-offset:  #1f1208;
  --color-surface-offset-2:#261608;
  --color-surface-dynamic: #36200f;
  --color-divider:         #3e2510;
  --color-border:          #4e3018;
  --color-text:            #f0e0cc;
  --color-text-muted:      #b08060;
  --color-text-faint:      #7a5a3c;
  --color-text-inverse:    #2a1a0e;
  --color-primary:         #e05a4a;
  --color-primary-hover:   #c8402f;
  --color-primary-active:  #a8301f;
  --color-primary-highlight:#4a1a14;
  --color-brown:           #c8956a;
  --color-brown-hover:     #b07a55;
  --color-brown-light:     #d4aa88;
  --color-gold:            #f5c842;
  --color-gold-hover:      #e0b030;
  --color-gold-light:      #ffd966;
  --color-gold-highlight:  #3a2a00;
  --color-success:         #66bb6a;
  --color-error:           #ef5350;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #1a0f08;
    --color-surface:         #221308;
    --color-surface-2:       #2a1a0d;
    --color-surface-offset:  #1f1208;
    --color-surface-offset-2:#261608;
    --color-surface-dynamic: #36200f;
    --color-divider:         #3e2510;
    --color-border:          #4e3018;
    --color-text:            #f0e0cc;
    --color-text-muted:      #b08060;
    --color-text-faint:      #7a5a3c;
    --color-text-inverse:    #2a1a0e;
    --color-primary:         #e05a4a;
    --color-primary-hover:   #c8402f;
    --color-primary-active:  #a8301f;
    --color-primary-highlight:#4a1a14;
    --color-brown:           #c8956a;
    --color-brown-hover:     #b07a55;
    --color-brown-light:     #d4aa88;
    --color-gold:            #f5c842;
    --color-gold-hover:      #e0b030;
    --color-gold-light:      #ffd966;
    --color-gold-highlight:  #3a2a00;
    --color-success:         #66bb6a;
    --color-error:           #ef5350;
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
  }
}