/* ============================================================================
   KIBO School — DESIGN TOKENS  ·  theme/tokens.css
   ----------------------------------------------------------------------------
   THE single source of truth for the palette. Re-theming = edit THIS file only
   (CLAUDE.md §6/§9). tailwind.config (in base.html) maps every utility back to
   these variables, so no color/font/radius is ever hard-coded in a template.

   Identity "KIBO School" (designer hand-off): warm cream + sage green +
   terracotta, with honey (S'informer), mauve (Soutenir) and slate (École /
   Pronote source) as accents. Fonts: Fraunces (display) + DM Sans (body).
   The 4 pillars: Échanger=sage · S'informer=honey · Participer=terracotta ·
   Soutenir=mauve.
   ========================================================================== */

:root {
  /* --- Surfaces --- */
  --color-bg:      #FBF6EC;   /* warm cream — global background */
  --color-bg-alt:  #F2ECDD;   /* alternate section background */
  --color-surface: #FFFFFF;   /* white — cards */
  --color-border:  #ECE2CF;   /* warm light border */

  /* --- Text --- */
  --color-ink:   #2B2A26;     /* titles / strong text */
  --color-muted: #6A6C5D;     /* secondary text */
  --color-faint: #9A988D;     /* faint labels / timestamps */

  /* --- Brand: sage green (primary) --- */
  --color-primary:       #7E9B7A;  /* CTA, links, "Échanger" */
  --color-primary-hover: #5E7357;
  --color-primary-deep:  #3A4430;  /* footer / deep accents */

  /* --- Brand: terracotta (secondary / accent) --- */
  --color-secondary:       #C47A5A;  /* accent, "Participer", prices */
  --color-secondary-hover: #B05F3D;

  /* --- Pillar / accent colors --- */
  --color-honey:      #D9A441;  /* "S'informer" */
  --color-honey-ink:  #B8860F;
  --color-mauve:      #9B6A6A;  /* "Soutenir" */
  --color-mauve-ink:  #8A5A5A;
  --color-school:     #5B7A8C;  /* source: École / Pronote */
  --color-school-ink: #4D6B7C;

  /* --- Tints (pale backgrounds for chips / cards) --- */
  --tint-sage:       #E8EEDF;
  --tint-terracotta: #F4E6DB;
  --tint-honey:      #F6EBD2;
  --tint-mauve:      #F2E6E6;
  --tint-school:     #E7EEF2;

  /* --- Category pastels (reuse the KIBO School tints) --- */
  --cat-ski:     #E8EEDF;  /* sage        */
  --cat-climb:   #F4E6DB;  /* terracotta  */
  --cat-bike:    #F6EBD2;  /* honey       */
  --cat-clothes: #EFE7D8;  /* warm beige  */

  /* --- Step / category icon pill --- */
  --icon-bg:  var(--tint-sage);
  --icon-ink: var(--color-primary);

  /* --- Radii --- */
  --radius-card:  16px;
  --radius-tile:  18px;
  --radius-panel: 22px;  /* large feature panels / pillar cards */
  --radius-btn:   12px;  /* solid action buttons */
  --radius-band:  24px;
  --radius-pill:  999px;

  /* --- Typography --- */
  --font-display: "Fraunces", Georgia, serif;       /* titles, wordmark */
  --font-body:    "DM Sans", system-ui, sans-serif; /* body, UI */

  /* --- Shadow --- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(90, 80, 60, .06);

  /* --- Misc --- */
  --band-input-border: rgba(255, 255, 255, .45);  /* translucent border on the green band */
}