/* ============================================
   WALKMAN STUDIOS — Design Tokens
   ============================================ */

:root {
  /* ---- Colors ---- */
  --color-bg:            #0a0a0a;
  --color-bg-alt:        #0f0f0f;
  --color-surface:       #141414;
  --color-surface-light: #1a1a1a;
  --color-border:        #2a2a2a;

  --color-accent:        #C9A84C;
  --color-accent-light:  #E8D48B;
  --color-accent-dark:   #A68A3A;
  --color-accent-glow:   rgba(201, 168, 76, 0.15);

  --color-text:          #F5F5F5;
  --color-text-secondary:#CCCCCC;
  --color-text-muted:    #888888;
  --color-text-dark:     #0a0a0a;

  --color-white:         #FFFFFF;
  --color-black:         #000000;
  --color-overlay:       rgba(0, 0, 0, 0.7);
  --color-overlay-heavy: rgba(0, 0, 0, 0.85);

  /* ---- Typography ---- */
  --font-heading: 'Playfair Display', 'Georgia', serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --fs-display:   clamp(3rem, 6vw, 6rem);
  --fs-h1:        clamp(2.25rem, 4.5vw, 4.5rem);
  --fs-h2:        clamp(1.75rem, 3vw, 3rem);
  --fs-h3:        clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4:        clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body:      clamp(1rem, 1.1vw, 1.2rem);
  --fs-body-lg:   clamp(1.1rem, 1.3vw, 1.4rem);
  --fs-small:     clamp(0.85rem, 0.9vw, 0.95rem);
  --fs-caption:   clamp(0.75rem, 0.8vw, 0.85rem);

  --lh-tight:     1.1;
  --lh-heading:   1.2;
  --lh-body:      1.7;
  --lh-loose:     1.9;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --ls-tight:    -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.05em;
  --ls-wider:     0.1em;
  --ls-widest:    0.2em;

  /* ---- Spacing ---- */
  --space-2xs:    0.25rem;   /* 4px  */
  --space-xs:     0.5rem;    /* 8px  */
  --space-sm:     1rem;      /* 16px */
  --space-md:     1.5rem;    /* 24px */
  --space-lg:     2rem;      /* 32px */
  --space-xl:     3rem;      /* 48px */
  --space-2xl:    4rem;      /* 64px */
  --space-3xl:    6rem;      /* 96px */
  --space-4xl:    8rem;      /* 128px */
  --space-5xl:    10rem;     /* 160px */

  --section-padding: clamp(5rem, 10vh, 10rem);
  --container-max:   1400px;
  --container-narrow: 900px;
  --container-padding: clamp(1.5rem, 4vw, 4rem);

  /* ---- Borders & Radius ---- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  /* ---- Shadows ---- */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 8px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow:  0 0 40px rgba(201, 168, 76, 0.15);

  /* ---- Transitions ---- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    0.2s;
  --duration-normal:  0.4s;
  --duration-slow:    0.6s;
  --duration-slower:  0.8s;
  --duration-slowest: 1.2s;

  /* ---- Z-Index Scale ---- */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
}