/* ==========================================================================
   Option Scheme — brand palette
   --------------------------------------------------------------------------
   The brand is exactly three colors:
     Cream  #F5E6CA   (--cream-200)
     Coral  #FF7F50   (--coral-400)
     Teal   #0F766E   (--teal-600)
   Every other value below is a tint/shade of one of them, plus a separate
   set of market colors (gains/losses) that must never be confused with
   the brand accents.

   Contrast rules (WCAG AA = 4.5:1 for body text), measured:
     - Coral is a FILL, not a text color on light backgrounds:
         coral on cream 2.03, white on coral 2.50  -> fail
         ink (--teal-950) on coral 7.15            -> pass  (coral buttons use dark text)
         --coral-700 on --cream-50 4.80            -> use when coral must be text on light
     - Teal 600 on cream 200 is 4.44 (just under AA): links/text on cream use
       --teal-700 (7.08); white on --teal-600 buttons is 5.47 -> pass.
     - Muted text: light #586257 = 6.00 on --cream-50; dark #ADA995 = 7.56 on --teal-950.

   Not wired into any page yet — the homepage redesign is the first consumer.
   ========================================================================== */

:root {
  /* ── Brand scales ─────────────────────────────────────────────────────── */
  --teal-50:  #ECF4F3;
  --teal-100: #D4E6E5;
  --teal-200: #A9CECB;
  --teal-300: #79B2AE;
  --teal-400: #44948E;
  --teal-500: #22817A;
  --teal-600: #0F766E;   /* brand */
  --teal-700: #0C5F59;
  --teal-800: #0A4C47;
  --teal-900: #083935;
  --teal-950: #041B19;   /* "ink": darkest text / dark-mode background */

  --coral-50:  #FFF2EE;
  --coral-100: #FFE3D8;
  --coral-200: #FFC9B6;
  --coral-300: #FFAB8C;
  --coral-400: #FF7F50;  /* brand */
  --coral-500: #EA7044;
  --coral-600: #D35F38;
  --coral-700: #B94C2A;
  --coral-800: #9F391C;

  --cream-50:  #FCF8EF;
  --cream-100: #F9F0DF;
  --cream-200: #F5E6CA;  /* brand */
  --cream-300: #E5D3B4;
  --cream-400: #D3BE9C;
  --cream-500: #A89679;
  --cream-600: #81735D;

  /* ── Semantic tokens: light theme (default) ───────────────────────────── */
  --color-bg:            var(--cream-50);
  --color-bg-alt:        var(--cream-200);   /* banded sections, hero */
  --color-surface:       #FFFFFF;
  --color-surface-muted: var(--cream-100);
  --color-border:        var(--cream-300);
  --color-border-strong: var(--cream-400);

  --color-text:          var(--teal-950);
  --color-text-muted:    #586257;
  --color-heading:       var(--teal-900);
  --color-link:          var(--teal-700);
  --color-link-hover:    var(--teal-800);

  --color-primary:            var(--teal-600);
  --color-primary-hover:      var(--teal-700);
  --color-on-primary:         #FFFFFF;
  --color-accent:             var(--coral-400);
  --color-accent-hover:       var(--coral-500);
  --color-on-accent:          var(--teal-950);
  --color-accent-text:        var(--coral-700);   /* coral used as text on light */

  --color-focus-ring:    rgba(15, 118, 110, 0.35);

  /* Market colors — deliberately NOT the brand teal/coral */
  --color-gain:          #15803D;
  --color-loss:          #B91C1C;
}

/* ── Semantic tokens: dark theme ───────────────────────────────────────── */
html.dark {
  --color-bg:            var(--teal-950);
  --color-bg-alt:        var(--teal-900);
  --color-surface:       #0A2724;
  --color-surface-muted: var(--teal-900);
  --color-border:        rgba(245, 230, 202, 0.12);
  --color-border-strong: rgba(245, 230, 202, 0.22);

  --color-text:          var(--cream-200);
  --color-text-muted:    #ADA995;
  --color-heading:       var(--cream-50);
  --color-link:          var(--teal-300);
  --color-link-hover:    var(--teal-200);

  --color-primary:            var(--teal-500);
  --color-primary-hover:      var(--teal-400);
  --color-on-primary:         #FFFFFF;
  --color-accent:             var(--coral-400);
  --color-accent-hover:       var(--coral-300);
  --color-on-accent:          var(--teal-950);
  --color-accent-text:        var(--coral-400);   /* 7.15 on --teal-950 */

  --color-focus-ring:    rgba(255, 127, 80, 0.40);

  --color-gain:          #4ADE80;
  --color-loss:          #F87171;
}