/*
  Design tokens as CSS custom properties on :root, swapped at runtime by
  theme.js via [data-phase]. Colours differ in lightness as well as hue for
  the severity set, so they stay distinguishable under deuteranopia/
  protanopia — do not "clean up" or lighten these.
*/

:root {
  /* Day theme (default, also the fallback before JS runs) */
  --bg: #EEF6FB;
  --surface: #FFFFFF;
  --surface2: #F7FBFE;
  --ink: #0B2239;
  --muted: #4A6076;
  --faint: #5C7488;
  --line: #D3E4EF;
  --primary: #2E6FA8;
  --primary-soft: #DCEFF9;
  --sun: #C77800;
  --leaf: #1E8A5F;
  --shadow: 0 1px 2px rgba(11, 34, 57, .06), 0 8px 24px rgba(11, 34, 57, .06);

  --good-bg: #DCEFF9;
  --good-ink: #17527D;
  --cau-bg: #FBEDD2;
  --cau-ink: #7A4E00;
  --rough-bg: #F8DED9;
  --rough-ink: #8E2A1D;

  --modal-overlay-bg: rgba(11, 34, 57, .32);
  --modal-glass-bg: rgba(255, 255, 255, .6);
  --modal-glass-border: rgba(255, 255, 255, .55);

  /* Type scale */
  --t-xs: 11.5px;
  --t-sm: 12.5px;
  --t-md: 13.5px;
  --t-base: 15px;
  --t-lg: 19px;
  --t-num: 24px;
  --t-hero: 56px;
  --t-h1: 30px;
  --tap: 40px;

  --pad: 30px;
}

:root[data-phase="dusk"] {
  --bg: #E3EBF2;
  --surface: #FFFFFF;
  --surface2: #F5F8FB;
  --ink: #0E2038;
  --muted: #4A5F79;
  --faint: #586F84;
  --line: #CFDCE8;
  --primary: #2C6494;
  --primary-soft: #DDE9F4;
  --sun: #A55F00;
  --leaf: #1C7A54;
  --shadow: 0 1px 2px rgba(11, 34, 57, .07), 0 8px 26px rgba(11, 34, 57, .09);

  --good-bg: #DCEAF6;
  --good-ink: #154C74;
  --cau-bg: #F8E7CB;
  --cau-ink: #714700;
  --rough-bg: #F6DAD4;
  --rough-ink: #872619;

  --modal-overlay-bg: rgba(14, 32, 56, .4);
  --modal-glass-bg: rgba(255, 255, 255, .5);
  --modal-glass-border: rgba(255, 255, 255, .4);
}

:root[data-phase="night"] {
  --bg: #0D1B33;
  --surface: #16274A;
  --surface2: #1B2E54;
  --ink: #EAF2FA;
  --muted: #AFC3DA;
  --faint: #8CA2BE;
  --line: #2E3E5C;
  --primary: #7FC0EC;
  --primary-soft: #24365C;
  --sun: #F4B942;
  --leaf: #4FD8A0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);

  --good-bg: #1F3E5E;
  --good-ink: #9AD2F5;
  --cau-bg: #4A3A17;
  --cau-ink: #F4C765;
  --rough-bg: #4E2620;
  --rough-ink: #F19B8C;

  --modal-overlay-bg: rgba(0, 0, 0, .55);
  --modal-glass-bg: rgba(22, 39, 74, .55);
  --modal-glass-border: rgba(255, 255, 255, .12);
}

@media (max-width: 859px) {
  :root {
    --pad: 16px;
  }
}