/* ============================================
   PROJECT SPASHT_BANDA — Design Tokens
   ============================================
   Emotion: Intimacy · Depth · Reflective
   Palette: Warm Beige · Charcoal · Muted Gray
   ============================================ */
:root {
  /* Colors: Backgrounds */
  --pe-bg:            #FAF8F5; /* Warm Beige/Paper */
  --pe-bg-alt:        #F3EFEA;
  --pe-surface:       #FFFFFF;
  --pe-surface-hover: #FDFDFD;

  /* Colors: Text */
  --pe-text-primary:   #1C1A17; /* Charcoal */
  --pe-text-secondary: #5C554F; /* Muted gray-brown */
  --pe-text-tertiary:  #8E857C;
  --pe-text-faint:     #B0A69D;

  /* Accent Color */
  --pe-accent:         #B8956A; /* Soft Muted Gold/Beige */
  --pe-accent-hover:   #A07F56;
  --pe-accent-subtle:  rgba(184, 149, 106, 0.08);

  /* Borders & Overlays */
  --pe-border:        rgba(28, 26, 23, 0.08);
  --pe-border-hover:  rgba(28, 26, 23, 0.15);
  --pe-overlay:       rgba(28, 26, 23, 0.5);
  --pe-selection:     rgba(184, 149, 106, 0.15);

  /* Typography */
  --pe-serif:         'Instrument Serif', Georgia, 'Times New Roman', serif;
  --pe-sans:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing System (8px Grid) */
  --pe-1:  0.25rem;
  --pe-2:  0.5rem;
  --pe-3:  0.75rem;
  --pe-4:  1rem;
  --pe-5:  1.25rem;
  --pe-6:  1.5rem;
  --pe-8:  2rem;
  --pe-10: 2.5rem;
  --pe-12: 3rem;
  --pe-16: 4rem;
  --pe-20: 5rem;
  --pe-24: 6rem;
  --pe-32: 8rem;

  /* Radius */
  --pe-radius-sm:  4px;
  --pe-radius-md:  8px;
  --pe-radius-lg:  12px;
  --pe-radius-full: 9999px;

  /* Layout */
  --pe-max-width:  1000px;
  --pe-section:    clamp(100px, 12vw, 160px);

  /* Transitions */
  --pe-ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --pe-duration:      400ms;
}