/* ==========================================================================
   Design System — Shawn Pander "Forever & For Now"
   shawnpander.com
   Developed by Brian Kaplan
   ========================================================================== */

:root {
  /* --- Background / Dark tones --- */
  --color-bg-base:        #0a0806;
  --color-bg-section:     #1a100a;
  --color-bg-card:        #2d1a0e;
  --color-bg-elevated:    #3a2010;

  /* --- Accent warm tones (concentric rings) --- */
  --color-rust:           #8b3a1e;
  --color-rust-light:     #c04a20;
  --color-orange:         #d4710a;
  --color-deep-red:       #a02010;
  --color-gold:           #c8972a;
  --color-gold-bright:    #e8b84a;

  /* --- Feature accent (cover text teal) --- */
  --color-teal:           #1a8a8a;
  --color-teal-light:     #24b0b0;

  /* --- Light / Text tones --- */
  --color-parchment:      #f5e8c8;
  --color-parchment-dim:  #a89878;
  --color-cream:          #fffaf0;

  /* --- Semantic aliases --- */
  --color-text:           var(--color-parchment);
  --color-text-muted:     var(--color-parchment-dim);
  --color-link:           var(--color-teal);
  --color-link-hover:     var(--color-teal-light);
  --color-accent:         var(--color-gold);

  /* --- Typography --- */
  --font-display:         'Playfair Display', Georgia, serif;
  --font-body:            'Libre Baskerville', 'Times New Roman', serif;
  --font-mono:            'Special Elite', 'Courier New', monospace;

  --fs-hero:    clamp(4rem, 10vw, 8rem);
  --fs-h1:      clamp(2.5rem, 6vw, 4.5rem);
  --fs-h2:      clamp(1.8rem, 4vw, 3rem);
  --fs-h3:      clamp(1.2rem, 2.5vw, 1.8rem);
  --fs-body:    clamp(1rem, 1.3vw, 1.15rem);
  --fs-small:   clamp(0.8rem, 1vw, 0.9rem);
  --fs-label:   0.75rem;
  --fs-massive: clamp(4rem, 10vw, 8rem);

  --lh-body:    1.75;
  --lh-heading: 1.05;

  /* --- Spacing --- */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   8rem;
  --space-2xl:  12rem;

  /* --- Layout --- */
  --max-width:        1200px;
  --max-width-wide:   1400px;
  --nav-height:       80px;
  --radius:           4px;
  --radius-lg:        12px;

  /* --- Transitions --- */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --ease-elastic:     cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* --- Shadows --- */
  --shadow-sm:        0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-md:        0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg:        0 15px 60px rgba(0, 0, 0, 0.6);
  --shadow-vinyl:     0 0 80px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.5);
}