/* Design tokens: every colour, radius, space and type size. Components use
   these and nothing else; adding a colour means adding a token here.
   Light and dark ship; the device decides unless the person pinned one
   (data-theme on <html>). A tenant may later override --accent only.
   Values from the design canvas (Shop / Voice bill / Items / Money / Loan /
   Dues). --warn and --accent keep 4.5:1 on their backgrounds in both. */

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  /* a printed label: black on white in every theme, so a scanner reads it */
  --label-bg: #FFFFFF;
  --label-ink: #000000;
  --surface: #F2F3F5;
  --surface-2: #E8EAEE;
  --ink: #15181D;
  --muted: #5B6470;
  --border: #E2E4E8;
  --border-strong: #C5C9D1;
  --accent: #0B7A4B;
  --accent-hover: #075C38;
  --accent-ink: #FFFFFF;
  --strong: #15181D;
  --strong-ink: #FFFFFF;
  --warn: #C2410C;
  --warn-ink: #9A3412;
  --warn-bg: #FFF7ED;
  /* Charts (Money -> Charts): money in and out, checked for colour-blind
     separation and contrast on each theme's background (docs/CHARTS.md). */
  --chart-in: #0B7A4B;
  --chart-out: #C2410C;
  /* The top-right menu and the settings sidebar (MedicDay's who-menu). */
  --accent-bg: #E7F5EE;
  /* The brand (priv/assets/brand): the tile, its bars, the wordmark. */
  --brand-tile: #1B6B45;
  --brand-bar: #F2A93B;
  --brand-word: #0F2A1F;
  --shadow: 0 16px 40px rgba(21, 24, 29, 0.18);
  --warn-border: #FDBA74;
  --on-warn: #FFFFFF;
  --focus: #1D4ED8;
  --backdrop: rgba(21, 24, 29, 0.45);
  --qr-bg: #FFFFFF;
  --qr-ink: #15181D;
  --on-accent-muted: #D9F2E6;
  --muted-on-strong: #C5C9D1;

  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;

  --text-xs: 11px;
  --text-s: 13px;
  --text-m: 15px;
  --text-l: 17px;
  --text-xl: 22px;
  --text-xxl: 30px;
  /* What people type into: iOS Safari zooms the page in on a field set
     smaller than 16px, and the page then slides about under the finger. */
  --text-field: 16px;

  --touch: 44px;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ta: "Noto Sans Tamil", "Inter", system-ui, sans-serif;
  --font-ar: "Noto Sans Arabic", "Inter", system-ui, sans-serif;
  --font-te: "Noto Sans Telugu", "Inter", system-ui, sans-serif;
  --font-ml: "Noto Sans Malayalam", "Inter", system-ui, sans-serif;
  --font-kn: "Noto Sans Kannada", "Inter", system-ui, sans-serif;
  --font-hi: "Noto Sans Devanagari", "Inter", system-ui, sans-serif;
  --font-si: "Noto Sans Sinhala", "Inter", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0F1216;
    --surface: #1A1F26;
    --surface-2: #232A33;
    --ink: #EEF0F3;
    --muted: #A3ABB6;
    --border: #2A313B;
    --border-strong: #3A434F;
    --accent: #3CC48A;
    --accent-hover: #5FD3A1;
    --accent-ink: #06231A;
    --strong: #EEF0F3;
    --strong-ink: #0F1216;
    --warn: #FB923C;
    --warn-ink: #FDBA74;
    --warn-bg: #2A1A10;
    --chart-in: #2FAE78;
    --chart-out: #E0712A;
    --accent-bg: #10291E;
    --brand-tile: #2E8B5E;
    --brand-bar: #F2A93B;
    --brand-word: #FFFFFF;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    --warn-border: #7C3A12;
    --on-warn: #1A0E06;
    --focus: #7AA2FF;
    --backdrop: rgba(0, 0, 0, 0.6);
    --on-accent-muted: #0B3D28;
    --muted-on-strong: #3A434F;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1216;
  --surface: #1A1F26;
  --surface-2: #232A33;
  --ink: #EEF0F3;
  --muted: #A3ABB6;
  --border: #2A313B;
  --border-strong: #3A434F;
  --accent: #3CC48A;
  --accent-hover: #5FD3A1;
  --accent-ink: #06231A;
  --strong: #EEF0F3;
  --strong-ink: #0F1216;
  --warn: #FB923C;
  --warn-ink: #FDBA74;
  --warn-bg: #2A1A10;
  --chart-in: #2FAE78;
  --chart-out: #E0712A;
  --accent-bg: #10291E;
  --brand-tile: #2E8B5E;
  --brand-bar: #F2A93B;
  --brand-word: #FFFFFF;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  --warn-border: #7C3A12;
  --on-warn: #1A0E06;
  --focus: #7AA2FF;
  --backdrop: rgba(0, 0, 0, 0.6);
  --on-accent-muted: #0B3D28;
  --muted-on-strong: #3A434F;
}