/* ============================================================
   Nueli — Colour
   Warm editorial neutrals + a single locked cobalt.
   RULE: --cobalt is the one bold colour. Use it once per screen,
   for the single most important thing. Never as a fill for
   multiple elements on the same view.
   ============================================================ */
:root {
  /* --- Warm neutrals (base ramp, ivory → ink) --- */
  --ivory:      #FBF9F4;  /* page background, cards */
  --sand:       #EFECE4;  /* surfaces, recessed areas */
  --sand-deep:  #E4E0D6;  /* hairlines, borders, dividers */
  --taupe:      #A19C90;  /* muted text, captions, meta */
  --stone:      #8C8779;  /* stronger muted / small-caps labels */
  --ink:        #33312C;  /* primary body text (warm near-black) */
  --ink-strong: #1A1A1A;  /* headings, emphasis */

  /* --- Cobalt — the one bold note (Yves Klein #002FA7, locked) --- */
  --cobalt:      #002FA7;
  --cobalt-deep: #00268A;  /* pressed / hover on cobalt fills */
  --cobalt-tint: #8093CF;  /* thin accents, rules, on-cobalt dividers */
  --cobalt-wash: #ECEEF6;  /* rare tinted surface behind cobalt content */

  /* --- Support (used sparingly; never competes with cobalt) --- */
  --success:  #4B6B4A;  /* warm sage, confirmations */
  --warning:  #9A6A2E;  /* amber-brown, gentle attention */
  --on-cobalt: #FBF9F4; /* text/icons on cobalt fills */

  /* --- Gold (offers and seals only) ---
     Once per page, on a single element. Never a background, never body
     text, never a button on a normal page. It marks an offer. */
  --gold:      #C8952B;
  --gold-deep: #A87A1E;  /* pressed state */
  --on-gold:   #1A1A1A;

  /* ---------- Semantic aliases ---------- */
  --bg:            var(--ivory);
  --surface:       var(--sand);
  --surface-card:  var(--ivory);
  --border:        var(--sand-deep);
  --border-strong: var(--taupe);

  --text:          var(--ink);
  --text-strong:   var(--ink-strong);
  --text-muted:    var(--taupe);
  --text-label:    var(--stone);

  --accent:        var(--cobalt);
  --accent-hover:  var(--cobalt-deep);
  --accent-line:   var(--cobalt-tint);
}