/* ===========================================================================
   roastynote — Color tokens
   ---------------------------------------------------------------------------
   A warm, material palette: roast-cream papers, sage stone, terracotta ember,
   brass ochre, espresso ink. Anchored on the architectural reference
   (--mist #cacfcb, --ember #952c16) and warmed toward "roast".
   Base scales first; semantic aliases at the bottom — design with the aliases.
   =========================================================================== */

:root {
  /* ---- Paper & surface neutrals (warm) ---------------------------------- */
  --paper:      #F4EFE6;  /* primary page background — warm cream */
  --shell:      #EBE4D6;  /* raised sections, large panels */
  --bone:       #DED6C6;  /* card / inset surface */
  --linen:      #D2C9B6;  /* hairline-on-cream, muted chips */

  /* ---- Stone (cool sage greys, from the reference) ---------------------- */
  --mist:       #C9CEC9;  /* sage stone — secondary surface, dividers */
  --ash:        #9A968C;  /* warm mid grey — muted text, icons */
  --slate-stone:#6F6E66;  /* deep stone */

  /* ---- Ink (warm near-blacks) ------------------------------------------- */
  --umber:      #6B5E50;  /* secondary / supporting text */
  --espresso:   #2A2019;  /* primary text, dark surfaces */
  --ink:        #14110D;  /* deepest — full-bleed dark, footers */

  /* ---- Ember (terracotta / brick — primary brand accent) ---------------- */
  --ember-50:   #F6E7E0;
  --ember-100:  #ECC9BB;
  --ember-300:  #CF7C5E;
  --ember:      #952C16;  /* core accent — links, primary action */
  --ember-700:  #7A2411;
  --ember-900:  #51190C;
  --clay:       #B96A45;  /* lighter terracotta — hover, secondary accent */

  /* ---- Ochre (brass / mustard — tertiary, from the photography) --------- */
  --ochre-100:  #E6D6AE;
  --ochre:      #9C7A33;
  --ochre-700:  #6F5621;

  /* ---- Absolutes -------------------------------------------------------- */
  --white:      #FFFFFF;
  --black:      #000000;

  /* =========================================================================
     SEMANTIC ALIASES — prefer these in components & screens
     ========================================================================= */

  /* Surfaces */
  --surface-page:     var(--paper);
  --surface-raised:   var(--shell);
  --surface-card:     var(--bone);
  --surface-inverse:  var(--ink);
  --surface-stone:    var(--mist);

  /* Text */
  --text-primary:     var(--espresso);
  --text-secondary:   var(--umber);
  --text-muted:       var(--ash);
  --text-inverse:     var(--paper);
  --text-on-accent:   var(--paper);
  --text-accent:      var(--ember);

  /* Lines & borders */
  --border-hairline:  color-mix(in oklab, var(--espresso) 14%, transparent);
  --border-strong:    var(--espresso);
  --border-stone:     var(--mist);
  --border-on-dark:   color-mix(in oklab, var(--paper) 18%, transparent);

  /* Interactive / brand */
  --accent:           var(--ember);
  --accent-hover:     var(--ember-700);
  --accent-soft:      var(--ember-50);
  --accent-2:         var(--ochre);

  /* Feedback (kept muted & warm) */
  --success:          #5E6B43;  /* olive */
  --success-soft:     #E6E7D6;
  --warning:          #9C7A33;  /* ochre */
  --warning-soft:     #EFE3C4;
  --danger:           #952C16;  /* ember */
  --danger-soft:      #F6E7E0;
  --info:             #3F4A57;  /* slate ink */
  --info-soft:        #DDE2E6;

  /* Focus ring */
  --focus-ring:       color-mix(in oklab, var(--ember) 55%, transparent);

  /* Scrim / overlay */
  --scrim:            color-mix(in oklab, var(--ink) 60%, transparent);
}