/* See the Bills: design tokens.
   The only file with raw color values in it. Two tiers:
   - Palette: the raw colors, named for what they are.
   - Roles: what each color does. Every rule in grid.css uses roles only.
   A rebrand, a pivot or a high-contrast mode is an edit to this file. */

:root {
  /* ---- Palette. Bryan's six states, 2026-09-24, plus neutrals. ---- */
  --c-midnight: #073B4C;  /* Midnight Green: early */
  --c-bondi: #118FB2;     /* Bondi Blue: good, the empty grid */
  --c-emerald: #06D6A0;   /* Emerald: paid */
  --c-sunglow: #FFD166;   /* Sunglow: missed */
  --c-pink: #EF476F;      /* Bright Pink Crayola: late */
  --c-peach: #D97757;     /* Burnt Peach: due soon. Between Spicy Paprika (too close
     to late's pink) and Book Cloth (too close to overdue's rosy brown); it's also the
     color behind Claude, which is building this. */
  --c-rosy: #BD897E;      /* Rosy Brown: 30 days and past */
  /* Deeper midnight for small words on color: midnight scores 3.2 to 4.1 on bondi,
     pink and rosy, under the 4.5 small text needs; this clears 4.9 to 6.2. */
  --c-deep: #03171E;
  --c-white: #FFFFFF;
  --c-mist: #EEF2F4;      /* page */
  --c-fog: #D5DEE2;       /* hairlines on white */
  --c-stone: #BFCBD1;     /* dots */
  --c-slate: #4A6470;     /* secondary text */
  --c-iron: #797979;      /* add row */
  --c-graphite: #5F6B70;  /* collections: white on it is 5.5:1 */
  --c-charcoal: #2A2E30;  /* lawsuit: white on it is about 14:1 */
  --c-onyx: #121212;      /* the menu chip, a near-black outside the state colors */
  --c-shade: 3, 23, 30;   /* deep midnight as RGB, for shadows */

  /* ---- Roles: surfaces and text. ---- */
  --page: var(--c-mist);
  --surface: var(--c-white);        /* header, sheets, buttons */
  --hairline: var(--c-fog);
  --text: var(--c-midnight);
  --text-2: var(--c-slate);
  --text-on-surface-strong: var(--c-white);  /* on midnight fills */
  --focus: var(--c-bondi);

  /* ---- Roles: the grid. ---- */
  --grid: var(--c-bondi);
  --grid-line: var(--c-white);
  --dot: var(--c-stone);
  --icon: var(--c-midnight);           /* icons in cells */
  --text-on-state: var(--c-deep);      /* small words in colored cells */
  --text-on-grid: var(--c-white);      /* big numbers and labels on the blue */
  --today-bar: var(--c-emerald);
  --here-bar: var(--c-bondi);        /* under the date the whisper names */
  --today-tile: var(--c-white);
  --lens-sheen: rgba(255, 255, 255, 0.14);  /* light lift over whatever's in the center */
  --month: var(--c-midnight);
  --payday-bar: var(--c-emerald);
  --payday-ring: var(--c-emerald);   /* the circle around payday's date */
  --here-ring: var(--c-bondi);       /* payday's circle when the whisper names that date */
  /* The plus row is Mist, the "not yet" color, with Midnight green pluses. It was gray,
     which read like collections (2026-09-28). */
  --add-row: var(--c-mist);
  --blank-row: #E4EAED;     /* a bill with no due date: Mist, a shade darker */
  --add-mark: var(--c-midnight);
  --ask-ring: var(--c-midnight);     /* the square the assistant is asking about */

  /* ---- Roles: states. ---- */
  --state-paid: var(--c-emerald);
  --state-partial: linear-gradient(to bottom, var(--c-bondi) 50%, var(--c-emerald) 50%); /* paid part: fills from the bottom (2026-09-28) */
  --state-early: var(--c-midnight);
  --state-early-ink: var(--c-emerald);
  --state-missed: var(--c-sunglow);
  --state-late: var(--c-pink);
  --state-overdue: var(--c-rosy);      /* 30 days and past */
  /* Then the color drains out: gray means it's gone past the game. */
  --state-collections: var(--c-graphite);
  --state-lawsuit: var(--c-charcoal);
  --text-on-dark: var(--c-white);
  --state-promise: var(--c-white);
  --state-promise-ink: var(--c-bondi);   /* 3.75:1 on white, fine for an icon */
  --message: var(--c-pink);            /* the board's message pixels */

  /* ---- Roles: labels. ---- */
  --chip: rgba(7, 59, 76, 0.94);
  --chip-ink: var(--c-white);
  --chip-inv: var(--c-white);           /* chips on dark rows */
  --chip-inv-ink: var(--c-midnight);
  --status-ok: var(--c-bondi);
  --status-soon: var(--c-white);
  --status-late: var(--c-pink);
  --status-overdue: var(--c-rosy);
  --status-collections: var(--c-graphite);
  --status-lawsuit: var(--c-charcoal);
  --status-early: var(--c-emerald);
  --status-due-soon: var(--c-peach);  /* the name-dot for a bill due within 3 days.
     White stays reserved for a promise; it was used here and read as the same thing. */
  --bubble: var(--c-deep);
  --bubble-ink: var(--c-white);

  /* ---- Roles: controls. ---- */
  --button: var(--c-white);
  --button-ink: var(--c-midnight);
  --pressed: var(--c-midnight);
  --pressed-ink: var(--c-white);
  --menu-chip: var(--c-onyx);         /* the menu chip over the plus row */
  --menu-chip-ink: var(--c-white);
  --menu-icon: var(--c-bondi);        /* the icons on the menu's lines */
  --danger: var(--c-pink);            /* the border on Reset, in Settings' danger zone */

  /* ---- Roles: shadows. ---- */
  --shadow-lens: rgba(var(--c-shade), 0.27); /* the screen down today's column: one strength on every row (2026-09-29) */
  --shadow-raised: 0 1px 10px rgba(var(--c-shade), 0.30);
  --shadow-header: 0 3px 8px rgba(var(--c-shade), 0.16);
  --shadow-button: 0 2px 10px rgba(var(--c-shade), 0.22);
  --shadow-float: 0 4px 14px rgba(var(--c-shade), 0.38);   /* the zoom button, set on the board */
  --shadow-sheet: 0 4px 20px rgba(var(--c-shade), 0.25);

  /* ---- Type. The whisper, and everything the assistant puts in its place, is one
     size: 16px on phones (the accessibility floor, and below it iPhones zoom into a
     field), 18px on desktop. ---- */
  --whisper-size: 16px;

  /* Clear Sans for everything; Satoshi for numbers only. Both stored in the app,
     trimmed to the characters the app uses, never loaded from another site.
     Satoshi runs 8% taller than Clear Sans at the same size (its figures stand
     0.731 of the size, Clear Sans's capitals 0.676), so it's scaled to 92.5% and
     a number stands exactly as tall as a capital beside it. */
  --font: "Clear Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "Satoshi", var(--font);
}

@font-face { font-family: "Clear Sans"; src: url("fonts/ClearSans-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Clear Sans"; src: url("fonts/ClearSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Clear Sans"; src: url("fonts/ClearSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Clear Sans"; src: url("fonts/ClearSans-Bold.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; size-adjust: 92.5%; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; size-adjust: 92.5%; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 600 800; font-display: swap; size-adjust: 92.5%; }

/* Desktop: the whisper steps up to 18px. */
@media (min-width: 1024px) {
  :root { --whisper-size: 18px; }
}