/* ============================================================
   Design tokens: colours, radii, type scale, shadows — light theme on :root,
   dark theme under [data-theme="dark"]. Change the look here first.
   ============================================================ */

:root{
  /* Duosum palette — navy ink with the logo's two dots (blue + coral), one per partner */
  --bg: #f7f7fa;
  --bg-alt: #f1f2f7;
  --surface: #ffffff;
  --surface-2: #fafafc;
  --surface-hover: #f0f3fa;

  --ink: #2a3352;
  --ink-soft: #4f5a78;
  --ink-mute: #5f6a88;
  --ink-faint: #8f97b6;

  --line: #e3e8f2;
  --line-soft: #eef1f7;
  --line-strong: #cfd8ea;

  /* logo blue, deepened so white button text clears AA; the exact logo blue is --brand-soft */
  --brand: #2d64c8;
  --brand-soft: #4c8df6;
  --brand-bg: #eaf1fe;
  --brand-border: #cfdffb;
  /* deep navy of the logo roof — the logo only; the UI uses the lighter --solid */
  --brand-navy: #1f2a5c;
  --logo-ink: #1f2a5c;
  /* solid fills for primary buttons and selected segments: a brighter, friendlier navy */
  --solid: #2e3f8f;
  --solid-hover: #3a4ea8;
  --solid-ink: #ffffff;
  /* text on the coral accent button */
  --accent-on: #18213f;
  /* the hero banner: a soft navy-to-blue gradient */
  --hero-bg: linear-gradient(135deg, #2e3f8f 0%, #3d5bc4 100%);
  --hero-border: transparent;
  /* chart series: the logo's two dots — income blue, spending coral */
  --series-1: #4c8df6;
  --series-2: #ef6f5e;
  /* goal-card tints, cycled per goal: blue, green, coral */
  --tone0-bg: #e3eefe; --tone0-ink: #2d64c8; --tone0-fill: #4c8df6;
  --tone1-bg: #e6f4ec; --tone1-ink: #1a7a52; --tone1-fill: #1a8a5c;
  --tone2-bg: #fdeae6; --tone2-ink: #b8473a; --tone2-fill: #ef6f5e;
  /* logo coral — the second dot */
  --accent: #ef6f5e;
  --accent-ink: #c8473a;
  --accent-bg: #fdeeeb;
  --accent-border: #f8d0c9;

  /* the two partners, as in the logo: partner 1 blue, partner 2 coral */
  --p0: #4c8df6;
  --p0-ink: #2f6fdb;
  --p0-bg: #ebf2fe;
  --p0-border: #cfdffb;
  --p1: #ef6f5e;
  --p1-ink: #c8473a;
  --p1-bg: #fdeeeb;
  --p1-border: #f8d0c9;

  --good: #1a9e6a;
  --good-bg: #e5f5ee;
  --bad: #dc3a4f;
  --bad-bg: #fdecee;
  --warn: #e8932f;
  --warn-bg: #fdf2e2;
  --info: #2f6fdb;
  --info-bg: #ebf2fe;
  /* money moving between your own pots (savings, transfers, debt repayments) —
     distinct from red, which means real spending only */
  --move: #7655d4;
  --move-bg: #f1edfc;

  --shadow-xs: 0 1px 2px rgba(31,42,92,.05);
  --shadow-sm: 0 1px 3px rgba(31,42,92,.06), 0 2px 6px rgba(31,42,92,.04);
  --shadow-md: 0 2px 5px rgba(31,42,92,.07), 0 8px 16px rgba(31,42,92,.06);
  --shadow-lg: 0 4px 12px rgba(31,42,92,.10), 0 16px 40px rgba(31,42,92,.12);
  --shadow-brand: 0 1px 2px rgba(46,63,143,.14), 0 2px 8px rgba(46,63,143,.18);
  --focus-ring: 0 0 0 3px rgba(76,141,246,.20);
  --backdrop: rgba(15,21,51,.45);

  /* content width cap — shared by .page and the top bar so they line up */
  --page-max: 1440px;

  /* corner radii (50% is kept for true circles) */
  --radius-sm: 6px;
  --radius-ctl: 10px;  /* buttons, inputs, segmented controls */
  --radius-md: 12px;
  --radius-lg: 18px;   /* cards */
  --radius-xl: 20px;   /* the hero banner */
  --radius-pill: 999px;

  /* type scale — every font-size maps to one of these; nothing below 11px */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-h3: 17px;   /* card titles */
  --fs-lg: 20px;
  --fs-xl: 28px;

  --sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Inter', monospace;
  /* brand typeface — the wordmark and headings */
  --display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* a whisper of the two dots: blue fading to coral */
  --grad-header: linear-gradient(135deg, #e9f1fe 0%, #f3f5fb 55%, #fdf0ed 100%);
  --grad-brand: linear-gradient(135deg, #2f6fdb 0%, #4c8df6 100%);
}

[data-theme="dark"]{
  /* built on the logo's deep navy */
  --bg: #0f1533;
  --bg-alt: #141b3e;
  --surface: #182048;
  --surface-2: #131a3c;
  --surface-hover: #212a57;

  --ink: #eef1fa;
  /* secondary text, lifted for contrast on cards (#182048) */
  --ink-soft: #c7cde6;
  --ink-mute: #a0a8cc;
  --ink-faint: #7f88b2;

  --line: #2a3363;
  --line-soft: #1e2650;
  --line-strong: #364074;

  --brand: #4c8df6;
  --brand-soft: #6fa4f8;
  --brand-bg: #1c2b5e;
  --brand-border: #2f4687;
  --brand-navy: #0b1029;
  --logo-ink: #eef1fa;
  --solid: #4c8df6;
  --solid-hover: #6fa4f8;
  --solid-ink: #0f1533;
  --hero-bg: linear-gradient(135deg, #26347a 0%, #2f4596 100%);
  --hero-border: #3a4a8c;
  --series-1: #6fa4f8;
  --series-2: #ef6f5e;
  --tone0-bg: #1c2b5e; --tone0-ink: #8db8fa; --tone0-fill: #4c8df6;
  --tone1-bg: #12332e; --tone1-ink: #6fd8a6; --tone1-fill: #3fbf86;
  --tone2-bg: #3a2133; --tone2-ink: #f6a194; --tone2-fill: #ef6f5e;
  --accent: #f48a7c;
  --accent-ink: #f48a7c;
  --accent-bg: #3a2133;
  --accent-border: #5c3243;

  --p0: #4c8df6;
  --p0-ink: #8db8fa;
  --p0-bg: #1c2b5e;
  --p0-border: #2f4687;
  --p1: #ef6f5e;
  --p1-ink: #f6a194;
  --p1-bg: #3a2133;
  --p1-border: #5c3243;

  --good: #4cce8e;
  --good-bg: #12332e;
  --bad: #ff6b7d;
  --bad-bg: #3b1b2e;
  --warn: #f0b54e;
  --warn-bg: #3a2e1e;
  --info: #6fa4f8;
  --info-bg: #1c2b5e;
  --move: #a891f5;
  --move-bg: #2a2357;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2);
  --shadow-md: 0 2px 5px rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.3);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.4);
  --focus-ring: 0 0 0 3px rgba(111,164,248,.25);
  --backdrop: rgba(5,8,22,.6);

  --grad-header: linear-gradient(135deg, #1b2856 0%, #161e47 55%, #241d44 100%);
}