/* ──────────────────────────────────────────────────────────────
   Planning Marie — Design tokens (Phase A)
   Univers : terracotta doux + neutres papier + accent sauge
   ────────────────────────────────────────────────────────────── */

:root {
  /* ── Couleurs · Neutres papier (encre chaude) ── */
  --ink-1000: #1F1915;
  --ink-900:  #2D2520;
  --ink-800:  #3F342C;
  --ink-700:  #5B4D43;
  --ink-600:  #7A6B61;
  --ink-500:  #9A8D83;
  --ink-400:  #B9AFA5;
  --ink-300:  #D6CDC2;
  --ink-200:  #E8DFD3;
  --ink-100:  #F2EBE0;
  --ink-50:   #F8F4EC;

  /* ── Couleurs · Surfaces ── */
  --canvas:    #FAF6EF;   /* fond app */
  --surface:   #FFFFFF;   /* cartes */
  --surface-2: #F8F4EC;   /* surface alt / accordion fermé */

  /* ── Couleurs · Primary (terracotta) ── */
  --terra-900: #6B2E18;
  --terra-800: #84381F;
  --terra-700: #9B4427;
  --terra-600: #B5573A;   /* primary */
  --terra-500: #C97050;
  --terra-400: #D89274;
  --terra-300: #E5B49D;
  --terra-200: #F0CFBA;
  --terra-100: #F7E2D2;
  --terra-50:  #FBEFE5;

  /* ── Couleurs · Accent (sauge — pour focus/info) ── */
  --sage-700: #3F6253;
  --sage-600: #527867;
  --sage-500: #6B9382;
  --sage-200: #C8DAD0;
  --sage-100: #DCE8E1;
  --sage-50:  #ECF2EE;

  /* ── Couleurs · Feedback ── */
  --success-700: #3E6E50;
  --success-600: #5C8A6C;
  --success-100: #DDEBDE;
  --success-50:  #ECF3EC;

  --danger-700:  #8E3025;
  --danger-600:  #B5493C;
  --danger-100:  #F4DBD4;
  --danger-50:   #FBEDE8;

  --warning-700: #8E6418;
  --warning-600: #B68729;
  --warning-100: #F4E4BC;
  --warning-50:  #FAF1D8;

  /* ── Rôles sémantiques ── */
  --color-text:        var(--ink-900);
  --color-text-muted:  var(--ink-600);
  --color-text-subtle: var(--ink-500);
  --color-text-on-primary: #FFFFFF;

  --color-border:        var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-border-focus:  var(--terra-600);

  --color-primary:        var(--terra-600);
  --color-primary-hover:  var(--terra-700);
  --color-primary-active: var(--terra-800);
  --color-primary-soft:   var(--terra-100);
  --color-primary-tint:   var(--terra-50);

  /* ── Typo ── */
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale · mobile par défaut, surchargé desktop ci-dessous */
  --fs-display: 32px;   --lh-display: 1.15;
  --fs-h1:      26px;   --lh-h1:      1.22;
  --fs-h2:      20px;   --lh-h2:      1.30;
  --fs-h3:      17px;   --lh-h3:      1.40;
  --fs-body:    16px;   --lh-body:    1.55;
  --fs-small:   14px;   --lh-small:   1.45;
  --fs-micro:   12px;   --lh-micro:   1.40;
  --fs-label:   12px;   --lh-label:   1.30;
  --ls-label:   0.06em;

  /* ── Spacing (4-px grid) ── */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  28px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;

  /* ── Radii ── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ── Shadows (chaudes, très légères) ── */
  --sh-1: 0 1px 2px rgba(40, 28, 20, 0.04), 0 1px 1px rgba(40, 28, 20, 0.03);
  --sh-2: 0 4px 12px rgba(40, 28, 20, 0.06), 0 2px 4px rgba(40, 28, 20, 0.04);
  --sh-3: 0 12px 32px rgba(40, 28, 20, 0.10), 0 4px 8px rgba(40, 28, 20, 0.05);
  --sh-focus: 0 0 0 3px rgba(181, 87, 58, 0.22);
  --sh-focus-sage: 0 0 0 3px rgba(82, 120, 103, 0.22);

  /* ── Layout ── */
  --container-max: 720px;     /* form Phase 0 */
  --container-wide: 1200px;   /* planning Phase 1 desktop */
  --touch-target: 44px;       /* minimum tactile */
}

/* ── Tailles desktop (≥ 768px) ── */
@media (min-width: 768px) {
  :root {
    --fs-display: 48px;  --lh-display: 1.10;
    --fs-h1:      32px;  --lh-h1:      1.20;
    --fs-h2:      24px;  --lh-h2:      1.30;
    --fs-h3:      18px;  --lh-h3:      1.45;
    --fs-body:    16px;  --lh-body:    1.60;
    --fs-small:   14px;  --lh-small:   1.50;
  }
}

/* ── Dark mode (discret, opt-in système) ── */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"],
  :root[data-theme="dark"] {
    --canvas:    #1A1612;
    --surface:   #221C18;
    --surface-2: #2A2320;

    --color-text:        #F2EBE0;
    --color-text-muted:  #B9AFA5;
    --color-text-subtle: #9A8D83;

    --color-border:        #3A302A;
    --color-border-strong: #4A3F37;

    --color-primary:        #D89274;
    --color-primary-hover:  #E5B49D;
    --color-primary-active: #F0CFBA;
    --color-primary-soft:   #3D2A20;
    --color-primary-tint:   #2B1F18;
  }
}