/* KODA Cleaning Services (org 1247): the platform's brand tokens and font, the one source.
   Every page under app/ links this file in its <head> before its own styles; a page's own rules win.
   Brand: UI-STANDARD §0 (Zach, 2026-10-05) and brand/BRAND-STYLE.md in the governance repo.
   Guarded by netlify/functions/_test/brand-unit-test.js (npm run test:brand): no off-brand blue under app/, every
   page links this file, and every var(--koda-*) outside it carries this file's value as its fallback.

   Which orange where (WCAG 2.x contrast):
   - --koda-accent #D43A02: buttons (white text 4.77:1), links and accent text on white (4.77), focus rings,
     selected and hover borders. As text it needs a white or near-white ground (#F9F9F9 or lighter):
     on #F4F4F5 it is only 4.34, on the pages' #f5f6f8 ground 4.41, on --koda-wash 4.32.
   - --koda-orange-text-on-grey #C53501: orange text and links on a grey ground only (Zach, 2026-10-21): 5.00 on the
     pages' #f5f6f8, 4.92 on #F4F4F5, 4.54 on #EBEBED; below AA on #E4E4E7 (4.26) and darker. Never a button, a rule,
     a chip or text on white: those keep --koda-accent and --koda-rule. A link in it keeps its underline (WCAG 1.4.1).
     test:brand allows the hex only here and as this token's fallback.
   - --koda-rule #FF4500: rules, marks and chip edges only. Never text and never a button (3.44 on white).
   - --koda-wash #FFF1EA: the tint behind a selected or accented thing; text on it is --koda-text (12.8).
   - --koda-wash-line #F2B8A0: the border or glow of a tinted thing (the kit alert's border). */

/* Inter, self-hosted (SIL Open Font License 1.1, fonts/inter-v20/OFL.txt): @fontsource-variable/inter 5.3.0,
   the Google Fonts v20 build. One variable file per subset covers weights 100–900; the browser fetches a file
   only when the page shows a character in its range. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-v20/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-v20/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-v20/inter-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-v20/inter-latin-ext-wght-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* orange */
  --koda-accent: #D43A02;      /* buttons, links, focus rings, selected borders */
  --koda-on-accent: #FFFFFF;   /* text on an accent button */
  --koda-orange-text-on-grey: #C53501; /* orange text and links on a grey ground only */
  --koda-rule: #FF4500;        /* rules, marks, chip edges; never text or buttons */
  --koda-wash: #FFF1EA;        /* tint behind a selected or accented thing */
  --koda-wash-line: #F2B8A0;   /* border or glow of a tinted thing */
  /* ink and neutrals (the rail's, app/office/nav.js) */
  --koda-text: #2B2B2B;        /* Charcoal: body text */
  --koda-text-soft: #55565C;   /* secondary text, 7.3 on white */
  --koda-paper: #FCFCFC;       /* page ground */
  --koda-surface: #F4F4F5;     /* panels, wells, the rail */
  --koda-surface-2: #EBEBED;   /* deeper wells, hover */
  --koda-line: #E4E4E7;        /* hairlines, card borders */
  --koda-line-firm: #D1D1D6;   /* emphasis rules, control borders */
  /* type */
  --koda-font: Inter, "Segoe UI", system-ui, Arial, sans-serif;
  /* office page width (the .koda-page rule below) */
  --koda-page-max: 120rem;     /* 1920 px: an office page fills the room beside the rail; centred only past this */
  --koda-measure: 45rem;       /* 720 px: a form column */
  --koda-prose: 65ch;          /* a paragraph: 45-75 characters */
}

/* Zero-specificity defaults, so a page that sets nothing still reads as KODA; any rule a page writes wins. */
:where(html) { font-family: var(--koda-font); }
:where(a) { color: var(--koda-accent); }

/* THE OFFICE PAGE WIDTH: one rule for every office page's main container (Zach, 2026-10-21, on /office/proposals:
   "why arent we taking advantage of the entire screen space on all build pages"). Lists, tables and boards fill the
   room beside the rail (nav.js pads the page by the rail's width and the bar's height) up to --koda-page-max, with the
   page's own modest gutter. A form keeps a ~720 px column (.koda-measure on the form or its field block), no field is
   ever wider, and a paragraph or a state line keeps 45-75 characters (those two at zero specificity: a page's own rule
   wins). Guarded by test:page-width; the crew phone (app/field/) keeps its own width and never uses these. */
.koda-page { box-sizing: border-box; max-width: var(--koda-page-max); margin-inline: auto; }
.koda-measure { max-width: var(--koda-measure); }
:where(.koda-page p, .koda-page .koda-state) { max-width: var(--koda-prose); }
:where(.koda-page) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) { max-width: var(--koda-measure); }