/* ============================================================
   SCENTPRESSION — Design Tokens
   Brand colors derived from logo: Orange + Purple
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-orange:        #F6971F;
  --color-orange-dark:   #C47A0A;
  --color-orange-text:   #B5700A;
  --color-orange-accessible: #B5700A;
  --color-orange-light:  #FABD6A;
  --color-orange-hover:  #E07F0A;
  --color-purple:        #632886;
  --color-purple-dark:   #502878;
  --color-purple-light:  #8A4FBA;
  --color-purple-hover:  #4A1D6B;

  /* ── Neutrals ── */
  --color-cream:         #F5F3F0;
  --color-cream-dark:    #EBE7E2;
  --color-white:         #FFFFFF;
  --color-black:         #1A1A1A;
  --color-gray-light:    #E8E4E0;
  --color-gray-mid:      #6B6560;
  --color-gray-dark:     #5C5653;
  --color-overlay:       rgba(26, 26, 26, 0.65);

  /* ── Typography ── */
  --font-display:        'Cormorant Garamond', 'Georgia', serif;
  --font-body:           'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:           'DM Mono', 'Courier New', monospace;

  /* ── Font Sizes (fluid / clamp) ── */
  --text-xs:             clamp(0.694rem, 0.66rem + 0.17vw, 0.8rem);
  --text-sm:             clamp(0.833rem, 0.78rem + 0.27vw, 1rem);
  --text-base:           clamp(1rem, 0.93rem + 0.36vw, 1.125rem);
  --text-lg:             clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
  --text-xl:             clamp(1.44rem, 1.24rem + 1vw, 2rem);
  --text-2xl:            clamp(1.728rem, 1.42rem + 1.54vw, 2.625rem);
  --text-3xl:            clamp(2.074rem, 1.6rem + 2.37vw, 3.5rem);
  --text-4xl:            clamp(2.488rem, 1.77rem + 3.59vw, 4.5rem);
  --text-5xl:            clamp(2.986rem, 1.93rem + 5.28vw, 6rem);

  /* ── Font Weights ── */
  --weight-light:        300;
  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  /* ── Line Heights ── */
  --leading-tight:       1.15;
  --leading-snug:        1.3;
  --leading-normal:      1.6;
  --leading-relaxed:     1.75;

  /* ── Letter Spacing ── */
  --tracking-tight:      -0.02em;
  --tracking-normal:     0;
  --tracking-wide:       0.04em;
  --tracking-wider:      0.08em;
  --tracking-widest:     0.14em;

  /* ── Spacing Scale ── */
  --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;
  --space-32:            8rem;
  --space-40:            10rem;

  /* ── Layout ── */
  --container-max:       1280px;
  --container-narrow:    860px;
  --container-wide:      1440px;
  --gutter-desktop:      80px;
  --gutter-tablet:       40px;
  --gutter-mobile:       24px;

  /* ── Border Radius ── */
  --radius-sm:           6px;
  --radius-md:           12px;
  --radius-lg:           20px;
  --radius-full:         9999px;

  /* ── Shadows ── */
  --shadow-sm:           0 1px 3px rgba(26, 26, 26, 0.06);
  --shadow-md:           0 4px 12px rgba(26, 26, 26, 0.08);
  --shadow-lg:           0 8px 30px rgba(26, 26, 26, 0.12);
  --shadow-xl:           0 16px 50px rgba(26, 26, 26, 0.16);

  /* ── Transitions ── */
  --ease-out:            cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:         cubic-bezier(0.42, 0, 0.58, 1);
  --duration-fast:       150ms;
  --duration-normal:     300ms;
  --duration-slow:       500ms;

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