/*
 * The palette, and nothing else. One light theme. There is no dark mode and
 * there is no runtime switching, exactly as in the phone app — a phone set to
 * dark gets the same colours there, and a browser set to dark gets the same
 * colours here.
 *
 * TWO RULES THAT LOOK LIKE PREFERENCES AND ARE NOT:
 *
 * 1. TEXT IS BLACK OR WHITE. There is no blue text, no red text, no muted
 *    blue heading. Brand and destructive are FILLS, and what sits on a fill is
 *    white. --text and --text-secondary are the only two colours any text may
 *    take, plus --on-fill for text sitting on a coloured block. If a state
 *    needs to read as urgent, it gets a red block beside it, not red words.
 *
 * 2. THE SURFACE LADDER RUNS CARD > PAGE > PANEL, lightest first. A card is
 *    LIGHTER than the page it sits on; a grouped panel is DARKER. This reads
 *    backwards against the usual "cards float above a grey page" convention
 *    and it matches the phone app, which had this written down backwards once
 *    already before being corrected. Lifting --panel above --page to "fix" it
 *    is the wrong move.
 */

:root {
  /* Brand. A fill only. */
  --brand: #27508f;
  --brand-strong: #1e3f73; /* pressed/hover state of the same fill */

  /* Accent. Quiet supporting fill: chips, bar tracks, the selected nav row. */
  --accent: #8fafda;
  --accent-soft: #dbe5f3;

  /* Destructive AND warning, deliberately one value. A double booking and a
     delete look the same here because both mean "look at this now" — the
     phone app splits them into two browns/reds and this product does not. */
  --alert: #c41026;

  /* Surfaces, lightest to darkest. See rule 2 above. */
  --card: #ffffff;
  --page: #f5f7fa;
  --panel: #e9edf3;

  --border: #dfe5ed;
  --border-strong: #c8d2e0;

  /* The only two text colours, plus the one for text on a fill. */
  --text: #16191c;
  --text-secondary: #3f4854;
  --on-fill: #ffffff;

  /* Spacing scale. Four values, used everywhere, so nothing drifts to 13px. */
  --gap-1: 8px;
  --gap-2: 16px;
  --gap-3: 24px;
  --gap-4: 40px;

  --radius: 10px;
  --radius-lg: 14px;

  /* Type. A system stack, so nothing is fetched and nothing shifts on load. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  --shell-width: 216px;
  --max-width: 1180px;
}