/* Kanakku design tokens. Palette: coolors.co/palette/1c3144-596f62-7ea16b (Vijay, Oct 2026).
   Light: soft off-white page, white cards, navy #1c3144 text and primary buttons, muted green #596f62 for
   secondary text and links, sage #7ea16b for ticked chips and the ∑ mark.
   Dark (follows the device): #1c3144 page, lighter navy cards, sage primary buttons and links.
   Sage is too light to carry text or stand alone on white (2.9), so in light mode it is a fill with navy text
   on it (4.6), and the ∑ is sage on navy (4.6). Every text pairing passes WCAG AA (4.5:1); ratios noted. */

:root {
  color-scheme: light dark;

  --bg:           #f6f7f3;  /* soft off-white page */
  --surface:      #ffffff;  /* cards */
  --surface-2:    #fbfcfa;  /* inputs, expanded history rows */
  --text:         #1c3144;  /* navy: 13.4 on white, 12.4 on the page */
  --text-muted:   #596f62;  /* 5.4 on white, 5.0 on the page */
  --rule:         #e7ebe4;  /* lines inside cards */
  --card-border:  #dde3da;

  --accent:       #4a5e52;  /* links, focus: #596f62 deepened, 6.5 on the page */
  --accent-soft:  #e7efe2;  /* focus halo */
  --btn-primary-bg:     #1c3144;
  --btn-primary-text:   #ffffff;  /* 13.4 */
  --btn-secondary-bg:   #e7efe2;  /* sage tint */
  --btn-secondary-text: #1c3144;  /* 11.4 */
  --chip-on-bg:   #7ea16b;  /* ticked "who played" */
  --chip-on-text: #1c3144;  /* 4.6 */
  --logo-bg:      #1c3144;
  --logo-fg:      #7ea16b;  /* sage ∑ on navy: 4.6 */

  --positive:     #3f6a33;  /* payments and credits: sage deepened, 6.3 on white */
  --warn-bg:      #1c3144;  /* "Over $75" badge, error notices */
  --warn-text:    #ffffff;  /* 13.4 */
  --warn-border:  #1c3144;
  --danger:       #b42318;  /* 6.6 */

  /* The Kanakku wordmark only: an installed serif italic (no web font). Georgia is the floor everywhere. */
  --font-wordmark: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgb(28 49 68 / 5%), 0 2px 8px rgb(28 49 68 / 6%);
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #1c3144;  /* the palette's navy */
    --surface:      #24405a;  /* cards */
    --surface-2:    #2b4a66;
    --text:         #eef2ec;  /* 11.8 on the page, 9.5 on cards */
    --text-muted:   #a9b9ae;  /* 6.5 / 5.2 */
    --rule:         #31506c;
    --card-border:  #3a5a77;
    --accent:       #a7c896;  /* links: sage lifted, 7.2 / 5.8 */
    --accent-soft:  #2f4d3c;
    --btn-primary-bg:     #7ea16b;
    --btn-primary-text:   #1c3144;  /* 4.6 */
    --btn-secondary-bg:   #33506a;
    --btn-secondary-text: #eef2ec;  /* 7.4 */
    --chip-on-bg:   #596f62;
    --chip-on-text: #ffffff;  /* 5.4 */
    --logo-bg:      #7ea16b;
    --logo-fg:      #1c3144;  /* 4.6 */
    --positive:     #a7c896;  /* 5.8 on cards */
    --warn-bg:      #7ea16b;
    --warn-text:    #1c3144;  /* 4.6 */
    --warn-border:  #7ea16b;
    --danger:       #f88f86;  /* 4.7 on cards */
    --shadow: 0 1px 2px rgb(0 0 0 / 30%);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: 26px; margin: 8px 0 20px; }
h2 { font-size: 17px; margin: 28px 0 10px; }