/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {

  /* --- Color Palette --- */
  --ivory:        #F5F0E8;
  --off-white:    #FAF8F4;
  --charcoal:     #1C1C1A;
  --near-black:   #111110;
  --warm-taupe:   #A89880;
  --stone:        #C8BFB0;
  --muted-beige:  #E5DDD0;
  --mid-grey:     #8A8780;
  --light-grey:   #D4CFC8;
  --pure-white:   #FFFFFF;

  /* Semantic aliases */
  --bg-primary:     var(--ivory);
  --bg-secondary:   var(--off-white);
  --bg-dark:        var(--near-black);
  --bg-charcoal:    var(--charcoal);

  --text-primary:   var(--charcoal);
  --text-secondary: var(--mid-grey);
  --text-light:     var(--off-white);
  --text-accent:    var(--warm-taupe);

  --border-light:   rgba(28, 28, 26, 0.10);
  --border-medium:  rgba(28, 28, 26, 0.18);

  /* --- Typography Scale --- */
  --font-serif:   'Cormorant Garamond', 'Georgia', serif;
  --font-sans:    'DM Sans', 'system-ui', -apple-system, sans-serif;

  /* Display sizes */
  --text-hero:       clamp(3.5rem, 9vw, 8rem);
  --text-display:    clamp(2.8rem, 6vw, 5.5rem);
  --text-headline:   clamp(2rem, 4vw, 3.5rem);
  --text-title:      clamp(1.6rem, 3vw, 2.4rem);
  --text-subtitle:   clamp(1.2rem, 2vw, 1.6rem);

  /* Body sizes */
  --text-body-lg:  1.125rem;      /* 18px */
  --text-body:     1rem;          /* 16px */
  --text-body-sm:  0.9375rem;     /* 15px */
  --text-caption:  0.8125rem;     /* 13px */
  --text-label:    0.6875rem;     /* 11px */

  /* --- Spacing Scale (8px base) --- */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40: 10rem;      /* 160px */
  --space-48: 12rem;      /* 192px */

  /* --- Layout --- */
  --container-max:    1440px;
  --container-wide:   1280px;
  --container-normal: 1080px;
  --container-narrow:  760px;
  --gutter:           clamp(1.25rem, 4vw, 3rem);

  /* --- Grid --- */
  --grid-cols: 12;
  --grid-gap:  clamp(1rem, 2vw, 1.5rem);

  /* --- Border Radius --- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-none: 0px;

  /* --- Transitions --- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 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:   200ms;
  --duration-med:    400ms;
  --duration-slow:   700ms;
  --duration-xslow:  1100ms;

  /* --- Shadows --- */
  --shadow-sm:  0 2px 8px rgba(17, 17, 16, 0.06);
  --shadow-md:  0 8px 32px rgba(17, 17, 16, 0.10);
  --shadow-lg:  0 24px 64px rgba(17, 17, 16, 0.14);

  /* --- Z-index Scale --- */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-nav:     2000;
  --z-cursor:  9999;

  /* --- Nav Height --- */
  --nav-height: 4.5rem;
}