/* Clavoz design tokens -- "Graphite, Steel and Signal"
   (design/design-system.md).
   Light is the default. `.dark`, `[data-palette="cvd"]` and
   `.dark[data-palette="cvd"]` swap the colour tokens; `[data-font="dyslexia"]`
   swaps the reading settings. Each colour is space-separated RGB channels so
   Tailwind's alpha modifier works: rgb(var(--accent) / <alpha-value>).
   Rule 4 of the spec: use these variables (or the Tailwind names in
   frontend/tailwind.pages.config.cjs), never raw hex in a template. */

:root {
  /* Light -- the default look */
  --page: 244 244 242;          /* #F4F4F2 */
  --surface: 255 255 255;       /* #FFFFFF */
  --ink: 22 24 29;              /* #16181D */
  --body: 44 48 58;             /* #2C303A */
  --muted: 75 81 96;            /* #4B5160 */
  --line: 222 224 228;          /* #DEE0E4 */
  --input: 124 130 144;         /* #7C8290 */
  --accent: 242 169 0;          /* #F2A900 */
  --accent-edge: 143 106 0;     /* #8F6A00 */
  --on-accent: 22 24 29;        /* #16181D */
  --money: 31 111 74;           /* #1F6F4A */
  --money-tint: 217 240 227;    /* #D9F0E3 */
  --money-ink: 23 88 58;        /* #17583A */
  --sent: 30 64 175;            /* #1E40AF */
  --sent-tint: 219 234 254;     /* #DBEAFE */
  --danger: 153 27 27;          /* #991B1B */
  --danger-tint: 254 226 226;   /* #FEE2E2 */
  --draft: 44 48 58;            /* #2C303A */
  --draft-tint: 236 237 240;    /* #ECEDF0 */
  --totalbar: 22 24 29;         /* #16181D */

  /* Steel -- the second brand colour (Task 44, approved 6 Oct 2026). It carries
     structure: navigation, page headings, links and table header rows. Gold stays
     the only colour for the main action; steel is never a primary button. */
  --brand2: 27 53 80;           /* #1B3550 */
  --brand2-raised: 43 76 112;   /* #2B4C70 */
  --brand2-text: 27 53 80;      /* #1B3550 */
  --on-brand2: 217 222 229;     /* #D9DEE5 */
  --on-brand2-muted: 195 207 220; /* #C3CFDC */
  --mist: 230 233 238;          /* #E6E9EE */

  /* The new app shell and its shared parts (Task 109, Glenn approved the
     designs 17 Oct 2026; the pictures are .ai/design/app/*.png). Eyebrows and
     the tab bar's resting labels, the edge of an outline button, the hairline
     between rows, the five pill tints with the ink that reads on each, the
     rail's icons, the text tones on a steel header band and the amber warning
     strip. Steel, the rail and the header text on it are brand constants, so
     they are the same in all four blocks; the pills follow the status colours
     above (red = danger, green = money) so the colour-blind palette moves them
     together. */
  --eyebrow: 138 144 156;       /* #8A909C */
  --edge: 201 205 212;          /* #C9CDD4 */
  --divider: 238 240 242;       /* #EEF0F2 */
  --rail-icon: 154 163 178;     /* #9AA3B2 */
  --rail-active: 255 255 255;   /* #FFFFFF */
  --count-badge: 200 16 46;     /* #C8102E -- the open-quotes count on the menu (Task 121): signal red, white figure */
  --on-count-badge: 255 255 255; /* #FFFFFF */
  --on-steel-sub: 201 211 224;  /* #C9D3E0 */
  --on-steel-dim: 143 160 181;  /* #8FA0B5 */
  --gold-on-steel: 242 193 78;  /* #F2C14E */
  --warn-tint: 255 247 230;     /* #FFF7E6 */
  --warn-edge: 242 215 154;     /* #F2D79A */
  --warn-ink: 122 90 0;         /* #7A5A00 */
  --pill-red: 253 232 230;      /* #FDE8E6 */
  --pill-red-ink: 155 44 31;    /* #9B2C1F */
  --pill-amber: 255 241 207;    /* #FFF1CF */
  --pill-amber-ink: 122 90 0;   /* #7A5A00 */
  --pill-green: 217 240 227;    /* #D9F0E3 */
  --pill-green-ink: 23 88 58;   /* #17583A */
  --pill-blue: 220 231 243;     /* #DCE7F3 */
  --pill-blue-ink: 27 53 80;    /* #1B3550 */
  --pill-grey: 238 240 242;     /* #EEF0F2 */
  --pill-grey-ink: 75 81 96;    /* #4B5160 */

  /* Trade chips (Task 119 item 4, Glenn 18 Oct: "colour with purpose"). Ten
     hues, each a tint with the ink that reads on it at 4.5:1 or better, so a
     Roofing chip is clay on every page and a Plumbing chip is blue. The word
     is always on the chip: the colour is a help to the eye, never the only
     carrier of meaning, which is why the colour-blind palette leaves these
     alone. Green stays money's and red stays danger's: neither is here.
     app.css maps the trades onto the hues (.bq-chip[data-trade]). */
  --trade-clay: 250 228 214;    /* #FAE4D6 */
  --trade-clay-ink: 138 58 20;  /* #8A3A14 */
  --trade-teal: 212 240 236;    /* #D4F0EC */
  --trade-teal-ink: 14 96 88;   /* #0E6058 */
  --trade-sky: 216 236 250;     /* #D8ECFA */
  --trade-sky-ink: 20 82 128;   /* #145280 */
  --trade-blue: 214 230 250;    /* #D6E6FA */
  --trade-blue-ink: 24 70 150;  /* #184696 */
  --trade-wood: 245 232 210;    /* #F5E8D2 */
  --trade-wood-ink: 120 76 20;  /* #784C14 */
  --trade-violet: 234 226 250;  /* #EAE2FA */
  --trade-violet-ink: 84 50 150; /* #543296 */
  --trade-lilac: 236 232 244;   /* #ECE8F4 */
  --trade-lilac-ink: 78 64 112; /* #4E4070 */
  --trade-rose: 252 228 236;    /* #FCE4EC */
  --trade-rose-ink: 150 36 86;  /* #962456 */
  --trade-stone: 235 229 220;   /* #EBE5DC */
  --trade-stone-ink: 92 70 48;  /* #5C4630 */
  --trade-cyan: 212 240 248;    /* #D4F0F8 */
  --trade-cyan-ink: 10 90 120;  /* #0A5A78 */

  /* Sizes (Task 109, .ai/design/layout-rules.md). The only spacing steps:
     4, 8, 16, 24, 32, 48. Six type sizes: the page's money total, the page
     title, a card title, body and every phone input, table text, labels and
     eyebrows. Radii: chip 6, input 8, button 10, card 12, pill round. The
     shell: an 80 px rail, a 60 px top bar (72 from md: up), a 66 px tab bar
     plus the phone's safe area, content at most 1200 px wide. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px;  --sp-4: 24px;  --sp-5: 32px;  --sp-6: 48px;
  --fs-money: 32px; --fs-title: 24px; --fs-card: 20px; --fs-body: 16px; --fs-table: 14px; --fs-label: 12px;
  --r-chip: 6px; --r-input: 8px; --r-btn: 10px; --r-card: 12px; --r-pill: 999px;
  --rail-w: 80px; --topbar-h: 60px; --topbar-h-lg: 72px; --tabbar-h: 66px; --content-w: 1200px;

  /* Fonts -- declared in fonts.css, self-hosted latin subsets, no Google call */
  --font-sans: 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Public Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Dark */
.dark {
  --page: 18 19 22;             /* #121316 */
  --surface: 28 30 35;          /* #1C1E23 */
  --ink: 236 237 239;           /* #ECEDEF */
  --body: 201 204 211;          /* #C9CCD3 */
  --muted: 166 171 182;         /* #A6ABB6 */
  --line: 44 47 54;             /* #2C2F36 */
  --input: 107 113 128;         /* #6B7180 */
  --accent: 242 169 0;          /* #F2A900 */
  --accent-edge: 143 106 0;     /* #8F6A00 -- unchanged from light */
  --on-accent: 22 24 29;        /* #16181D */
  --money: 95 211 154;          /* #5FD39A */
  --money-tint: 18 53 36;       /* #123524 -- Signed/Paid badge background */
  --money-ink: 110 231 160;     /* #6EE7A0 -- Signed/Paid badge text */
  --sent: 191 219 254;          /* #BFDBFE */
  --sent-tint: 23 37 84;        /* #172554 */
  --danger: 252 165 165;        /* #FCA5A5 -- Overdue badge text */
  --danger-tint: 59 23 23;      /* #3B1717 -- Overdue badge background */
  --draft: 203 213 225;         /* #CBD5E1 */
  --draft-tint: 44 47 54;       /* #2C2F36 */
  --totalbar: 11 12 14;         /* #0B0C0E */

  /* Steel. The panel, its raised state and the text on it are the same as light:
     steel is a brand constant, so only the *text* steel uses changes -- #7FA6CF
     reads on a near-black page where #1B3550 would not. */
  --brand2: 27 53 80;           /* #1B3550 */
  --brand2-raised: 43 76 112;   /* #2B4C70 */
  --brand2-text: 127 166 207;   /* #7FA6CF */
  --on-brand2: 217 222 229;     /* #D9DEE5 */
  --on-brand2-muted: 195 207 220; /* #C3CFDC */
  --mist: 35 38 45;             /* #23262D */
  /* The new app shell and its shared parts (Task 109, Glenn approved the
     designs 17 Oct 2026; the pictures are .ai/design/app/*.png). Eyebrows and
     the tab bar's resting labels, the edge of an outline button, the hairline
     between rows, the five pill tints with the ink that reads on each, the
     rail's icons, the text tones on a steel header band and the amber warning
     strip. Steel, the rail and the header text on it are brand constants, so
     they are the same in all four blocks; the pills follow the status colours
     above (red = danger, green = money) so the colour-blind palette moves them
     together. */
  --eyebrow: 166 171 182;       /* #A6ABB6 */
  --edge: 58 62 71;             /* #3A3E47 */
  --divider: 36 39 46;          /* #24272E */
  --rail-icon: 154 163 178;     /* #9AA3B2 */
  --rail-active: 255 255 255;   /* #FFFFFF */
  --count-badge: 200 16 46;     /* #C8102E -- the open-quotes count on the menu (Task 121): signal red, white figure */
  --on-count-badge: 255 255 255; /* #FFFFFF */
  --on-steel-sub: 201 211 224;  /* #C9D3E0 */
  --on-steel-dim: 143 160 181;  /* #8FA0B5 */
  --gold-on-steel: 242 193 78;  /* #F2C14E */
  --warn-tint: 58 46 10;        /* #3A2E0A */
  --warn-edge: 122 90 0;        /* #7A5A00 */
  --warn-ink: 242 193 78;       /* #F2C14E */
  --pill-red: 59 23 23;         /* #3B1717 */
  --pill-red-ink: 252 165 165;  /* #FCA5A5 */
  --pill-amber: 58 46 10;       /* #3A2E0A */
  --pill-amber-ink: 242 193 78; /* #F2C14E */
  --pill-green: 18 53 36;       /* #123524 */
  --pill-green-ink: 110 231 160; /* #6EE7A0 */
  --pill-blue: 23 37 84;        /* #172554 */
  --pill-blue-ink: 191 219 254; /* #BFDBFE */
  --pill-grey: 44 47 54;        /* #2C2F36 */
  --pill-grey-ink: 203 213 225; /* #CBD5E1 */

  /* Trade chips on a dark page: the same ten hues, the tint deep and the ink
     light (Task 119 item 4). The colour-blind blocks inherit these. */
  --trade-clay: 58 36 24;       /* #3A2418 */
  --trade-clay-ink: 242 176 138; /* #F2B08A */
  --trade-teal: 20 52 48;       /* #143430 */
  --trade-teal-ink: 140 220 208; /* #8CDCD0 */
  --trade-sky: 22 44 62;        /* #162C3E */
  --trade-sky-ink: 150 204 242; /* #96CCF2 */
  --trade-blue: 24 38 66;       /* #182642 */
  --trade-blue-ink: 160 194 250; /* #A0C2FA */
  --trade-wood: 56 44 24;       /* #382C18 */
  --trade-wood-ink: 236 204 150; /* #ECCC96 */
  --trade-violet: 46 34 70;     /* #2E2246 */
  --trade-violet-ink: 200 180 250; /* #C8B4FA */
  --trade-lilac: 44 40 60;      /* #2C283C */
  --trade-lilac-ink: 196 188 224; /* #C4BCE0 */
  --trade-rose: 62 28 42;       /* #3E1C2A */
  --trade-rose-ink: 250 170 200; /* #FAAAC8 */
  --trade-stone: 52 46 40;      /* #342E28 */
  --trade-stone-ink: 220 206 188; /* #DCCEBC */
  --trade-cyan: 18 48 60;       /* #12303C */
  --trade-cyan-ink: 140 214 240; /* #8CD6F0 */
}

/* Colour-blind friendly, light. Pine green and Overdue red both turn olive under
   deuteranopia, so money and danger move to a blue / orange-vermillion pair that
   stays far apart for protan and deutan vision (Vienot 1999; the separation is
   measured by tests/test_design_tokens.py). Tritanopia is a blue-vs-yellow axis
   this pair barely touches either way -- there the status words carry the meaning.
   Graphite and golden yellow are unchanged. */
[data-palette="cvd"] {
  --page: 244 244 242;          /* #F4F4F2 */
  --surface: 255 255 255;       /* #FFFFFF */
  --ink: 22 24 29;              /* #16181D */
  --body: 44 48 58;             /* #2C303A */
  --muted: 75 81 96;            /* #4B5160 */
  --line: 222 224 228;          /* #DEE0E4 */
  --input: 124 130 144;         /* #7C8290 */
  --accent: 242 169 0;          /* #F2A900 -- unchanged */
  --accent-edge: 143 106 0;     /* #8F6A00 */
  --on-accent: 22 24 29;        /* #16181D */
  --money: 29 95 166;           /* #1D5FA6 */
  --money-tint: 220 235 251;    /* #DCEBFB */
  --money-ink: 29 95 166;       /* #1D5FA6 on the tint */
  --sent: 248 250 252;          /* #F8FAFC -- text on the slate tint */
  --sent-tint: 71 85 105;       /* #475569 */
  --danger: 154 51 0;           /* #9A3300 */
  --danger-tint: 253 231 218;   /* #FDE7DA */
  --draft: 44 48 58;            /* #2C303A */
  --draft-tint: 236 237 240;    /* #ECEDF0 */
  --totalbar: 22 24 29;         /* #16181D */

  /* Steel: unchanged in this palette too. Blue is safe for all three common
     types of colour blindness, so the second brand colour does not move. */
  --brand2: 27 53 80;           /* #1B3550 */
  --brand2-raised: 43 76 112;   /* #2B4C70 */
  --brand2-text: 27 53 80;      /* #1B3550 */
  --on-brand2: 217 222 229;     /* #D9DEE5 */
  --on-brand2-muted: 195 207 220; /* #C3CFDC */
  --mist: 230 233 238;          /* #E6E9EE */
  /* The new app shell and its shared parts (Task 109, Glenn approved the
     designs 17 Oct 2026; the pictures are .ai/design/app/*.png). Eyebrows and
     the tab bar's resting labels, the edge of an outline button, the hairline
     between rows, the five pill tints with the ink that reads on each, the
     rail's icons, the text tones on a steel header band and the amber warning
     strip. Steel, the rail and the header text on it are brand constants, so
     they are the same in all four blocks; the pills follow the status colours
     above (red = danger, green = money) so the colour-blind palette moves them
     together. */
  --eyebrow: 138 144 156;       /* #8A909C */
  --edge: 201 205 212;          /* #C9CDD4 */
  --divider: 238 240 242;       /* #EEF0F2 */
  --rail-icon: 154 163 178;     /* #9AA3B2 */
  --rail-active: 255 255 255;   /* #FFFFFF */
  --count-badge: 154 51 0;      /* #9A3300 -- the count badge follows the palette's danger orange (Task 121) */
  --on-count-badge: 255 255 255; /* #FFFFFF */
  --on-steel-sub: 201 211 224;  /* #C9D3E0 */
  --on-steel-dim: 143 160 181;  /* #8FA0B5 */
  --gold-on-steel: 242 193 78;  /* #F2C14E */
  --warn-tint: 255 247 230;     /* #FFF7E6 */
  --warn-edge: 242 215 154;     /* #F2D79A */
  --warn-ink: 122 90 0;         /* #7A5A00 */
  --pill-red: 253 231 218;      /* #FDE7DA */
  --pill-red-ink: 154 51 0;     /* #9A3300 */
  --pill-amber: 255 241 207;    /* #FFF1CF */
  --pill-amber-ink: 122 90 0;   /* #7A5A00 */
  --pill-green: 220 235 251;    /* #DCEBFB */
  --pill-green-ink: 29 95 166;  /* #1D5FA6 */
  --pill-blue: 220 231 243;     /* #DCE7F3 */
  --pill-blue-ink: 27 53 80;    /* #1B3550 */
  --pill-grey: 238 240 242;     /* #EEF0F2 */
  --pill-grey-ink: 75 81 96;    /* #4B5160 */
}

/* Colour-blind friendly, dark */
.dark[data-palette="cvd"] {
  --page: 18 19 22;             /* #121316 */
  --surface: 28 30 35;          /* #1C1E23 */
  --ink: 236 237 239;           /* #ECEDEF */
  --body: 201 204 211;          /* #C9CCD3 */
  --muted: 166 171 182;         /* #A6ABB6 */
  --line: 44 47 54;             /* #2C2F36 */
  --input: 107 113 128;         /* #6B7180 */
  --accent: 242 169 0;          /* #F2A900 -- unchanged */
  --accent-edge: 143 106 0;     /* #8F6A00 */
  --on-accent: 22 24 29;        /* #16181D */
  --money: 140 194 255;         /* #8CC2FF */
  --money-tint: 22 38 61;       /* #16263D */
  --money-ink: 140 194 255;     /* #8CC2FF on the tint */
  --sent: 203 213 225;          /* #CBD5E1 */
  --sent-tint: 44 47 54;        /* #2C2F36 */
  --danger: 255 176 138;        /* #FFB08A */
  --danger-tint: 58 30 16;      /* #3A1E10 */
  --draft: 203 213 225;         /* #CBD5E1 */
  --draft-tint: 44 47 54;       /* #2C2F36 */
  --totalbar: 11 12 14;         /* #0B0C0E */

  /* Steel: same values as .dark -- see the note there. */
  --brand2: 27 53 80;           /* #1B3550 */
  --brand2-raised: 43 76 112;   /* #2B4C70 */
  --brand2-text: 127 166 207;   /* #7FA6CF */
  --on-brand2: 217 222 229;     /* #D9DEE5 */
  --on-brand2-muted: 195 207 220; /* #C3CFDC */
  --mist: 35 38 45;             /* #23262D */
  /* The new app shell and its shared parts (Task 109, Glenn approved the
     designs 17 Oct 2026; the pictures are .ai/design/app/*.png). Eyebrows and
     the tab bar's resting labels, the edge of an outline button, the hairline
     between rows, the five pill tints with the ink that reads on each, the
     rail's icons, the text tones on a steel header band and the amber warning
     strip. Steel, the rail and the header text on it are brand constants, so
     they are the same in all four blocks; the pills follow the status colours
     above (red = danger, green = money) so the colour-blind palette moves them
     together. */
  --eyebrow: 166 171 182;       /* #A6ABB6 */
  --edge: 58 62 71;             /* #3A3E47 */
  --divider: 36 39 46;          /* #24272E */
  --rail-icon: 154 163 178;     /* #9AA3B2 */
  --rail-active: 255 255 255;   /* #FFFFFF */
  --count-badge: 154 51 0;      /* #9A3300 -- the count badge follows the palette's danger orange (Task 121) */
  --on-count-badge: 255 255 255; /* #FFFFFF */
  --on-steel-sub: 201 211 224;  /* #C9D3E0 */
  --on-steel-dim: 143 160 181;  /* #8FA0B5 */
  --gold-on-steel: 242 193 78;  /* #F2C14E */
  --warn-tint: 58 46 10;        /* #3A2E0A */
  --warn-edge: 122 90 0;        /* #7A5A00 */
  --warn-ink: 242 193 78;       /* #F2C14E */
  --pill-red: 58 30 16;         /* #3A1E10 */
  --pill-red-ink: 255 176 138;  /* #FFB08A */
  --pill-amber: 58 46 10;       /* #3A2E0A */
  --pill-amber-ink: 242 193 78; /* #F2C14E */
  --pill-green: 22 38 61;       /* #16263D */
  --pill-green-ink: 140 194 255; /* #8CC2FF */
  --pill-blue: 23 37 84;        /* #172554 */
  --pill-blue-ink: 191 219 254; /* #BFDBFE */
  --pill-grey: 44 47 54;        /* #2C2F36 */
  --pill-grey-ink: 203 213 225; /* #CBD5E1 */
}

/* Base type: body in Public Sans, headings and big numbers in Space Grotesk.
   Tailwind's preflight puts the stack on <html>; this rule on <body> is what
   wins for the body element itself. */
body { font-family: var(--font-sans); }
h1, h2, h3 { font-family: var(--font-display); }

/* Dyslexia friendly (data-font="dyslexia"). Colours are untouched -- it is
   whichever palette is on. OpenDyslexic for body and headings (falling back to
   Lexend, then Public Sans), wider letters and words, looser lines, a shorter
   measure, one step up in base size. The spec's honest note: the research on
   special dyslexia fonts is mixed, the spacing and line length do most of the
   work; we offer it anyway. */
[data-font="dyslexia"] {
  --font-sans: 'OpenDyslexic', 'Lexend', 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'OpenDyslexic', 'Lexend', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  word-spacing: 0.08em;
}

/* No ALL CAPS eyebrows and no italics anywhere. !important is needed because the
   utilities (.uppercase, .italic) split specificity with this rule and
   tailwind.css loads after tokens.css. */
[data-font="dyslexia"] * {
  text-transform: none !important;
  font-style: normal !important;
}

[data-font="dyslexia"] p {
  max-width: 65ch;
  text-align: left;
}

/* Larger text (data-text="large", Settings -> Display, Task 114). One step up
   on the root size, which every rem-based utility follows, and one step up on
   each of the six type-size tokens the house classes read, so the page's own
   type grows with it. Colours and spacing are untouched. */
[data-text="large"] {
  font-size: 18px;
  --fs-money: 36px;
  --fs-title: 27px;
  --fs-card: 22px;
  --fs-body: 18px;
  --fs-table: 16px;
  --fs-label: 13px;
}

/* Reduce motion (data-motion="reduce", Settings -> Display, Task 114): no
   animation and no transition anywhere, and no smooth scrolling. The phone's
   own "reduce motion" setting asks for the same thing. */
[data-motion="reduce"] *,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  .bq-app *, .bq-app *::before, .bq-app *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}