/* =========================================================
   DESIGN TOKENS — Sandrine Chetrit
   Museum-grade neutrals + editorial typography
   D-01 palette · D-03 type scale · D-05 spacing · D-06 motion
   ========================================================= */

:root {
  /* ---- Color · Light (gallery wall) ---- */
  --paper:        #F5F2EC;   /* warm off-white */
  --paper-soft:   #EFEBE2;   /* sub-surface */
  --mist:         #E7E2D8;   /* dividers, borders */
  --stone:        #A9A39A;   /* secondary text, icons */
  --ink:          #1A1714;   /* warm near-black */
  --ink-soft:     #3A332E;   /* secondary text on light */
  --accent:       #8B2E1F;   /* single editorial accent — oxblood */
  --accent-soft:  rgba(139, 46, 31, 0.08);

  /* Functional surfaces */
  --surface:      var(--paper);
  --surface-2:    var(--paper-soft);
  --border:       var(--mist);
  --text:         var(--ink);
  --text-muted:   var(--ink-soft);
  --text-faint:   var(--stone);
  --link:         var(--ink);
  --link-hover:   var(--accent);
  --focus-ring:   var(--accent);

  /* ---- Typography ---- */
  --font-serif:  "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-sans:   "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Modular scale (1.25 minor third) */
  --type-xs:      0.8rem;
  --type-sm:      1rem;
  --type-md:      1.25rem;
  --type-lg:      1.563rem;
  --type-xl:      1.953rem;
  --type-2xl:     2.441rem;
  --type-3xl:     3.052rem;
  --type-display: clamp(3rem, 6vw, 5.5rem);

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;
  --tracking-wider: 0.16em;

  /* ---- Spacing (4px base) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 12rem;
  --space-12: 16rem;

  /* ---- Containers ---- */
  --content-narrow: 65ch;
  --content-medium: 960px;
  --content-wide:   1280px;
  --content-bleed:  100vw;
  --gutter:         clamp(1.25rem, 4vw, 3rem);

  /* ---- Radius, elevation ---- */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --shadow-1:  0 1px 2px rgba(26, 23, 20, 0.04), 0 1px 3px rgba(26, 23, 20, 0.06);
  --shadow-2:  0 6px 20px -8px rgba(26, 23, 20, 0.12), 0 2px 6px rgba(26, 23, 20, 0.06);
  --shadow-3:  0 30px 60px -20px rgba(26, 23, 20, 0.18), 0 12px 28px -12px rgba(26, 23, 20, 0.10);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    700ms;

  /* ---- Layout primitives ---- */
  --nav-height: 72px;
  --z-nav:      50;
  --z-modal:    100;
  --z-toast:    200;
}

/* ---- Color · Dark (D-02) ---- */
[data-theme="dark"] {
  --paper:      #14110F;
  --paper-soft: #1C1916;
  --mist:       #2A2622;
  --stone:      #6E665D;
  --ink:        #EDE7DC;
  --ink-soft:   #C4BDB1;
  --accent:     #D88B7A;
  --accent-soft: rgba(216, 139, 122, 0.10);

  --surface:    var(--paper);
  --surface-2:  var(--paper-soft);
  --border:     var(--mist);
  --text:       var(--ink);
  --text-muted: var(--ink-soft);
  --text-faint: var(--stone);
  --link:       var(--ink);
  --link-hover: var(--accent);
  --focus-ring: var(--accent);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 20px -8px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

/* Respect system preference when user has no explicit choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #14110F;
    --paper-soft: #1C1916;
    --mist:       #2A2622;
    --stone:      #6E665D;
    --ink:        #EDE7DC;
    --ink-soft:   #C4BDB1;
    --accent:     #D88B7A;
    --accent-soft: rgba(216, 139, 122, 0.10);

    --surface:    var(--paper);
    --surface-2:  var(--paper-soft);
    --border:     var(--mist);
    --text:       var(--ink);
    --text-muted: var(--ink-soft);
    --text-faint: var(--stone);
    --link:       var(--ink);
    --link-hover: var(--accent);
    --focus-ring: var(--accent);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 6px 20px -8px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  }
}