/* The board's design tokens: the raw palette, type scale, spacing, corners and elevation of the approved new look (a warm canvas, a card a step lighter,
   near-black ink as the one accent), measured in pixels from the owner's reference. The palette is the approved prototype's (mocks/signoff-proto-3), every colour
   in light and in dark and no other: no blue, no system green; test/design.test.mjs fails on any colour drawn outside it. index.html maps its own names (--page, --tile, --text, ...) onto these,
   and ui.css builds the shared parts from them; change a value here and every screen follows. Light and dark differ in colour only. */
@font-face { font-family: Inter; src: url(inter.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  color-scheme: light dark;
  /* The new look's surfaces and ink: the canvas, a card on it, a white raised part (an icon tile), the pressed segment, a field sunk into a card. */
  --tk-canvas: #E8E4E0; --tk-card: #F3F3F0; --tk-raised: #FFFFFF; --tk-on: #FBFBFA; --tk-inset: #EAE7E3;
  --tk-ink: #121210; --tk-text: #21211E; --tk-text-secondary: #5C5C59; --tk-text-tertiary: #666663; --tk-idle: #AAAAAA;
  /* A progress bar's track and fill, the dot grid's middle tone and empty cell, and the hairline between rows in a card. */
  --tk-track: #E5E3DE; --tk-fill: #2D2D2A; --tk-mid: #D3CCC9; --tk-light: #E6E2DE; --tk-line: #DCD8D4;
  /* The board's older names, on the new surfaces. */
  --tk-surface: var(--tk-card); --tk-surface-high: var(--tk-raised); --tk-surface-highest: var(--tk-on); --tk-surface-selected: var(--tk-inset); --tk-input: var(--tk-inset);
  --tk-grouped: var(--tk-canvas); --tk-rail: var(--tk-line);
  /* The only colours that carry meaning: red for what failed or waits on you (with white words on it), amber for a warning, and the green of a rise.
     Done is the bar's ink fill; a link, a main button and a focus ring are ink. The dock's round Search is a warm near-black of its own. */
  --tk-critical: #D7372B; --tk-on-critical: #FFFFFF; --tk-warn: #C8841A; --tk-up: #2BB673; --tk-go: #262624; --tk-on-go: #FFFFFF;
  /* The dim behind a sheet, and the light ground of a button on an ink pill (the toast's Undo). */
  --tk-scrim: rgba(30, 24, 18, 0.28); --tk-on-ink-press: rgba(255, 255, 255, 0.14);
  /* The priority chip: P0 and P1 tinted, P2 and P3 quiet; each a ground and its text. */
  --tk-p0: #F6DCD8; --tk-p0-text: #B42318; --tk-p1: #F5E6CF; --tk-p1-text: #8F4E08; --tk-p2: #E6E3DE; --tk-p2-text: #4F4B46; --tk-p3: #ECEAE6; --tk-p3-text: #6B6761;
  /* Type: Inter. A page title, a section head, a big number, a row's title, its second line and a small label, with their line heights (each a multiple of 4).
     The older title, body, secondary and footnote sizes stay for the screens not yet in the new look. */
  --tk-font: Inter, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --tk-fs-page: 1.5rem; --tk-lh-page: 2.75rem; --tk-fs-head: 1.125rem; --tk-lh-head: 1.75rem; --tk-fs-big: 1.5rem; --tk-lh-big: 2rem;
  --tk-fs-row: 0.875rem; --tk-lh-row: 1.25rem; --tk-fs-meta: 0.8125rem; --tk-lh-meta: 1rem; --tk-fs-small: 0.75rem; --tk-lh-small: 1rem;
  --tk-fs-title: 1.0625rem; --tk-lh-title: 1.375rem;
  --tk-fs-body: 1rem; --tk-lh-body: 1.5rem;
  --tk-fs-secondary: 0.9375rem; --tk-lh-secondary: 1.25rem;
  --tk-fs-footnote: 0.8125rem; --tk-lh-footnote: 1.125rem;
  --tk-fw-regular: 400; --tk-fw-medium: 500; --tk-fw-semibold: 600; --tk-fw-bold: 700;
  /* A 4px grid (8px between blocks), the 16px page gutter, and the corners: a hero or list card, a tile, an icon tile, a control. */
  --tk-sp-1: 0.25rem; --tk-sp-2: 0.5rem; --tk-sp-3: 0.75rem; --tk-sp-4: 1rem; --tk-sp-6: 1.5rem; --tk-sp-8: 2rem; --tk-gutter: 1rem;
  --tk-r-card: 1.375rem; --tk-r-tile: 1.25rem; --tk-r-icon: 0.75rem; --tk-r-ctl: 0.625rem;
  /* Elevation: a card's soft lift with a light top edge, a raised control (the pressed segment, the dock's tab), and the dock. */
  --tk-hl: rgba(255, 255, 255, 0.75);
  --tk-elev-card: 0 1px 2px rgba(60, 40, 20, 0.05), 0 6px 18px rgba(60, 40, 20, 0.045);
  --tk-elev-raised: 0 1px 2px rgba(40, 30, 20, 0.10), 0 2px 8px rgba(40, 30, 20, 0.06);
  --tk-elev-dock: 0 2px 6px rgba(40, 30, 20, 0.06), 0 10px 28px rgba(40, 30, 20, 0.10);
  /* An icon tile's lift, a sheet rising from the foot, the dock's Search, and a floating pill or menu (the toast). */
  --tk-elev-tile: 0 1px 2px rgba(40, 30, 20, 0.08), 0 2px 6px rgba(40, 30, 20, 0.05); --tk-elev-sheet: 0 -8px 32px rgba(30, 20, 10, 0.12);
  --tk-elev-go: 0 6px 18px rgba(20, 16, 12, 0.25); --tk-elev-float: 0 8px 24px rgba(0, 0, 0, 0.2);
}
@media (prefers-color-scheme: dark) { :root {
  --tk-canvas: #131210; --tk-card: #1E1D1A; --tk-raised: #2A2825; --tk-on: #34322E; --tk-inset: #262421;
  --tk-ink: #F4F2EE; --tk-text: #E9E6E1; --tk-text-secondary: #BDB8B1; --tk-text-tertiary: #A59F98; --tk-idle: #6C6863;
  --tk-track: #2F2D2A; --tk-fill: #ECE9E4; --tk-mid: #55514C; --tk-light: #2B2926; --tk-line: #2E2C29;
  --tk-critical: #FF6B5E; --tk-on-critical: var(--tk-canvas); --tk-go: var(--tk-ink); --tk-on-go: var(--tk-canvas);
  --tk-scrim: rgba(0, 0, 0, 0.5); --tk-on-ink-press: rgba(0, 0, 0, 0.1);
  --tk-p0: rgba(255, 107, 94, 0.16); --tk-p0-text: #FF8E84; --tk-p1: rgba(242, 166, 72, 0.15); --tk-p1-text: #F2B262; --tk-p2: #34322E; --tk-p2-text: #CFCAC3; --tk-p3: #2C2A27; --tk-p3-text: #9C978F;
  --tk-hl: rgba(255, 255, 255, 0.05);
  --tk-elev-card: 0 1px 2px rgba(0, 0, 0, 0.3); --tk-elev-raised: 0 1px 3px rgba(0, 0, 0, 0.45); --tk-elev-dock: 0 8px 24px rgba(0, 0, 0, 0.5); --tk-elev-tile: none;
} }