/* ============================================================
   Parqueterie des Alpes — Colour tokens
   ------------------------------------------------------------
   AUTHORITATIVE brand colours (from PdA_CHARTE_GRAPHIQUE_2026):
     BRUN         #493634   CMYK 52/62/55/64
     TAUPE CLAIR  #A89B94   CMYK 33/33/35/12
   These two + white + a technical near-black are the whole
   printed identity. Everything else below is a warm neutral
   ramp and an earthy semantic set DERIVED to extend the two
   brand hues into a usable UI system (see readme → Visual
   Foundations). Derived values are tuned in the same warm
   family; they are NOT from the charter.
   ============================================================ */

:root {
  /* ---- Brand core (charter) ---- */
  --pda-brun: #493634;          /* BRUN — primary */
  --pda-taupe: #a89b94;         /* TAUPE CLAIR — secondary */
  --pda-white: #ffffff;
  --pda-noir: #1c1614;          /* warm near-black, technical mark */

  /* ---- Warm neutral ramp (derived) ----
     A single wood-toned scale from paper-white down to the brun.
     Use for surfaces, text, borders. */
  --pda-cream-50:  #f7f4ef;     /* lightest paper */
  --pda-cream-100: #f2eee8;     /* PRIMARY page canvas (warm cream) */
  --pda-cream-200: #eae4db;     /* raised / alt surface */
  --pda-sand-300:  #ded5ca;     /* hairline borders, wells */
  --pda-stone-400: #c8bcb2;     /* disabled / faint lines */
  --pda-taupe-500: #a89b94;     /* = TAUPE CLAIR */
  --pda-taupe-600: #8c7e76;     /* muted text, captions */
  --pda-bark-700:  #6b524f;     /* secondary text, hover on brun */
  --pda-brun-800:  #493634;     /* = BRUN, body text on cream */
  --pda-brun-900:  #2e2220;     /* deepest, headings / near-black */

  /* charter shows the mountain motif at 20% — keep as a token */
  --pda-taupe-20: rgba(168, 155, 148, 0.2);
  --pda-brun-20:  rgba(73, 54, 52, 0.2);
  --pda-brun-08:  rgba(73, 54, 52, 0.08);

  /* ---- Semantic / status (DERIVED — earthy alpine set) ----
     The identity is two-colour; these muted naturals are added
     only so the UI layer can signal state. Flag when used. */
  --pda-pine:    #4f6149;       /* success — alpine pine */
  --pda-pine-bg: #e7ebe3;
  --pda-ochre:   #b07d2e;       /* warning — wood ochre */
  --pda-ochre-bg:#f4ebd9;
  --pda-brick:   #9e4a3c;       /* danger — terracotta */
  --pda-brick-bg:#f3e2dd;
  --pda-slate:   #5b6e7a;       /* info — alpine slate */
  --pda-slate-bg:#e3e9ec;

  /* ============================================================
     Semantic aliases — prefer these in components & UI
     ============================================================ */
  /* surfaces */
  --surface-page:    var(--pda-cream-100);
  --surface-raised:  var(--pda-cream-50);
  --surface-sunken:  var(--pda-cream-200);
  --surface-inverse: var(--pda-brun-900);
  --surface-brand:   var(--pda-brun);

  /* text */
  --text-strong:   var(--pda-brun-900);   /* headings */
  --text-body:     var(--pda-brun-800);   /* body copy */
  --text-muted:    var(--pda-taupe-600);  /* captions, meta */
  --text-faint:    var(--pda-stone-400);  /* placeholders */
  --text-on-brand: var(--pda-cream-50);   /* on brun */
  --text-on-image: var(--pda-white);

  /* lines & borders (the brand lives on 1px hairlines) */
  --border-hair:   var(--pda-sand-300);
  --border-strong: var(--pda-brun);
  --border-muted:  var(--pda-stone-400);

  /* interactive */
  --action:        var(--pda-brun);
  --action-hover:  var(--pda-brun-900);
  --action-press:  var(--pda-noir);
  --accent:        var(--pda-taupe);
  --focus-ring:    var(--pda-bark-700);
}