/* ── Design tokens — "Warm paper & ink" ──────────────────────
   Light: warm cream surfaces, soft ink text, terracotta accent,
          sage gains, brick losses.
   Dark:  warm espresso brown (never black), lifted terracotta.
   :root holds the dark theme; body.light-mode overrides it.   */
:root {
  /* ── Fonts ──────────────────────────────────────────────── */
  --font-sans:    'Karla', 'Helvetica Neue', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --font-display: 'Fraunces', serif;

  /* ── Espresso dark theme ────────────────────────────────── */
  --bg: #1f1913;
  --surface: #28211a;
  --surface2: #312820;
  --border: #41372b;
  --accent: #e0794a;
  --accent-text: #e58a5f;
  --accent-dim: rgba(224, 121, 74, 0.13);
  --accent-glow: rgba(224, 121, 74, 0.07);
  --accent-border: rgba(224, 121, 74, 0.35);
  --red: #e0796d;
  --red-dim: rgba(224, 121, 109, 0.13);
  --red-glow: rgba(224, 121, 109, 0.06);
  --warning: #d9a04a;
  --warning-dim: rgba(217, 160, 74, 0.13);
  --warning-border: rgba(217, 160, 74, 0.32);
  --green: #84b894;
  --muted: #7d7263;
  --text: #e6ddcd;
  --text-bright: #f7f1e4;
  --text-dim: #a3957f;

  /* ── Semantic account-type colors ───────────────────────── */
  --color-investment: #6db3c2;
  --color-loan:       #d9a04a;
  --color-real-estate: #c98a5e;

  /* ── Investment income series (validated as a set: CVD + contrast) ── */
  --inc-dividend: #d9703f;
  --inc-interest: #3aa0c0;
  --inc-capgain:  #bb8a24;

  /* ── Red border (danger zone borders, destructive button borders) */
  --red-border: rgba(224, 121, 109, 0.42);

  /* ── Subtle zebra-stripe for nested table rows ───────────── */
  --subrow-bg:       rgba(255,250,240,0.025);
  --subrow-bg-hover: rgba(255,250,240,0.05);

  /* ── Shadows (warm-tinted, theme-aware) ──────────────────── */
  --shadow-color:      rgba(15, 10, 5, 0.45);
  --shadow-color-soft: rgba(15, 10, 5, 0.30);

  /* ── Overlay backdrop ────────────────────────────────────── */
  --overlay-bg: rgba(20, 14, 8, 0.62);

  /* ── Demo banner (warm amber, same in both themes) ───────── */
  --demo-banner-bg:     #7c3a00;
  --demo-banner-border: #a34e00;
  --demo-banner-text:   #ffd4a8;

  /* ── Layout constants ────────────────────────────────────── */
  --demo-banner-height: 37px;

  /* ── Type scale (min 11px floor) ────────────────────────── */
  --text-caption: 11px;  /* metadata, secondary labels, badges        */
  --text-sm:      12px;  /* table body secondary, supporting copy     */
  --text-base:    13px;  /* body, primary table content, inputs       */
  --text-md:      14px;  /* emphasized row labels, account names      */
  --text-lg:      15px;  /* list item primaries, row balances         */
  --text-xl:      22px;  /* display numbers (prices, live values)     */
  --text-2xl:     26px;  /* stat card values                          */
  --text-3xl:     28px;  /* page titles, modal titles, tickers        */
  --text-4xl:     32px;  /* page heading overrides                    */
}

body.light-mode {
  /* ── Warm paper light theme ─────────────────────────────── */
  --bg:            #f4f0e6;
  --surface:       #fdfbf4;
  --surface2:      #ece6d7;
  --border:        #ddd5c2;
  --accent:        #b35026;
  --accent-text:   #9c4017;
  --accent-dim:    rgba(179, 80, 38, 0.13);
  --accent-glow:   rgba(179, 80, 38, 0.07);
  --accent-border: rgba(179, 80, 38, 0.32);
  --red:           #b3382f;
  --red-dim:       rgba(179, 56, 47, 0.10);
  --red-glow:      rgba(179, 56, 47, 0.05);
  --red-border:    rgba(179, 56, 47, 0.40);
  --warning:       #955d08;
  --warning-dim:   rgba(168, 105, 10, 0.12);
  --warning-border: rgba(168, 105, 10, 0.30);
  --green:         #3d7a52;
  --muted:         #8d8470;
  --text:          #2e2a22;
  --text-bright:   #1c1813;
  --text-dim:      #6e6452;
  --color-investment: #2e7d8c;
  --color-loan:       #9a6a14;
  --color-real-estate: #92552a;
  --inc-dividend: #c86232;
  --inc-interest: #0a7fa6;
  --inc-capgain:  #a8780f;
  --subrow-bg:       rgba(60, 45, 20, 0.025);
  --subrow-bg-hover: rgba(60, 45, 20, 0.05);
  --shadow-color:      rgba(70, 52, 28, 0.16);
  --shadow-color-soft: rgba(70, 52, 28, 0.10);
  --overlay-bg: rgba(45, 35, 22, 0.45);
}