/* ============================================================
   CLUBER — COLOR TOKENS
   A warm, cozy "home library" palette: clean white reading
   surface against dark walnut-wood chrome, with a confident
   accent red and a friendly CTA orange.
   ============================================================ */
:root {
  /* — Brand core — */
  --red-600:        #ca3627;  /* accent red — pills, logo "ер", highlights, breaking badge */
  --red-700:        #a82a1d;  /* red pressed / darker */
  --red-500:        #d9483a;  /* red hover / lighter */

  --orange-500:     #ff6c24;  /* CTA orange — primary buttons (from live site #ff6c24) */
  --orange-600:     #ec5e18;  /* orange hover/pressed */
  --orange-400:     #ff6c2433;/* soft orange glow tint */

  /* — Walnut wood neutrals (chrome: header / footer / splash) — */
  --walnut-900:     #211208;  /* deepest footer base */
  --walnut-800:     #2a1a11;  /* footer body */
  --walnut-700:     #322016;  /* header / footer texture base */
  --walnut-600:     #4a3424;  /* raised wood / hairlines on dark */
  --walnut-ink:     #0d0907;  /* paint-splatter banner black */

  /* — Reading surface neutrals — */
  --white:          #ffffff;  /* content background, cards */
  --paper:          #f6f8f1;  /* greenish off-white panel bg (author/section, live #f6f8f1) */
  --paper-quote:    #f7f9f3;  /* faint quote/widget bg */
  --ink-900:        #1e1e1e;  /* primary body text (near-black) */
  --ink-700:        #3a3a3a;  /* strong secondary text */
  --gray-600:       #6f6f6f;  /* muted excerpt / meta text */
  --gray-500:       #999999;  /* job titles / faint labels (live #999) */
  --gray-400:       #9b9b9b;  /* faint meta / icons */
  --gray-200:       #ece8e0;  /* warm hairline / borders */
  --gray-100:       #f1ede8;  /* card image placeholder / track */

  /* — Brown UI accents (search, lang, sub-nav) — */
  --brown-border:   #614835;  /* search field border / current lang */
  --brown-text:     #846142;  /* search input text */
  --brown-muted:    #8f6f54;  /* footer body text / sub-nav labels */
  --tan-link:       #c4ac81;  /* footer links */
  --reading-red:    #cc0000;  /* reading-time icon */

  /* — Quote / info block — */
  --quote-bg:       #eef1f6;  /* light blue-grey pull-quote panel */
  --quote-bar:      var(--red-600);

  /* — On-dark text (over walnut) — */
  --on-dark:        #ffffff;  /* primary text on wood (nav links are #fff) */
  --on-dark-muted:  #c4ac81;  /* footer links (live #c4ac81) */
  --on-dark-faint:  #8f6f54;  /* footer body copy (live #8f6f54) */

  /* ===== Semantic aliases ===== */
  --bg-page:            var(--white);
  --bg-section:         var(--paper);
  --bg-chrome:          var(--walnut-700);
  --bg-chrome-deep:     var(--walnut-800);
  --surface-card:       var(--white);

  --text-body:          var(--ink-900);
  --text-strong:        var(--ink-900);
  --text-muted:         var(--gray-600);
  --text-faint:         var(--gray-400);
  --text-on-dark:       var(--on-dark);
  --text-on-dark-muted: var(--on-dark-muted);
  --text-link:          var(--red-600);

  --accent:             var(--red-600);
  --accent-hover:       var(--red-500);
  --accent-press:       var(--red-700);
  --cta:                var(--orange-500);
  --cta-hover:          var(--orange-600);

  --pill-bg:            var(--red-600);
  --pill-text:          var(--white);

  --border:             var(--gray-200);
  --border-on-dark:     var(--walnut-600);
}