/* ===========================================================================
   COLORS
   ---------------------------------------------------------------------------
   A warm, calm, professional system.
     • Sage (green) is the BRAND — primary actions, links, the workhorse hue.
     • Amber (#E6AC0C) is the signature ACCENT — the mark, eyebrows, selected
       states, the single warm pop per view.
     • Clay (orange) is the supporting warm accent.
     • Neutrals are warm stone — never pure gray — so the whole system reads warm.
   =========================================================================== */

:root {
  /* --- Amber — signature accent ----------------------------------------- */
  --amber-50:  #FDF6E3;
  --amber-100: #FBEBC2;
  --amber-200: #F6D88C;
  --amber-300: #F0C455;
  --amber-400: #EBB528;
  --amber-500: #E6AC0C;  /* accent */
  --amber-600: #C28E07;
  --amber-700: #956C0A;
  --amber-800: #6D5009;
  --amber-900: #473408;

  /* --- Sage — brand (primary) green ------------------------------------- */
  --sage-50:  #F1F5EF;
  --sage-100: #E0E9DB;
  --sage-200: #C5D7BC;
  --sage-300: #A6C19A;
  --sage-400: #86A878;
  --sage-500: #6E9160;
  --sage-600: #56744B;
  --sage-700: #42593A;
  --sage-800: #31432B;
  --sage-900: #22301E;

  /* --- Clay — pastel orange accent -------------------------------------- */
  --clay-50:  #FBF1EA;
  --clay-100: #F6DCCB;
  --clay-200: #EDBF9F;
  --clay-300: #E29F74;
  --clay-400: #D5824F;
  --clay-500: #C56B34;
  --clay-600: #A45525;
  --clay-700: #7E421F;
  --clay-800: #5C311A;
  --clay-900: #3E2213;

  /* --- Stone — warm neutrals -------------------------------------------- */
  --stone-0:   #FFFFFF;
  --stone-50:  #FAF8F3;
  --stone-100: #F1ECE3;
  --stone-200: #E4DCD0;
  --stone-300: #CFC6B7;
  --stone-400: #A79E8D;
  --stone-500: #7D7464;
  --stone-600: #5A5346;
  --stone-700: #403A30;
  --stone-800: #29241D;
  --stone-900: #1A1611;

  /* --- Raw semantic hues ------------------------------------------------ */
  --green:  var(--sage-600);
  --red:    #C0492F;
  --red-bg: #F7E1DB;
  --teal:   #3C7D74;
  --teal-bg:#DCEAE6;

  /* =========================================================================
     SEMANTIC ALIASES — reference these in product code, not the raw scales.
     ========================================================================= */

  /* Surfaces / backgrounds */
  --bg-page:     var(--stone-50);
  --bg-surface:  var(--stone-0);
  --bg-subtle:   var(--stone-100);
  --bg-inset:    var(--stone-100);
  --bg-inverse:  var(--stone-900);
  --bg-brand-subtle:  var(--sage-50);
  --bg-accent-subtle: var(--amber-50);

  /* Text */
  --text-primary:   var(--stone-900);
  --text-secondary: var(--stone-600);
  --text-muted:     var(--stone-500);
  --text-inverse:   var(--stone-50);
  --text-accent:    var(--sage-700);    /* links + accent text read green */
  --text-on-brand:  var(--stone-50);    /* sage is dark — use light text */
  --text-on-accent: var(--stone-900);   /* amber is light — use dark text */
  --text-accent-ink: var(--amber-700);  /* amber-colored eyebrows / metadata */

  /* Borders */
  --border-subtle:  var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong:  var(--stone-400);
  --border-brand:   var(--sage-500);
  --border-accent:  var(--amber-400);

  /* Brand — sage (green), the workhorse */
  --brand:        var(--sage-600);
  --brand-hover:  var(--sage-700);
  --brand-press:  var(--sage-800);
  --brand-tint:   var(--sage-100);

  /* Accent — amber (#E6AC0C), the signature pop */
  --accent:        var(--amber-500);
  --accent-hover:  var(--amber-600);
  --accent-press:  var(--amber-700);
  --accent-tint:   var(--amber-100);

  /* Status — foreground / background pairs */
  --success:     var(--sage-700);
  --success-bg:  var(--sage-100);
  --warning:     var(--amber-700);
  --warning-bg:  var(--amber-100);
  --danger:      var(--red);
  --danger-bg:   var(--red-bg);
  --info:        var(--teal);
  --info-bg:     var(--teal-bg);

  /* Focus ring — green, matches the primary action color */
  --ring: 0 0 0 3px rgba(86, 116, 75, 0.32);
}