/* ============================================
   SELLING 817 — Design Tokens
   All colors, typography, spacing, and breakpoints
   defined here. Change once, updates everywhere.
   ============================================ */

:root {
  /* ---- Brand Colors ---- */
  --color-black:        #1a1a1a;
  --color-charcoal:     #2c2824;
  --color-dark:         #1e1c1a;
  --color-gold:         #b8934e;
  --color-gold-light:   #d4b577;
  --color-gold-dark:    #8c6d35;
  --color-cream:        #faf8f5;
  --color-warm-white:   #f5f1ec;
  --color-warm-gray:    #e8e2da;
  --color-mid-gray:     #9a9490;
  --color-text:         #2c2c2c;
  --color-text-light:   #6b6560;
  --color-text-on-dark: #f5f1ec;
  --color-white:        #ffffff;

  /* ---- Semantic Aliases ---- */
  --bg-primary:     var(--color-cream);
  --bg-dark:        var(--color-dark);
  --bg-section-alt: var(--color-warm-white);
  --accent:         var(--color-gold);
  --accent-hover:   var(--color-gold-light);
  --text-primary:   var(--color-text);
  --text-secondary: var(--color-text-light);
  --text-on-dark:   var(--color-text-on-dark);
  --border-color:   var(--color-warm-gray);

  /* ---- Typography ---- */
  --font-display:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'DM Sans', 'Helvetica Neue', sans-serif;
  --font-accent:   'Cormorant', serif;

  --fs-hero:    clamp(3rem, 6vw, 5.5rem);
  --fs-h1:      clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3:      clamp(1.375rem, 2.5vw, 1.875rem);
  --fs-h4:      clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-body-lg: 1.1875rem;
  --fs-small:   0.875rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-body:    1.7;

  --ls-eyebrow: 0.2em;
  --ls-tight:   -0.02em;
  --ls-normal:  0;

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

  /* ---- Spacing Scale (8px base) ---- */
  --space-2xs:  0.25rem;   /* 4px */
  --space-xs:   0.5rem;    /* 8px */
  --space-sm:   0.75rem;   /* 12px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */
  --space-5xl:  8rem;      /* 128px */

  /* ---- Section Spacing ---- */
  --section-pad-y:    clamp(4rem, 8vw, 7rem);
  --section-pad-y-sm: clamp(3rem, 6vw, 5rem);

  /* ---- Layout ---- */
  --container-max:    1280px;
  --container-narrow: 900px;
  --container-wide:   1440px;
  --gutter:           clamp(1.25rem, 3vw, 2rem);

  /* ---- Borders & Radius ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --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.1);
  --shadow-xl:   0 16px 50px rgba(26, 26, 26, 0.12);
  --shadow-gold: 0 4px 20px rgba(184, 147, 78, 0.15);

  /* ---- Transitions ---- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-reveal: 800ms;

  /* ---- Z-Index Scale ---- */
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 500;
  --z-modal:   1000;
}

/* ---- Dark section overrides ---- */
[data-theme="dark"] {
  --text-primary:   var(--color-text-on-dark);
  --text-secondary: var(--color-mid-gray);
  --border-color:   rgba(255, 255, 255, 0.1);
}