/* ===========================================
   OpenBand Merch — Design Tokens
   =========================================== */

:root {
  /* --- Light Theme Palette --- */
  --color-bg:          #f5f0ea;
  --color-bg-section:  #ede8e0;
  --color-bg-card:     #ffffff;
  --color-text:        #1a1a1a;
  --color-text-secondary: #5a5347;

  --color-forest:      #2d3b2d;
  --color-foliage:     #4a5d3a;
  --color-wood:        #8b6f47;
  --color-stone:       #a09484;
  --color-accent:      #d4763c;

  /* --- Semantic aliases --- */
  --color-primary:     var(--color-forest);
  --color-primary-light: var(--color-foliage);
  --color-nav-bg:      rgba(245, 240, 234, 0.85);
  --color-nav-text:    var(--color-text);

  /* --- Typography --- */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --fs-hero:    clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1:      clamp(2rem, 4vw, 3rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:      1.25rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  --lh-heading: 1.2;
  --lh-body:    1.6;

  /* --- Spacing --- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* --- Shadows --- */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);

  /* --- Borders --- */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition: 0.3s ease;
  --transition-fast: 0.15s ease;

  /* --- Layout --- */
  --nav-height: 64px;
  --container-max: 1200px;
  --container-padding: var(--space-lg);
}

/* ===========================================
   Dark Theme
   =========================================== */
[data-theme="dark"] {
  --color-bg:          #121212;
  --color-bg-section:  #1a1a1a;
  --color-bg-card:     #242424;
  --color-text:        #e8e0d6;
  --color-text-secondary: #a09484;

  --color-primary:     #5a7a52;
  --color-primary-light: #6b8c60;
  --color-accent:      #e8925a;

  --color-nav-bg:      rgba(18, 18, 18, 0.85);

  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.55);
}