/* Color. Never introduce a value not defined here. */
:root {
  --mp-page: #E7ECF5;
  --mp-card: #F8FAFD;
  --mp-card-inset: #F1F4F9;
  --mp-well: #EDF1F8;
  --mp-chart-bg: #EDF1F8;
  --mp-border: #B4C7E2;
  --mp-border-strong: #16202B;
  --mp-rule: #C9D6E8;
  --mp-dashed: #7E9BC4;

  --mp-ink: #16202B;
  --mp-ink-muted: #3a3a37;
  --mp-ink-subtle: #5B5B57;
  --mp-ink-disabled: #8794A8;
  --mp-surface-disabled: #E6EAF1;
  --mp-border-disabled: #C3CEDD;

  --mp-primary: #17509E;
  --mp-primary-lift: #1B5CB4;
  --mp-primary-deep: #0E3A75;
  --mp-primary-soft: #E8EEF8;
  --mp-primary-focus: #9FC2F0;
  --mp-primary-grad: linear-gradient(180deg, #1B5CB4, #17509E); /* @kind color */
  --mp-primary-soft-grad: linear-gradient(180deg, #F1F5FC, #E1EAF8); /* @kind color */

  --mp-secondary: #0E7C8A;
  --mp-secondary-ink: #0A5F6B;
  --mp-secondary-soft: #E6F5F7;
  --mp-secondary-grad: linear-gradient(180deg, #F0FAFB, #DFF1F4); /* @kind color */

  /* Semantic — meaning only, never identity */
  --mp-error: #B3261E;
  --mp-error-well: #FDECEA;
  --mp-positive: #2F6B3A;
  --mp-positive-grad: linear-gradient(180deg, #F0F7F2, #E2EEE6); /* @kind color */

  --mp-neutral-tile-grad: linear-gradient(180deg, #F4F7FC, #E6EBF3); /* @kind color */

  /* Note box — the highest-contrast box in the system, because it holds the
     plain-English explanation. Deliberately heavier than every other surface. */
  --mp-note-bg: #E9EFF8;
  --mp-note-border: var(--mp-border-strong);

  /* Calculator accents: base / soft fill / soft fill 2 / mid tint.
     HARD RULE: no accent may be red, green, olive, moss, or a light/bright orange
     or amber. The boundary is LIGHTNESS, not hue: olive reads as green and bright
     amber reads as caution at swatch size. The dark bronze #8A6100 (27% lightness)
     is permitted because it reads as struck metal. Red means a problem and
     green means a better outcome, so an identity in either hue makes a chart read as
     a warning or a success. Accents stay in the blue -> cyan-blue -> violet -> magenta ->
     plum -> bronze arc, saturated rather than muted. */
  --mp-mortgage: #3730A3; --mp-mortgage-soft: #EEEDFA; --mp-mortgage-soft-2: #E1DFF5; --mp-mortgage-tint: #A9A3E0;
  --mp-rent:     #0B6FA4; --mp-rent-soft:     #E5F1F8; --mp-rent-soft-2:     #D2E6F2; --mp-rent-tint:     #7FB6D6;
  --mp-credit:   #7A2E6B; --mp-credit-soft:   #F9EDF5; --mp-credit-soft-2:   #F1DCEA; --mp-credit-tint:   #C79BBD;
  --mp-stocks:   #6B21A8; --mp-stocks-soft:   #F4ECFA; --mp-stocks-soft-2:   #E8DCF4; --mp-stocks-tint:   #C9A6E4;
  --mp-bonds:    #3F4A5A; --mp-bonds-soft:    #F1F3F7; --mp-bonds-soft-2:    #E2E6EE; --mp-bonds-tint:    #A8B2C2;
  --mp-funds:    #8A6100; --mp-funds-soft:    #F9F3E4; --mp-funds-soft-2:    #F0E6CC; --mp-funds-tint:    #D9C48A;
  --mp-annuity:  #A8206E; --mp-annuity-soft:  #FCEDF4; --mp-annuity-soft-2:  #F6DCEA; --mp-annuity-tint:  #E39CC2;
  --mp-compound: #7C3AED; --mp-compound-soft: #F3EDFE; --mp-compound-soft-2: #E7DEFB; --mp-compound-tint: #BFA3F5;

  /* Default alias — overridden per page by [data-calc] */
  --mp-accent: var(--mp-primary);
  --mp-accent-soft: var(--mp-primary-soft);
  --mp-accent-soft-2: #E1EAF8;
  --mp-accent-tint: #9FC2F0;
}

[data-calc="mortgage"]        { --mp-accent: var(--mp-mortgage); --mp-accent-soft: var(--mp-mortgage-soft); --mp-accent-soft-2: var(--mp-mortgage-soft-2); --mp-accent-tint: var(--mp-mortgage-tint); }
[data-calc="rent-vs-buy"]     { --mp-accent: var(--mp-rent);     --mp-accent-soft: var(--mp-rent-soft);     --mp-accent-soft-2: var(--mp-rent-soft-2);     --mp-accent-tint: var(--mp-rent-tint); }
[data-calc="credit-card"]     { --mp-accent: var(--mp-credit);   --mp-accent-soft: var(--mp-credit-soft);   --mp-accent-soft-2: var(--mp-credit-soft-2);   --mp-accent-tint: var(--mp-credit-tint); }
[data-calc="stock-return"]    { --mp-accent: var(--mp-stocks);   --mp-accent-soft: var(--mp-stocks-soft);   --mp-accent-soft-2: var(--mp-stocks-soft-2);   --mp-accent-tint: var(--mp-stocks-tint); }
[data-calc="bond"]            { --mp-accent: var(--mp-bonds);    --mp-accent-soft: var(--mp-bonds-soft);    --mp-accent-soft-2: var(--mp-bonds-soft-2);    --mp-accent-tint: var(--mp-bonds-tint); }
[data-calc="fund-fees"]       { --mp-accent: var(--mp-funds);    --mp-accent-soft: var(--mp-funds-soft);    --mp-accent-soft-2: var(--mp-funds-soft-2);    --mp-accent-tint: var(--mp-funds-tint); }
[data-calc="annuity"]         { --mp-accent: var(--mp-annuity);  --mp-accent-soft: var(--mp-annuity-soft);  --mp-accent-soft-2: var(--mp-annuity-soft-2);  --mp-accent-tint: var(--mp-annuity-tint); }
[data-calc="compound"]        { --mp-accent: var(--mp-compound); --mp-accent-soft: var(--mp-compound-soft); --mp-accent-soft-2: var(--mp-compound-soft-2); --mp-accent-tint: var(--mp-compound-tint); }

:root[data-theme="dark"] {
  --mp-page: #0B1220;
  --mp-card: #151E2E;
  --mp-card-inset: #1B2536;
  --mp-well: #101827;
  --mp-chart-bg: #101827;
  --mp-border: #33445C;
  --mp-border-strong: #E6ECF5;
  --mp-rule: #263449;
  --mp-dashed: #4A5D78;

  --mp-ink: #E6ECF5;
  --mp-ink-muted: #B4C0D2;
  --mp-ink-subtle: #8A97AB;
  --mp-ink-disabled: #66748A;
  --mp-surface-disabled: #1A2333;
  --mp-border-disabled: #33445C;

  --mp-primary: #7FB2F5;
  --mp-primary-lift: #96C1F8;
  --mp-primary-deep: #12294A;
  --mp-primary-soft: #16294A;
  --mp-primary-focus: #7FB2F5;
  --mp-primary-grad: linear-gradient(180deg, #1E4F91, #17427A); /* @kind color */
  --mp-primary-soft-grad: linear-gradient(180deg, #1A3157, #16294A); /* @kind color */

  --mp-secondary: #6FD2E0;
  --mp-secondary-ink: #A7E6EF;
  --mp-secondary-soft: #0C2B31;
  --mp-secondary-grad: linear-gradient(180deg, #103A42, #0C2B31); /* @kind color */

  --mp-error: #FF8A80;
  --mp-error-well: #3A1512;
  --mp-positive: #7BD69B;
  --mp-positive-grad: linear-gradient(180deg, #13301F, #0F2719); /* @kind color */
  --mp-neutral-tile-grad: linear-gradient(180deg, #1D2838, #16202E); /* @kind color */
  --mp-note-bg: #1B2536;
}