/* ============================================================
   DESIGN SYSTEM — REDAMEUBLEMENT
   Luxury Bespoke Wooden Furniture Platform
   Design Tokens & CSS Custom Properties
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ── COLOR PALETTE ───────────────────────────────────────── */

  /* Backgrounds */
  --cream:             #F9F6F0;
  --ivory:             #FDFBF7;
  --cream-dark:        #F0EBE1;

  /* Dark */
  --obsidian:          #1A1A1A;
  --obsidian-soft:     #222222;
  --obsidian-muted:    #2E2E2E;

  /* Accents */
  --earth-green:       #4A5D4E;
  --earth-green-light: #5E7363;
  --earth-green-pale:  #E8EDE9;
  --walnut:            #5C4033;
  --walnut-light:      #7A5647;

  /* Champagne / Gold */
  --champagne:         #C9A96E;
  --champagne-light:   #DFC08E;
  --champagne-pale:    #F5EDD9;
  --champagne-muted:   #B8945A;

  /* Neutrals */
  --grey-100:          #F7F5F2;
  --grey-200:          #EDE9E3;
  --grey-300:          #D5CFC5;
  --grey-400:          #B8B0A5;
  --grey-500:          #8A8070;
  --grey-600:          #6B6358;
  --grey-700:          #4A4540;
  --white:             #FFFFFF;
  --black:             #000000;

  /* Semantic Aliases */
  --bg-primary:        var(--cream);
  --bg-secondary:      var(--ivory);
  --bg-tertiary:       var(--grey-100);
  --bg-dark:           var(--obsidian);
  --bg-dark-soft:      var(--obsidian-soft);

  --text-primary:      var(--obsidian);
  --text-secondary:    var(--grey-600);
  --text-muted:        var(--grey-500);
  --text-on-dark:      var(--cream);
  --text-accent:       var(--champagne);

  --border-subtle:     rgba(201, 169, 110, 0.15);
  --border-light:      rgba(201, 169, 110, 0.30);
  --border-medium:     rgba(201, 169, 110, 0.50);
  --border-dark:       rgba(26, 26, 26, 0.12);

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */

  --font-serif:        'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Scale — fluid from 375px → 1440px */
  --text-xs:           clamp(0.65rem,  0.6rem  + 0.2vw,  0.75rem);
  --text-sm:           clamp(0.78rem,  0.75rem + 0.2vw,  0.875rem);
  --text-base:         clamp(0.9rem,   0.85rem + 0.3vw,  1rem);
  --text-lg:           clamp(1rem,     0.95rem + 0.4vw,  1.125rem);
  --text-xl:           clamp(1.1rem,   1rem    + 0.5vw,  1.25rem);
  --text-2xl:          clamp(1.25rem,  1.1rem  + 0.8vw,  1.5rem);
  --text-3xl:          clamp(1.5rem,   1.2rem  + 1.5vw,  2rem);
  --text-4xl:          clamp(1.875rem, 1.4rem  + 2vw,    2.75rem);
  --text-5xl:          clamp(2.25rem,  1.5rem  + 3vw,    4rem);
  --text-6xl:          clamp(2.75rem,  1.5rem  + 5vw,    5.5rem);
  --text-7xl:          clamp(3rem,     1.5rem  + 7vw,    7.5rem);

  /* Weights */
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;

  /* Line Heights */
  --leading-tight:     1.1;
  --leading-snug:      1.3;
  --leading-normal:    1.5;
  --leading-relaxed:   1.7;
  --leading-loose:     2;

  /* Letter Spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.2em;

  /* ── SPACING ──────────────────────────────────────────────── */

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

  /* Section Padding (fluid) */
  --section-py: clamp(4rem, 8vw, 9rem);
  --section-py-sm: clamp(2.5rem, 5vw, 5rem);

  /* ── LAYOUT ───────────────────────────────────────────────── */

  --container-max:     1440px;
  --container-wide:    1280px;
  --container-narrow:  960px;
  --container-px:      clamp(1.25rem, 5vw, 5rem);
  --nav-height:        80px;
  --nav-height-scroll: 64px;

  /* ── BORDERS & RADIUS ─────────────────────────────────────── */

  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-2xl:    40px;
  --radius-full:   9999px;

  /* ── SHADOWS ──────────────────────────────────────────────── */

  --shadow-xs:       0 1px 4px rgba(26,26,26,0.05);
  --shadow-sm:       0 2px 12px rgba(26,26,26,0.07);
  --shadow-md:       0 8px 32px rgba(26,26,26,0.10);
  --shadow-lg:       0 20px 60px rgba(26,26,26,0.13);
  --shadow-xl:       0 32px 80px rgba(26,26,26,0.18);
  --shadow-champagne:0 8px 40px rgba(201,169,110,0.22);
  --shadow-inset:    inset 0 1px 0 rgba(255,255,255,0.08);

  /* ── MOTION & EASING ──────────────────────────────────────── */

  --ease-luxury:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-sharp:    cubic-bezier(0.4,  0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0,    0, 0.2,  1);
  --ease-in:       cubic-bezier(0.4,  0, 1,    1);

  --dur-instant:   0.1s;
  --dur-fast:      0.25s;
  --dur-normal:    0.45s;
  --dur-slow:      0.7s;
  --dur-slower:    1s;
  --dur-cinematic: 1.4s;

  --transition-fast:   var(--dur-fast)   var(--ease-luxury);
  --transition-smooth: var(--dur-normal) var(--ease-luxury);
  --transition-slow:   var(--dur-slow)   var(--ease-luxury);

  /* ── Z-INDEX ──────────────────────────────────────────────── */

  --z-below:       -1;
  --z-base:         0;
  --z-raised:       10;
  --z-dropdown:     50;
  --z-sticky:       100;
  --z-overlay:      200;
  --z-modal:        300;
  --z-toast:        400;
  --z-preloader:    9999;

  /* ── GLASS & OVERLAYS ─────────────────────────────────────── */

  --glass-cream:   rgba(249, 246, 240, 0.82);
  --glass-dark:    rgba(26,  26,  26,  0.75);
  --overlay-dark:  rgba(26,  26,  26,  0.45);
  --overlay-light: rgba(249, 246, 240, 0.60);
}

/* ── DARK SECTION OVERRIDE ─────────────────────────────────── */
[data-theme="dark"] {
  --bg-primary:  var(--obsidian);
  --bg-secondary:var(--obsidian-soft);
  --text-primary:var(--cream);
  --text-secondary:var(--grey-400);
  --border-subtle: rgba(249, 246, 240, 0.08);
}