/* Color tokens — SINGLE SOURCE OF TRUTH (Ferella Interiors · Quiet Luxury).
 *
 * Direct hex/rgb usage in components is FORBIDDEN — always reference a token
 * below. Values were lifted 1:1 from the Claude Design export (styles.css :root
 * + every raw hex/rgba that lived inside page styles), so the rendered look is
 * identical while raw colors now exist in exactly one place.
 *
 * Naming: the site's own vocabulary (--bg / --ink / --line / --accent …) is the
 * primary set. The generic template names (--fg, --rule, --link …) are kept as
 * ALIASES at the bottom so the self-contained legal shells (legal.css) compose
 * from the same palette.
 */
:root {
  /* ----- RGB triplets (for alpha variants: rgba(var(--ink-rgb), .14)) ----- */
  --ink-rgb:   42, 33, 24;     /* chocolate */
  --night-rgb: 10, 8, 5;       /* hero scrim base */
  --cream-rgb: 240, 232, 218;  /* light text on imagery */

  /* ----- Backgrounds — off-whites & chocolate ----- */
  --bg:        #F5F1EA;   /* bone · page default */
  --bg-alt:    #EDE7DD;   /* paper · soft section band */
  --bg-deep:   #2A2118;   /* chocolate · dark rooms / footer */
  --paper:     #FBF8F2;   /* warm raised (no pure white) */
  --night:     #0a0805;   /* hero backdrop behind the image */

  /* ----- Foregrounds — chocolate / taupe / stone ----- */
  --ink:       #2A2118;   /* primary text */
  --ink-soft:  #7E6F58;   /* taupe · body / secondary */
  --ink-mute:  #9C8E76;   /* stone · captions / meta */

  /* ----- Borders — hairlines only, warm ink at low alpha ----- */
  --line:        rgba(var(--ink-rgb), 0.14);
  --line-soft:   rgba(var(--ink-rgb), 0.08);
  --line-strong: rgba(var(--ink-rgb), 0.30);

  /* ----- Accent — taupe, used sparingly ----- */
  --accent:    #7E6F58;

  /* ----- Text & lines ON DARK surfaces (footer, .section--deep, hero) ----- */
  --on-deep:        #f1ece3;  /* headlines, footer wordmark, buttons on deep */
  --on-deep-hi:     #f2ece2;  /* hero title, lightbox close */
  --on-deep-soft:   #e9e3d6;  /* body on deep, button borders on deep */
  --on-deep-muted:  #c8c2b6;  /* footer default text */
  --on-deep-body:   #b9b3a6;  /* .body-text on deep */
  --on-deep-mute:   #9b9488;  /* eyebrows / small print on deep */
  --on-deep-label:  #8a8478;  /* footer column headings */
  --on-deep-faint:  #6f6a60;  /* footer legal row */
  --on-deep-white:  #ffffff;  /* footer link hover */
  --on-deep-gold:   #d8c8a8;  /* outro link hover */
  --line-on-deep:   #3a3631;  /* footer hairline */

  /* ----- Surfaces with alpha ----- */
  --header-bg:   rgba(243, 241, 236, 0.88);        /* sticky header glass */
  --error-bg:    #5e3b34;                          /* restrained brick (form error toast) */

  /* ----- States ----- */
  --focus-ring:    rgba(126, 111, 88, 0.45);
  --hover-overlay: rgba(var(--ink-rgb), 0.04);
  --press-overlay: rgba(var(--ink-rgb), 0.08);

  /* ----- Template aliases (used by legal.css; never redefine, only map) ----- */
  --fg:            var(--ink);
  --fg-muted:      var(--ink-soft);
  --fg-subtle:     var(--ink-mute);
  --surface:       var(--paper);
  --surface-faint: var(--hover-overlay);
  --accent-hover:  var(--ink);
  --accent-wash:   var(--press-overlay);
  --rule:          var(--line);
  --link:          var(--fg);
  --link-hover:    var(--accent);
}