/* ═══════════════════════════════════════════════════════════════════
   MonCanevas — "La Grille" v3 Design System
   DMC Laine Colbert tapestry wool · Bazi-adjusted palette
   Grid 10×10 structural device · Geometric SVG icons
   ═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Space+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;700&display=swap&subset=latin,latin-ext');

/* ── Design Tokens ────────────────────────────────────── */
:root {
  /* ══ Palette — DMC Laine Colbert Wool ══ */
  --dmc-garance:    #8B2E2E;   /* DMC 304 — primary, fire 🔥 */
  --dmc-vermillon:  #C44536;   /* DMC 666 — CTA, accent */
  --dmc-rouge:      #B22222;   /* DMC 347 — dark red, hover */
  --dmc-sauge:      #5A7A5A;   /* DMC 926 — success, wood 🪵 */
  --dmc-olive:      #6B7B3A;   /* DMC 731 — borders, grid lines */
  --dmc-moutarde:   #C4A43E;   /* DMC 742 — highlight, gold */
  --toile-ecru:     #F2EEE6;   /* canvas base, earth 🏔️ */
  --laine-noire:    #1C1C1C;   /* wool black, text */
  --laine-blanche:  #FFFFFF;   /* white, cards */
  --laine-pierre:   #6B6560;   /* stone, secondary text */

  /* ══ Typography ══ */
  --font-display:   'DM Serif Text', Georgia, 'Times New Roman', serif;
  --font-body:      'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  --text-xs:   0.7rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;


  /* ══ Spacing — 10px grid base ══ */
  --space-1:  0.625rem;   /* 10px */
  --space-2:  1.25rem;    /* 20px */
  --space-3:  2.5rem;     /* 40px — one grid cell */
  --space-4:  3.75rem;    /* 60px */
  --space-5:  5rem;       /* 80px */
  --max-width: 72rem;     /* 1152px */

  /* ══ Grid 10×10 Convention ══ */
  --border-bold: 3px solid var(--laine-noire);
  --border-thin: 1px solid var(--dmc-olive);

  /* ══ Borders ══ */
  --radius-sm: 2px;
  --radius-md: 4px;


  /* ══ Shadows — hard offset (tapestry blocks) ══ */
  --shadow-card: 2px 2px 0 var(--laine-noire);
  --shadow-cta:  3px 3px 0 var(--dmc-garance);
  --shadow-lg:   4px 4px 0 var(--dmc-garance);

  /* ══ Transitions ══ */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 150ms;
  --slow: 400ms;

  /* ══ Legacy aliases (maps old variable names to new tokens) ══ */
  --bleu:      #1E3A5F;   /* → laine-noire tint */
  --blanc:     #FFFFFF;   /* → laine-blanche */
  --pierre:    #6B6560;   /* → laine-pierre */
  --terracotta:#C4553D;   /* → dmc-vermillon */
  --fil:       #D4CFC6;   /* → border/grid color */
  --encre:     #1C1C1C;   /* → laine-noire */
  --sauge:     #5A7A5A;   /* → dmc-sauge */
  --laine:     #FAF7F2;   /* → toile-ecru tint */

  /* ── Missing variables (were used but never defined) ── */
  --space-xs:  0.4rem;      /* ~6px — smallest spacing */
  --space-sm:  0.8rem;      /* ~13px — tight spacing */
  --space-md:  1.5rem;      /* ~24px — moderate spacing */
  --space-lg:  3rem;        /* ~48px — generous spacing */
  --space-xl:  4rem;        /* ~64px — large spacing */
  --space-2xl: 6rem;        /* ~96px — extra large spacing */
  --space-3xl: 8rem;        /* ~128px — hero/footer section padding */
  --space-0:   0;           /* zero — explicit none */



  --error:    #C44536;      /* error/danger color (same as vermillon) */
  --canvas:   #F2EEE6;      /* admin body background (same as toile-ecru) */
}