/* ──────────────────────────────────────────────────────────────────────────
   La Maison du Peintre — variables
   Signature : carnet d'atelier d'un peintre d'antan ouvert sur le chemin
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* — Palette ─────────────────────────────────────────────────────────── */
  --color-aubergine:       #3A1C49;
  --color-aubergine-deep:  #14081E;
  --color-aubergine-soft:  #634175;
  --color-aubergine-rgb:   58, 28, 73;

  --color-paper:           #F2EFE8;
  --color-paper-warm:      #E8E3D8;
  --color-paper-deep:      #D7D0C0;

  --color-ink:             #12100E;
  --color-ink-soft:        #403B35;

  --color-moss:            #435A32;
  --color-moss-light:      #8E9E81;
  --color-moss-deep:       #29381E;

  --color-ochre:           #DB7A14;
  --color-ochre-soft:      #EFAB5A;
  --color-ochre-deep:      #A35400;

  --color-slate:           #2A384A;
  --color-slate-soft:      #506275;

  --color-line:            rgba(58, 28, 73, 0.12);
  --color-line-strong:     rgba(58, 28, 73, 0.40);
  --color-grain:           rgba(58, 28, 73, 0.04);

  /* — Rôles fonctionnels ──────────────────────────────────────────────── */
  --bg-page:               var(--color-paper);
  --bg-section:            var(--color-paper);
  --bg-section-alt:        var(--color-paper-warm);
  --bg-section-deep:       var(--color-aubergine-deep);
  --bg-card:               #F9F8F4;

  --text-primary:          var(--color-ink);
  --text-soft:             var(--color-ink-soft);
  --text-display:          var(--color-aubergine-deep);
  --text-accent:           var(--color-aubergine);
  --text-on-deep:          var(--color-paper);
  --text-handwritten:      var(--color-ochre);

  --link:                  var(--color-aubergine);
  --link-hover:            var(--color-ochre);

  /* — Typographies ────────────────────────────────────────────────────── */
  --font-display: "Fraunces", "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "Lora", "Iowan Old Style", "Palatino", "Times New Roman", serif;
  --font-hand:    "Italianno", "Lucida Calligraphy", "Apple Chancery", cursive;

  --fw-display-thin: 300;
  --fw-display:      400;
  --fw-display-bold: 600;
  --fw-body:         400;
  --fw-body-md:      500;
  --fw-body-bold:    600;
  --fw-hand:         500;

  /* — Échelle typo (mobile-first) ─────────────────────────────────────── */
  --fs-hero:       clamp(3.5rem, 12vw + 1rem, 11rem);
  --fs-display:    clamp(2.8rem, 6vw + 1rem, 6.5rem);
  --fs-h1:         clamp(2.2rem, 4vw + 0.5rem, 4.5rem);
  --fs-h2:         clamp(1.8rem, 3vw + 0.4rem, 3.2rem);
  --fs-h3:         clamp(1.4rem, 2vw + 0.4rem, 2rem);
  --fs-lead:       clamp(1.25rem, 1vw + 1rem, 1.8rem);
  --fs-body:       1.125rem;
  --fs-small:      0.95rem;
  --fs-tiny:       0.8rem;
  
  --fs-hand:       clamp(2.2rem, 2.4vw + 1.3rem, 3.8rem);
  --fs-roman:      clamp(2.4rem, 6vw, 5.5rem);

  --lh-tight:      1;
  --lh-display:    1.05;
  --lh-snug:       1.4;
  --lh-body:       1.6;
  --lh-loose:      1.9;
  --lh-hand:       1.1;

  --letter-display: -0.035em;
  --letter-eyebrow: 0.18em;
  --letter-body:    -0.015em;

  /* — Spacing (échelle modulaire — resserrée pour densité de lecture) ──── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.85rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4.25rem;
  --space-2xl: 6.5rem;
  --space-3xl: 10rem;
  --space-4xl: 14rem;

  --section-y:      clamp(3.5rem, 7vw, 7rem);
  --section-y-deep: clamp(5.5rem, 11vw, 11rem);

  /* — Layout ──────────────────────────────────────────────────────────── */
  --container-narrow: 42rem;
  --container-prose:  48rem;
  --container-wide:   68rem;
  --container-full:   86rem;
  --gutter:           clamp(1.5rem, 6vw, 5rem);

  /* — Radius ──────────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* — Ombres (douces, très aériennes) ─────────────────────────────── */
  --shadow-sm:    0 2px 8px -2px rgba(31, 17, 42, 0.08);
  --shadow-md:    0 16px 32px -12px rgba(31, 17, 42, 0.12),
                  0 4px 10px -4px rgba(31, 17, 42, 0.08);
  --shadow-lg:    0 32px 64px -24px rgba(31, 17, 42, 0.2),
                  0 8px 16px -6px rgba(31, 17, 42, 0.12);
  --shadow-paper: 0 1px 1px rgba(31, 17, 42, 0.04),
                  0 8px 16px -8px rgba(31, 17, 42, 0.12);
  --shadow-pin:   0 20px 32px -14px rgba(31, 17, 42, 0.25);

  /* — Motion ──────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph:   cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast:   200ms;
  --dur-base:   400ms;
  --dur-slow:   700ms;
  --dur-reveal: 1200ms;

  /* — z-index scale ───────────────────────────────────────────────────── */
  --z-base:    1;
  --z-decor:   2;
  --z-content: 5;
  --z-nav:    50;
  --z-overlay:80;
  --z-modal: 100;
}