/* ═══════════════════════════════════════════════════════════════════════════ Trip Schedule — design tokens · MAC-FLAVOURED BUILD ─────────────────────────────────────────────────────────────────────────── Same three layers and the SAME TOKEN NAMES as the default build, so styles.css is shared logic and this file is the whole theme. Diff this against ../trip-schedule/tokens.css to see the entire visual change. Direction: macOS Human Interface Guidelines — SF type ramp, macOS system grays, systemBlue family, macOS corner radii, the macOS focus ring, and vibrancy on the chrome. ── Where this deliberately departs from Apple ────────────────────────────── 1. THE ACCENT IS DARKER THAN systemBlue. White on Apple's #007AFF measures 4.02:1 — it fails WCAG AA for normal text and is nowhere near the 7:1 this project holds. The accent here is #0040B5: same systemBlue family, 8.75:1 on white and 7.40:1 on the macOS window gray. Apple gets away with #007AFF by using large, bold labels on it; a dense dispatch board cannot. Actual systemBlue (#0A84FF) IS used for the focus ring, because a ring is a non-text indicator and only needs 3:1 — which it clears (3.65:1 on white). That is the most recognisable Mac signal in the build. 2. CONTROLS STAY TOUCH-SIZED. Native macOS buttons are 22-28px tall. These stay at 36/44px because the iPad/iPhone roadmap needs ≥44px hit areas, and shrinking the visual box while keeping a 44px invisible hit area makes adjacent targets overlap. Mac character comes from type, corners, colour and chrome instead. 3. NO SQUIRCLES, NO SF SYMBOLS. CSS border-radius is a circular arc, not Apple's continuous corner, and SF Symbols are not licensed for the web. Radii are tuned to macOS values; icons remain text or inline SVG. ═══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light dark; /* ───────────────────────────────────────────────────────────────────── 1. PRIMITIVES — macOS system palette ───────────────────────────────────────────────────────────────────── */ /* macOS system grays. Window chrome is gray, content areas are white. */ --slate-0: #ffffff; --slate-50: #f5f5f7; /* grouped content */ --slate-100: #ececec; /* window background */ --slate-200: #e3e3e8; /* segmented track / fills */ --slate-300: #d2d2d7; /* separator (decorative) */ --slate-500: #86868b; /* control border, >= 3:1 */ --slate-600: #5a5a5f; /* tertiary label (AA only) */ --slate-700: #45454a; /* secondary label — AAA */ --slate-900: #1d1d1f; /* label — Apple's near-black */ /* systemBlue family. --navy-700 is the accent: the deepest step that keeps white text at AAA on every surface it lands on. */ --navy-700: #0040b5; /* accent — 8.75:1 white-on */ --navy-800: #003396; /* pressed */ --navy-100: #dce8fb; /* Focus. Actual systemBlue, because a ring is non-text (needs 3:1). */ --focus-600: #0a84ff; --focus-glow: light-dark(rgba(10, 132, 255, 0.45), rgba(10, 132, 255, 0.55)); /* Amber — the "changed since last view" signal. Background hue locked to the handover value; text darkened for more headroom on Apple's grays. */ --amber-50: #fff7ec; --amber-100: #FFECD6; --amber-400: #e0a64a; --amber-600: #a8690c; --amber-800: #5c3d06; /* 8.57:1 on the amber wash */ --amber-900: #42341e; --amber-200-dark: #ffe0b0; /* Green — inline edit chrome. ── Changed on Adam's instruction, 2026-09-15. ────────────────────────── These were #a5d6a7 / #c8e6c9 / #81c784, "preserved verbatim from the handover spec". That note is now HISTORY, not a constraint: he found the fill too dark, and measuring it showed the weight was buying nothing. #a5d6a7 is 1.64:1 against white and the old #81c784 edge was 2.01:1 — both under the 3:1 that WCAG 1.4.11 wants of a state indicator. The row was loud AND non-compliant. So the signal moved from the fill to the edge (2026-09-15), then from the edge to the action bar (2026-09-24). The fill is pale (1.25:1, contributing nothing formally, exactly as before) and the bar now carries the state at 4.24:1 on white and 3.40:1 on the fill. Do not "restore" the old hexes. */ --green-editing: #d4ecda; --green-hover: #b4dbbd; /* DARKER than the fill now: see note below */ --green-edge: #3f8a4c; --green-700: #095a20; /* systemGreen, darkened to AAA */ --green-50: #e9f6ec; /* Red — systemRed, darkened to AAA (7.86:1 on white). */ --red-600: #a80010; --red-700: #85000c; --red-100: #fdeceb; --red-300: #e9a9a4; /* Blue — "in progress" phase marker. */ --blue-700: #0040b5; --blue-200: #a9d4ff; /* link on the amber banner wash, dark — 7.79:1 */ /* ───────────────────────────────────────────────────────────────────── 2. SEMANTIC — surfaces ───────────────────────────────────────────────────────────────────── */ --color-bg: light-dark(var(--slate-100), #1e1e1e); /* macOS window gray */ --color-surface: light-dark(var(--slate-0), #2c2c2e); /* content area */ --color-surface-sunken: light-dark(var(--slate-50), #161617); --color-surface-raised: light-dark(var(--slate-0), #3a3a3c); --color-surface-hover: light-dark(#dcdce1, #454548); /* #505 (e): was slate-200 / #3a3a3c, 1.28:1 / 1.23:1 on the surface */ /* text — Apple's label tiers */ --color-text: light-dark(var(--slate-900), #f5f5f7); /* 14.3:1 on window — AAA */ /* 12.8:1 on content — AAA */ --color-text-muted: light-dark(var(--slate-700), #cbcbd2); /* 8.1:1 on window — AAA */ /* 8.6:1 on content, 7.0:1 on #3a3a3c — AAA */ --color-text-subtle: light-dark(var(--slate-600), #98989d); /* AA, decorative only */ --color-text-accent: light-dark(var(--navy-700), #8fc7ff); --color-border: light-dark(var(--slate-300), #48484a); /* hairline separator */ --color-border-strong: light-dark(var(--slate-500), #8a8a8f); /* >= 3:1, controls */ /* 4.1:1 on content */ --color-border-accent: light-dark(var(--navy-700), #8fc7ff); --color-border-input: light-dark(#949494, #757575); /* #505 (a): the owner's greys as they were (tankering.css), now named */ --color-focus-quiet: light-dark(#6e6e73, #8e8e93); /* #505 (a): the quiet focus edge of the phone fields */ --focus-glow-quiet: light-dark(rgba(110, 110, 115, 0.30), rgba(142, 142, 147, 0.45)); --color-selected-edge: light-dark(var(--navy-700), #8fc7ff); /* #505 (b): >= 3:1 edge of a chosen segment (2 px ring) */ --color-accent: light-dark(var(--navy-700), #17539f); --color-accent-hover: light-dark(var(--navy-800), #1b5fc6); --color-accent-subtle: light-dark(var(--navy-100), #1c2a3d); --color-on-accent: #ffffff; --color-focus: light-dark(var(--focus-600), #0a84ff); /* systemBlue, 4.6:1 on the window */ --color-danger: light-dark(var(--red-600), #ffb3ac); --color-danger-hover: light-dark(var(--red-700), #ffc9c4); --color-danger-surface: light-dark(var(--red-100), #3b1c1a); --color-danger-border: light-dark(var(--red-300), #7a3a35); --color-danger-border-strong: light-dark(var(--red-600), #e0746b); /* >= 3:1, a destructive control's edge (#427): light 6.1:1 on #e3e3e8, dark 3.7:1 on #3a3a3c */ --color-success: light-dark(var(--green-700), #7fd0a0); --color-success-surface: light-dark(var(--green-50), #153524); --color-success-text: light-dark(var(--green-700), #a3e0ba); /* success TEXT (#804 S3-6b, the Studio's tokens.md): dark 7.53:1 on the raised card, where --color-success is 6.18:1; dots and edges keep --color-success */ /* ───────────────────────────────────────────────────────────────────── 2b. SEMANTIC — typography (SF, at macOS metrics) ───────────────────────────────────────────────────────────────────── */ /* system-ui / -apple-system already resolve to SF Pro on macOS and iOS; ui-monospace to SF Mono. The Mac character comes from the metrics below, not from naming a font. */ --font-sans: system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* macOS UI is 13px, not 14px. The ramp is Apple's, shifted into rem so the browser's own font-size preference still scales everything. */ --text-2xs: 0.6875rem; /* 11px — caption / badge */ --text-xs: 0.75rem; /* 12px — secondary, hints */ --text-sm: 0.8125rem; /* 13px — table body / macOS UI default */ --text-base: var(--text-sm); /* #430: folded into --text-sm; kept as an alias only for location.css:179 (#426/ #429's file, off-limits here) */ --text-md: 0.875rem; /* 14px — emphasised body */ --text-lg: 1rem; /* 16px — block titles */ --text-xl: 1.1875rem; /* 19px — section headings */ --text-2xl: 1.375rem; /* 22px — page heading */ --text-3xl: 1.75rem; /* 28px — login */ /* macOS almost never uses 700 for UI text — titles are semibold. */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; /* macOS almost never uses 700 for UI text */ --weight-bold: var(--weight-semibold); /* #430: folded into --weight-semibold; kept as an alias only for docs/tankering/mockup.html:74 (a real consumer, `var(--weight-bold)`, found on review — not dead) */ --leading-none: 1; --leading-tight: 1.18; --leading-snug: 1.3; --leading-normal: 1.45; --leading-relaxed: 1.6; /* SF tightens tracking as size goes up; Apple's display sizes sit near -0.022em. Small all-caps labels open up instead. */ --tracking-tight: -0.022em; --tracking-normal: -0.005em; --tracking-wide: 0.01em; --tracking-caps: 0.06em; /* ───────────────────────────────────────────────────────────────────── 2c. SEMANTIC — space, shape, elevation, motion ───────────────────────────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; --space-12: 3rem; /* #613: the page's side gutter: a layer slid back on screen keeps it from each edge, and a width cap leaves it (B24, K7). 16 px, the Studio's phone gutter (S2-613 round 2; #620 fix 4), fixed at every text size: an inset is not a text size (S10's ruling; #620 fix 5). */ --page-gutter: 16px; /* macOS corner radii: controls 6, cards/popovers 10, sheets 14. */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-control: var(--radius-sm); /* #505 (c): the shape rules, docs/contracts/styles.md */ --radius-card: var(--radius-md); --radius-lg: 14px; --radius-full: 999px; /* macOS shadows are tight and low-contrast, with a hairline edge. */ /* A shadow is a comma-separated LIST, and light-dark() takes exactly two arguments — so the two lists are named first and the choice is made between the names. */ /* macOS animation is quick and eased-out. */ --motion-instant: 70ms; --motion-fast: 120ms; --ease-out: cubic-bezier(.25, .1, .25, 1); /* ───────────────────────────────────────────────────────────────────── 2d. SEMANTIC — ergonomics Unchanged from the default build on purpose. See departure note 2. ───────────────────────────────────────────────────────────────────── */ --tap-target: 44px; --control-h-sm: 32px; --control-h-md: 36px; --control-h-lg: 44px; /* macOS draws a soft 3px ring just outside the control. */ --focus-ring-width: 3px; --focus-ring-offset: 1px; /* MAC: AppKit separators are a single device pixel, which on a Retina display is half a CSS px. Browsers round this up on 1x rather than dropping it, so it degrades to a normal hairline. */ --hairline: 0.5px; --layer-raised: 10; --layer-sticky: 40; --layer-popover: 80; /* #244(b): the layout-churn values styles.css repeated across selectors, named by the role each fills, not the value, so a layout change edits a token instead of hunting selectors. Breakpoints (40rem, 64rem) stay literal — custom properties do not resolve inside @media. */ --measure-prose: 80ch; /* a running-text block: legend, briefing docs */ --measure-narrow: 62ch; /* a short help/status paragraph under a form */ --measure-cell: 24rem; /* a truncated table cell or detail bubble */ --measure-field: 10rem; /* a form field / grid column of field width */ --measure-line: 1.4em; /* one reserved text line: msg slot, textarea */ --row-label-width: 3.75rem; /* the mobile flight-table row-label column */ --print-ink: #000; --print-paper: #fff; /* ─── Mac-specific additions (not in the default build) ─── */ --segment-track: light-dark(var(--slate-200), #1e1e1e); --segment-pill: light-dark(var(--slate-0), #48484a); /* #430(d): raw rgba with no dark value, given a light/dark pair. The light side is unchanged from the literal it replaces; the dark side is tuned so the same surface reads at the same rough weight on a dark window. */ --scrollbar-thumb: light-dark(rgba(127, 127, 127, .45), rgba(170, 170, 170, .45)); --scrollbar-thumb-hover: light-dark(rgba(127, 127, 127, .7), rgba(190, 190, 190, .7)); --dialog-backdrop: light-dark(rgba(0, 0, 0, .35), rgba(0, 0, 0, .6)); --tab-track-edge: light-dark(rgba(0, 0, 0, .07), rgba(255, 255, 255, .08)); --tab-hover-tint: light-dark(rgba(127, 127, 127, .12), rgba(170, 170, 170, .18)); --tab-pill-shadow: light-dark(0 1px 2px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .45)); /* ───────────────────────────────────────────────────────────────────── 3. COMPONENT tokens ───────────────────────────────────────────────────────────────────── */ --table-bg: var(--color-surface); --table-header-bg: light-dark(var(--slate-50), #262628); --table-header-text: var(--color-text-muted); --table-stripe: light-dark(var(--slate-50), #262628); --table-gridline: light-dark(var(--color-border), #48484a); --table-row-hover: light-dark(var(--slate-200), #3a3a3c); --table-cell-pad-y: var(--space-2); --table-cell-pad-x: var(--space-3); --cell-changed-bg: light-dark(var(--amber-100), var(--amber-900)); --cell-changed-edge: light-dark(var(--amber-600), var(--amber-400)); --cell-changed-text: light-dark(var(--amber-800), var(--amber-200-dark)); /* #911 (a), S8-38: the changed tint of a conflict (B15 Changed underneath: the line and the quoted newer text, S8's conflict box): fill #ffecd6 / #42341e, edge #a8690c / #e0a64a, the words as the cell's changed text (8.57:1 on the fill, dark 8:1 or more). */ --color-changed-bg: light-dark(var(--amber-100), var(--amber-900)); --color-changed-edge: light-dark(var(--amber-600), var(--amber-400)); --color-changed-text: light-dark(var(--amber-800), var(--amber-200-dark)); /* #488 layout, the briefing page: the By topic side bars (non-text, each >= 3:1 on the window #ececec light / #1e1e1e dark, and on the card) and the filled Red and Green status ovals (text on fill, AAA). Bars light: red 4.0:1, yellow 3.13:1 (a true yellow cannot reach 3:1 on a light page; this is the yellowest gold that does), green 3.09:1. Bars dark: red 4.7:1, yellow 11.8:1, green 9.6:1 on #1e1e1e. Ovals light: white on deep red 7.21:1, white on deep green 7.33:1; dark: black on bright red 7.14:1, black on bright green 12.05:1. */ --briefing-bar-red: light-dark(#e5130d, #ff3b30); --briefing-bar-yellow: light-dark(#a28100, #ffd60a); --briefing-bar-green: light-dark(#1a9a43, #4ade80); --briefing-tag-red-bg: light-dark(#b00e0a, #ff6259); --briefing-tag-green-bg: light-dark(#0a6428, #4ade80); --briefing-tag-on-fill: light-dark(#ffffff, #000000); /* #809 @rhythm: a card's bottom to the next heading's top on the briefing page (the rendering's 17 px at 16 px text). */ --briefing-section-gap: 1.0625rem; /* #464: Contract Pilot not sourced — yellow within 10 days, red within 5. Text on its own fill: soon 9.58:1 light / 8.62:1 dark; urgent 7.89:1 light / 9.22:1 dark (each >= 4.5:1; the words carry it too). */ --cp-soon-bg: light-dark(#fff1a8, #4a3d00); --cp-soon-text: light-dark(#4d3a00, #ffe680); --cp-urgent-bg: light-dark(#ffd6d2, #5c1410); --cp-urgent-text: light-dark(var(--red-700), #ffc9c4); /* The admin banner is an amber wash in both themes; it used to keep the light wash under dark-theme text, which read at 1.02:1. */ /* Chart series — the documented categorical order, taken in fixed slot order and never cycled. Validated for both modes: worst adjacent CVD ΔE 9.1 light / 8.4 dark, normal-vision ΔE 19.6 / 19.3. Three slots sit under 3:1 against the surface, which is why every slice is also written out in the legend and in the table above it. */ --series-1: light-dark(#2a78d6, #3987e5); --series-2: light-dark(#eb6834, #d95926); --series-3: light-dark(#1baf7a, #199e70); --series-4: light-dark(#eda100, #c98500); --series-5: light-dark(#e87ba4, #d55181); --series-6: #008300; --banner-bg: light-dark(var(--amber-50), var(--amber-900)); --banner-edge: light-dark(var(--amber-600), var(--amber-400)); --banner-text: var(--color-text); --banner-muted: var(--color-text-muted); --banner-link: light-dark(var(--color-text-accent), var(--blue-200)); /* The editing row is DEFINED by its fill and the action bar below it. The bar carries a hairline edge, and the row carries no edge of its own. --cell-editing-hover is darker than the row in light and lighter in dark, i.e. it moves AWAY from the fill in both. It used to be lighter in light mode, which only worked while the fill was mid-tone; against a pale fill a lighter hover would have been invisible. Both deltas are tuned to the old feel (1.22 light, 1.33 dark) so hovering feels unchanged. The action bar shares the row's fill and edge. It has its OWN pair of tokens and is easy to miss: change one without the other and the row goes pale while the button bar stays heavy. */ --row-editing-bg: light-dark(var(--green-editing), #22352a); --row-editing-edge: light-dark(var(--green-edge), #6fb87a); --cell-editing-hover: light-dark(var(--green-hover), #2f4a35); --cell-editing-bg: light-dark(var(--slate-0), #2c2c2e); /* The block holding the editing row. Same hue as the row's edge on purpose: a thick rail for the trip, a thin frame for the leg, so the two read as nested rather than as two competing signals. #593 (S2 G14): drawn by C4's railWhenOpen (blocks/built.css), 3 px; the page draws no rail. */ --block-active-rail: var(--row-editing-edge); --block-active-rail-width: 3px; --editbar-bg: light-dark(var(--green-editing), #22352a); --editbar-edge: light-dark(var(--green-edge), #6fb87a); --phase-finished-bg: light-dark(var(--slate-50), #161617); --phase-finished-edge: light-dark(var(--color-border), #48484a); --phase-progress-accent: light-dark(var(--blue-700), #8fc7ff); --phase-next-accent: light-dark(var(--navy-700), #8fc7ff); --btn-danger-solid-bg: var(--color-danger); /* #505 (d): the confirm dialog's action only; .btn-danger stays the outline */ --btn-danger-solid-fg: var(--color-on-accent); --app-chrome-bg: light-dark(rgb(245, 245, 247), rgb(44, 44, 46)); /* #505 (f): the opaque top bar */ --chrome-edge: light-dark(var(--color-border), #48484a); --toolbar-bg: light-dark(rgba(245, 245, 247, 0.96), rgba(44, 44, 46, 0.96)); /* was .72 — the board read through it */ /* light-dark() is a COLOR function: it returns a and nothing else, so a box-shadow cannot go through it. These five keep a real pair of blocks — the only tokens in the file that still need one. */ --shadow-xs: 0 0 0 0.5px rgba(0, 0, 0, .05); --shadow-sm: 0 0 0 0.5px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .07); --shadow-md: 0 0 0 0.5px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .10); --shadow-lg: 0 0 0 0.5px rgba(0, 0, 0, .08), 0 8px 28px rgba(0, 0, 0, .16); --shadow-inset-top: inset 0 0.5px 0 rgba(255, 255, 255, .85); --shadow-control: var(--shadow-xs), var(--shadow-inset-top); /* #505 (c); the dark block re-points both parts */ } /* ═══════════════════════════════════════════════════════════════════════════ DARK MODE — macOS dark: #1E1E1E window, #2C2C2E content, #3A3A3C elevated. Re-points layer 2 / 3 only. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ THEME Every token that differs between the two themes is written once, as light-dark(, ). It used to be written three times: the light value here, and the dark value twice — once under @media (prefers-color-scheme: dark) and again under [data-theme="dark"], ~110 lines each, kept in step by hand. Nothing ever set [data-theme], so the second copy was 69 declarations of pure drift risk. `color-scheme: light dark` on :root above is what makes light-dark() follow the system. A manual override is now two rules instead of a third palette: setting color-scheme is enough, because light-dark() reads it. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* The five tokens light-dark() cannot carry (see above). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-xs: 0 0 0 0.5px rgba(0, 0, 0, .5); --shadow-sm: 0 0 0 0.5px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .5); --shadow-md: 0 0 0 0.5px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .55); --shadow-lg: 0 0 0 0.5px rgba(0, 0, 0, .7), 0 8px 28px rgba(0, 0, 0, .65); --shadow-inset-top: inset 0 0.5px 0 rgba(255, 255, 255, .08); } } :root[data-theme="dark"] { --shadow-xs: 0 0 0 0.5px rgba(0, 0, 0, .5); --shadow-sm: 0 0 0 0.5px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .5); --shadow-md: 0 0 0 0.5px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .55); --shadow-lg: 0 0 0 0.5px rgba(0, 0, 0, .7), 0 8px 28px rgba(0, 0, 0, .65); --shadow-inset-top: inset 0 0.5px 0 rgba(255, 255, 255, .08); } @media (prefers-contrast: more) { :root { --color-text-subtle: var(--color-text-muted); --color-border: var(--color-border-strong); --table-gridline: var(--color-border-strong); --focus-ring-width: 4px; } } @media (prefers-reduced-motion: reduce) { :root { --motion-instant: 0ms; --motion-fast: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }