/* ============================================================
   StackForBrands — Color tokens
   Palette: deep forest green + warm amber/gold accent on
   warm "paper" neutrals. Editorial, premium, trustworthy.
   ============================================================ */

:root {
  /* ---- Brand green scale ---------------------------------- */
  --green-950: #081d16;
  --green-900: #0c2a20;
  --green-800: #13352b; /* brand theme color (live site meta) */
  --green-700: #1b4a3a;
  --green-600: #245c49;
  --green-500: #2f7359;
  --green-400: #459a78;
  --green-300: #7bbca1;
  --green-200: #b3d9c8;
  --green-100: #dcefe6;
  --green-50:  #eef6f1;

  /* ---- Accent — warm amber / gold ------------------------- */
  --amber-700: #9a6a1f;
  --amber-600: #b9842e;
  --amber-500: #d29a3e; /* primary accent */
  --amber-400: #e0b059;
  --amber-300: #ecca8b;
  --amber-200: #f4dfb8;
  --amber-100: #faefd9;

  /* ---- Warm neutral "paper" scale ------------------------- */
  --paper:     #fbfaf6; /* app background */
  --paper-sunk:#f4f2ea; /* sunken sections, alt rows */
  --paper-card:#ffffff; /* card surface */
  --ink-950:   #10180f;
  --ink-900:   #16201c; /* primary text (near-black, green-tinted) */
  --ink-800:   #283330;
  --ink-700:   #3a4540; /* strong body text */
  --ink-500:   #6b746f; /* secondary text */
  --ink-400:   #8c948f;
  --ink-300:   #aeb4b0; /* disabled / placeholder */
  --line-300:  #e3e1d8; /* default hairline border (warm) */
  --line-200:  #ecebe3;
  --line-100:  #f3f2ec;

  /* ---- Semantic status ------------------------------------ */
  --success-600:#1f7a52;
  --success-100:#dcefe6;
  --warning-600:#b9842e;
  --warning-100:#faefd9;
  --danger-600: #b6453a;
  --danger-100: #f6e2df;
  --info-600:   #2f6f8f;
  --info-100:   #ddeef4;

  /* ---- Rating ------------------------------------------------ */
  --star-on:  var(--amber-500);
  --star-off: #e3ddcd;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --bg-app:        var(--paper);
  --bg-sunk:       var(--paper-sunk);
  --surface-card:  var(--paper-card);
  --surface-inverse: var(--green-800);

  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-on-dark:  #f3f6f2;
  --text-on-dark-muted: #aec4ba;

  --brand:         var(--green-800);
  --brand-strong:  var(--green-900);
  --brand-soft:    var(--green-100);

  --accent:        var(--amber-500);
  --accent-strong: var(--amber-600);
  --accent-soft:   var(--amber-100);

  --border:        var(--line-300);
  --border-soft:   var(--line-200);

  /* Interactive — primary button (dark green) */
  --btn-primary-bg:       var(--green-800);
  --btn-primary-bg-hover: var(--green-700);
  --btn-primary-bg-press: var(--green-900);
  --btn-primary-fg:       #f3f6f2;

  /* Interactive — accent button (gold, for affiliate CTAs) */
  --btn-accent-bg:        var(--amber-500);
  --btn-accent-bg-hover:  var(--amber-400);
  --btn-accent-bg-press:  var(--amber-600);
  --btn-accent-fg:        var(--green-950);

  --focus-ring:    color-mix(in oklab, var(--green-500) 55%, white);

  /* Link */
  --link:          var(--green-700);
  --link-hover:    var(--green-900);
}