/* ============================================================
   7 Tones · Color
   A studio palette: sage-green paper grounds, Payne's-grey ink,
   and a small set of warm "tube paint" accents (coral, spring
   green, olive, kraft). Everything reads like pigment on paper,
   never digital. Base swatches first, semantic aliases below.
   ============================================================ */

:root {
  /* ---- Grounds (sage paper) ---- */
  --sage-100: #E5EEC9;   /* primary page ground */
  --sage-200: #D8E3B8;   /* warmer alternate band */
  --bone:     #E8DCC4;   /* image/placeholder fill, dark-bg text */
  --cream:    #FBF7EE;   /* text/fill on dark grounds */

  /* ---- Ink (Payne's grey family — primary brand color) ---- */
  --paynes:      #2A3441;  /* primary ink: buttons, dark ground, lines */
  --ink:         #2A2A2A;  /* body text */
  --ink-muted:   #5A5A55;  /* secondary text */
  --ink-light:   #888880;  /* eyebrows, captions, disabled */

  /* ---- Tube-paint accents (used small & sparingly) ---- */
  --coral:       #E89B7E;  /* signature warm accent block */
  --coral-deep:  #B85A2E;  /* coral as a label/text color */
  --terracotta:  #C26B47;  /* deeper warm (EN wordmark, links) */
  --spring-green:#8FAE5F;  /* fresh green accent block */
  --olive:       #A8AE5E;  /* olive wash overlay */
  --teal:        #1A9080;  /* cool accent label/text */
  --teal-deep:   #2A6D5E;  /* deeper teal label */
  --kraft:       #B89770;  /* kraft-paper strip */
  --kraft-line:  #7A6748;  /* ruled lines on kraft */

  /* ---- Hairlines & overlays ---- */
  --line-ink:    rgba(42,42,42,0.12);  /* default 0.5px hairline */
  --line-ink-strong: rgba(42,42,42,0.25);
  --line-light:  rgba(232,220,196,0.15); /* hairline on dark ground */

  /* ========================================================
     Semantic aliases — prefer these in components
     ======================================================== */
  --surface-page:    var(--sage-100);
  --surface-alt:     var(--sage-200);
  --surface-card:    rgba(251,247,238,0.6);  /* translucent bone card */
  --surface-inset:   var(--bone);            /* image wells, fields */
  --surface-dark:    var(--paynes);          /* footer, primary button */

  --text-strong:     var(--ink);
  --text-body:       #3A3A38;
  --text-muted:      var(--ink-muted);
  --text-faint:      var(--ink-light);
  --text-on-dark:    var(--cream);
  --text-on-dark-muted: #B5B0A0;

  --accent-warm:     var(--coral);
  --accent-warm-ink: var(--coral-deep);
  --accent-cool:     var(--teal);
  --accent-green:    var(--spring-green);

  --border-hair:     var(--line-ink);
  --border-strong:   var(--line-ink-strong);

  --button-bg:       var(--paynes);
  --button-text:     var(--cream);
  --link-underline:  var(--ink);
}