/* ============================================================
   COLORS — Jovan personal brand
   Warm, retro-friendly, anti-corporate. Peach + espresso + sage.
   ============================================================ */

:root {
  /* --- Peach / apricot (primary warm background) --- */
  --peach-50:  #FDF4E8;
  --peach-100: #FBE9D2;
  --peach-200: #FADDBB;
  --peach-300: #F4E9DA;  /* primary page background */
  --peach-400: #F4B97E;
  --peach-500: #EDA661;

  /* --- Espresso (dark sections, footer, navbar) --- */
  --espresso-950: #15100B;
  --espresso-900: #1F1812;
  --espresso-800: #2A211A;  /* main dark section background */
  --espresso-700: #3A2E24;
  --espresso-600: #4E3E31;
  --espresso-500: #6B5848;

  /* --- Cream / off-white (text + surfaces on dark) --- */
  --cream-50:  #FCF6EC;
  --cream-100: #F4E9DA;  /* primary text on dark */
  --cream-200: #E9DAC4;
  --cream-300: #D8C4A8;

  /* --- Sage (sparingly used accent) --- */
  --sage-200: #C5E4C3;
  --sage-300: #A8D5A6;
  --sage-400: #8BC48A;  /* accent — emphasis words in headlines */
  --sage-500: #6FAF6E;
  --sage-600: #58965A;

  /* --- Ink (near-black text on light) --- */
  --ink:       #1A1410;
  --ink-soft:  #4A3F35;  /* muted body text on peach */

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

  /* Surfaces */
  --surface-page:    var(--peach-300);
  --surface-peach:   var(--peach-300);
  --surface-dark:    var(--espresso-800);
  --surface-darker:  var(--espresso-900);
  --surface-card:    var(--cream-50);

  /* Text */
  --text-strong:        var(--ink);
  --text-body:          var(--ink);
  --text-muted:         var(--ink-soft);
  --text-on-dark:       var(--cream-100);
  --text-on-dark-muted: var(--cream-300);

  /* Accent */
  --accent:        var(--sage-400);
  --accent-strong: var(--sage-500);

  /* Lines & frames */
  --frame:        var(--espresso-800);  /* thin dark photo frame */
  --border-soft:  rgba(26, 20, 16, 0.14);
  --border-dark:  rgba(244, 233, 218, 0.16);

  /* Buttons */
  --btn-fill:       var(--espresso-800);
  --btn-fill-hover: var(--espresso-900);
  --btn-label:      var(--cream-50);
}