/* ==========================================================================
   Design Tokens — Jantine van den Bosch
   ========================================================================== */

:root {
  /* Colors */
  --color-bg:          #FDF8F4;
  --color-text:        #2D2A32;
  --color-text-light:  #5A5662;
  --color-text-muted:  #8A8694;
  --color-accent:      #C4573A;
  --color-accent-hover:#A8452D;
  --color-amber:       #E8985A;
  --color-sage:        #5B8A72;
  --color-sage-hover:  #4A7560;
  --color-purple:      #6B5B8A;
  --color-dark:        #2D2A32;
  --color-dark-light:  #3D3A44;
  --color-white:       #FFFFFF;
  --color-border:      #E8E4DF;
  --color-border-light:#F0ECE8;

  /* Color with alpha */
  --color-accent-10:   rgba(196, 87, 58, 0.1);
  --color-accent-20:   rgba(196, 87, 58, 0.2);
  --color-amber-10:    rgba(232, 152, 90, 0.1);
  --color-sage-10:     rgba(91, 138, 114, 0.1);
  --color-purple-10:   rgba(107, 91, 138, 0.1);
  --color-dark-80:     rgba(45, 42, 50, 0.8);
  --color-dark-90:     rgba(45, 42, 50, 0.9);

  /* Typography */
  --font-display:      'DM Serif Display', Georgia, serif;
  --font-body:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid font sizes */
  --text-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:    clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base:  clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --text-xl:    clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl:   clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl:   clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
  --text-4xl:   clamp(2.25rem, 1.5rem + 3.75vw, 3.75rem);
  --text-5xl:   clamp(2.75rem, 1.75rem + 5vw, 4.5rem);

  /* Spacing */
  --space-xs:   clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-sm:   clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-md:   clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-lg:   clamp(1.5rem, 1rem + 2.5vw, 3rem);
  --space-xl:   clamp(2rem, 1.25rem + 3.75vw, 4.5rem);
  --space-2xl:  clamp(3rem, 2rem + 5vw, 6rem);
  --space-3xl:  clamp(4rem, 2.5rem + 7.5vw, 8rem);

  /* Layout */
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-padding: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* Borders & Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(45, 42, 50, 0.06), 0 1px 2px rgba(45, 42, 50, 0.04);
  --shadow-md:   0 4px 12px rgba(45, 42, 50, 0.08), 0 2px 4px rgba(45, 42, 50, 0.04);
  --shadow-lg:   0 12px 32px rgba(45, 42, 50, 0.1), 0 4px 8px rgba(45, 42, 50, 0.04);
  --shadow-xl:   0 20px 48px rgba(45, 42, 50, 0.12), 0 8px 16px rgba(45, 42, 50, 0.06);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index scale */
  --z-base:      1;
  --z-dropdown:  10;
  --z-sticky:    100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-toast:     400;

  /* Scroll progress bar */
  --progress-height: 3px;
}