/* ============================================================
   CREATIVE CURTAINS & BLINDS — DESIGN TOKENS v2
   Premium rebuild — June 2026
   ============================================================ */

:root {
  /* ── Full colour palette ── */
  --sage-50:  #F4F7F4;
  --sage-100: #E8EEE8;
  --sage-200: #D1DDD2;
  --sage-300: #B8CAB9;
  --sage-400: #A2B7A4;
  --sage-500: #8AA38C;
  --sage-600: #6A766B;
  --sage-700: #444C45;
  --sage-800: #2D332E;
  --sage-900: #1A1D1A;

  --paper:    #FAF8F3;
  --paper-2:  #F3F0E9;
  --ink:      #1A1D1A;
  --white:    #FFFFFF;

  /* ── Semantic colours ── */
  --color-bg:           var(--paper);
  --color-bg-alt:       var(--paper-2);
  --color-bg-dark:      var(--sage-900);
  --color-text:         var(--sage-900);
  --color-text-muted:   var(--sage-700);
  --color-text-quiet:   var(--sage-600);
  --color-accent:       var(--sage-400);
  --color-accent-dark:  var(--sage-500);
  --color-border:       var(--sage-200);
  --color-border-mid:   var(--sage-300);

  /* ── Typography ── */
  --font-serif:  'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  /* ── Fluid type scale ── */
  --text-xs:      clamp(0.694rem,  0.67rem  + 0.12vw, 0.75rem);
  --text-sm:      clamp(0.833rem,  0.80rem  + 0.17vw, 0.9rem);
  --text-base:    clamp(1rem,      0.97rem  + 0.15vw, 1.0625rem);
  --text-md:      clamp(1.125rem,  1.05rem  + 0.38vw, 1.25rem);
  --text-lg:      clamp(1.25rem,   1.14rem  + 0.56vw, 1.5rem);
  --text-xl:      clamp(1.5rem,    1.3rem   + 1vw,    2rem);
  --text-2xl:     clamp(1.875rem,  1.5rem   + 1.875vw,2.75rem);
  --text-3xl:     clamp(2.5rem,    1.9rem   + 3vw,    4rem);
  --text-4xl:     clamp(3.25rem,   2.3rem   + 4.75vw, 5.5rem);
  --text-display: clamp(4rem,      2.8rem   + 6vw,    8rem);

  /* ── Spacing scale ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-40: 10rem;
  --sp-48: 12rem;

  /* ── Layout ── */
  --container:      1240px;
  --container-wide: 1440px;
  --container-text: 680px;
  --gutter:         clamp(1.25rem, 5vw, 2.5rem);

  /* ── Radii ── */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full:9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(26,29,26,0.05);
  --shadow-sm:  0 2px 8px rgba(26,29,26,0.07), 0 1px 3px rgba(26,29,26,0.04);
  --shadow:     0 4px 16px rgba(26,29,26,0.09), 0 2px 6px rgba(26,29,26,0.04);
  --shadow-md:  0 8px 32px rgba(26,29,26,0.11), 0 4px 12px rgba(26,29,26,0.05);
  --shadow-lg:  0 20px 60px rgba(26,29,26,0.14), 0 8px 24px rgba(26,29,26,0.07);
  --shadow-xl:  0 32px 80px rgba(26,29,26,0.18), 0 12px 32px rgba(26,29,26,0.09);

  /* ── Motion ── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);

  --dur-instant: 100ms;
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    450ms;
  --dur-slower:  650ms;
  --dur-enter:   900ms;

  /* ── Z-index ── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
}