/* ── Kerstin Rachfahl — Color tokens ──────────────────────────────────
   Rule of the brand: PETROL is the only chromatic color and it means
   "interactive". Everything interactive (buttons, links, clickable book
   titles, hover) is petrol; everything that is plain text is black.
   No second accent color, no semantic color hierarchy — typography
   carries the rest of the hierarchy.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* Base palette */
  --petrol:        #1F4B4D;  /* accent — the click signal */
  --petrol-deep:   #163638;  /* hover / pressed petrol */
  --petrol-soft:   #38696B;  /* petrol on dark, subtle borders */
  --black:         #000000;  /* all text */
  --white:         #FFFFFF;  /* primary surface */
  --cream:         #FAF5EC;  /* warm section background */
  --cream-deep:    #F0EAE0;  /* footer / darker section */

  /* Tints used for hairlines & subtle fills (derived, low-chroma) */
  --ink-60:        rgba(0, 0, 0, 0.60);  /* secondary text */
  --ink-45:        rgba(0, 0, 0, 0.45);  /* meta / captions */
  --ink-12:        rgba(0, 0, 0, 0.12);  /* hairline borders */
  --ink-06:        rgba(0, 0, 0, 0.06);  /* faint dividers */
  --petrol-12:     rgba(31, 75, 77, 0.12); /* petrol hairline / focus ring */
  --petrol-06:     rgba(31, 75, 77, 0.06); /* petrol tint fill */

  /* ── Semantic aliases ─────────────────────────────────────────────── */
  --text-strong:      var(--black);
  --text-body:        var(--black);
  --text-muted:       var(--ink-60);
  --text-meta:        var(--ink-45);
  --text-on-petrol:   var(--white);
  --text-on-cream:    var(--black);

  --link:             var(--petrol);
  --link-hover:       var(--petrol-deep);
  --interactive:      var(--petrol);
  --interactive-hover:var(--petrol-deep);

  --surface-page:     var(--white);
  --surface-card:     var(--white);
  --surface-section:  var(--cream);     /* warm alternating section */
  --surface-footer:   var(--cream-deep);
  --surface-invert:   var(--petrol);    /* petrol block (white text) */

  --border-hairline:  var(--ink-12);
  --border-faint:     var(--ink-06);
  --focus-ring:       var(--petrol);
}