/* ============================================================ TRUE FLOW POOL SOLUTIONS — brand/tokens.css CANONICAL design tokens (colors, type, scale) for EVERY surface: website + ops (PoolBooks) + inspector (PoolInspector) + crew (PoolCrew) + dock (PoolDock) + any future app. SINGLE SOURCE OF TRUTH. The /deploy skill copies the whole brand/ folder into each app on every deploy, so a brand color or token can only ever be changed HERE. Apps consume these via a thin per-app alias block (legacy variable names -> these tokens) so existing component CSS keeps working unchanged. The core palette block is lifted verbatim from the live website's styles.css :root (the production source of truth), including the WCAG-AA accessibility fixes shipped 2026-06-24 (--text-muted darkened to #456f83). South Beach Boutique — Miami pool water at noon. Vibrant aqua + cyan ocean blues, warm sand neutrals, sun-kissed gold. ============================================================ */ :root { /* ===== CORE PALETTE (verbatim from website styles.css :root) ===== */ /* Core brand */ --tf-cerulean: #0b4f6c; /* deep ocean — hero/dark sections */ --tf-navy: #062840; /* midnight — footer */ --tf-aqua-soft: #c8eef8; /* shallow water shimmer */ --tf-sand: #f5ead8; /* warm beach sand */ --tf-saffron: #c9a96e; /* sun-kissed gold */ --tf-white: #ffffff; /* Blues — vivid, coastal, saturated */ --tf-cerulean-700: #083d56; --tf-cerulean-600: #0d6080; --tf-cerulean-500: #1a7fa0; --tf-aqua: #7dd4ea; /* bright sky/lagoon blue */ --tf-aqua-600: #2db5d5; /* vivid mid aqua */ --tf-ocean: #1a9fc4; /* signature pool-water cyan */ --tf-ocean-700: #0f7a9a; /* deeper ocean - AA on white/cream ONLY, see below */ --tf-ocean-800: #0e6f8f; /* READABLE ocean text. Use this for ocean-coloured WORDS on any pale ocean tint. --tf-ocean-700 is 4.92:1 on white but 4.31-4.49:1 on every tint in this file (--tf-aqua-050, --app-bg-blue, --status-info-soft, --ocean-50), i.e. it fails AA on exactly the backgrounds it keeps being paired with. Eight such sites were live across admin and crew on 2026-08-15. This member is 4.99-5.69:1 on all of them. Same lesson as the --status-*-text members: the gap was that nothing named "ocean text you may actually read", so every consumer reached for -700 and quietly shipped sub-AA. */ --tf-aqua-050: #e4f7fc; /* airy aqua wash */ /* Neutrals — ocean-tinted (website ramp), warm not cool grey */ --tf-ink-900: #062840; --tf-ink-700: #1a4a62; --tf-ink-500: #4d7d93; --tf-ink-400: #7fa3b5; --tf-ink-300: #a8c8d8; --tf-ink-200: #cce3ec; --tf-ink-100: #e3f2f7; --tf-ink-050: #f2fafc; /* Semantic roles (website) */ --bg-page: #fffdf9; /* warm cream white, not clinical */ --surface-trust: #c8eef8; /* aqua wash band */ --surface-deep: #0b4f6c; /* deep ocean sections */ --surface-deepest: #062840; /* footer */ --text-strong: #062840; /* headlines */ --text-body: #1a4a62; /* body — ocean-tinted, not grey */ --text-muted: #456f83; /* secondary — darkened from #4d7d93 for WCAG AA (4.5:1 on white/sand/aqua) */ --text-on-dark: #d8f2fb; /* on deep/midnight sections */ --text-link: #1a9fc4; /* cyan links */ --cta-bg: #c9a96e; /* warm gold */ --cta-bg-hover: #a8844e; /* gold hover */ --cta-text: #ffffff; /* white on gold */ /* ===== CROSS-SURFACE TOKENS (apps + design-system.md) ===== The apps (ops/inspector/crew/dock) use a cooler neutral ramp and a set of status colors the marketing site doesn't. These are canonical brand values too (per Resources/design-system.md) and live here so apps can source them from one file. The cool ramp (--app-*) and the ocean ramp (--tf-ink-*) intentionally COEXIST — do not collapse them without a previewed restyle. ----------------------------------------------------------- */ /* Cool neutral ramp — apps (design-system.md "warm sand, not grey") */ --app-text-primary: #1a2332; /* primary body text (dock --text) */ --app-text-secondary: #6b7c8d; /* muted labels (dock --muted) */ --app-border: #e8e2d8; /* warm border/divider (dock --line) */ --app-border-soft: #f0ece2; --app-bg-blue: #e6f3f8; /* pale ocean secondary fill */ --app-surface: #ffffff; /* card surface */ /* Status colors — shared across apps. WHICH MEMBER FOR WHICH USE: --status- FILL / ICON only. Never words. --status--soft background tint behind a status chip or banner. --status--border 1px rules and chip borders only. Never words. --status--text ANY text — a label, a message, an inline status word. --status--hover interactive hover state of the base fill. The base values do NOT pass WCAG AA as text on their own -soft background (#16a34a on #e6f5ee is 2.93:1, #d97706 on #fef3e0 is 2.90:1, #dc2626 on #fee2e2 is 3.95:1). The -text member is the same hue darkened to clear 4.5:1, and is the only member that may carry words. Added 2026-07-30 after the visit report page was found defining its own private copy of this palette, having drifted on exactly these two values. --status-danger-text and -border added 2026-08-15: the family was missing both, so consumers who needed readable red words or a red rule had nothing to reach for and hand-picked their own — Booking App/admin/index.html alone had accumulated #b91c1c, #b52b2b, #b3261e, #a11d1d and #c0392b, and Booking App/dock/ was rendering #c0392b through an undefined `var(--red)`. A missing member generates its own drift; every status family must carry the full set. The -border values are derived, not picked: each sits at the same contrast against its own -soft (success 1.42:1, warning 1.36:1, danger 1.39:1, info 1.39:1), which is what makes a 1px rule read with equal weight across the four families. --status-info-border and -text added 2026-08-15, closing the last incomplete family. The base MOVED to --tf-ocean the same day, and that is the more interesting half. It had been #2563eb, a generic blue at hue 221 sitting against a hue-194 soft -- a 28-degree gap where the other three families sit within 10. The tempting fix was to re-tint the soft toward the blue. The codebase had already voted the other way and nobody had noticed: the base's ONLY consumer was `--info: var(--status-info, var(--ocean))`, whose fallback was already ocean, and every real use of -soft painted its text with --ocean-700. The generic blue was vestigial -- declared, mirrored, and consumed by nothing. Read the code that USES a token to learn what the token means. Moving to ocean did three things at once: it made the family hue-coherent (193 vs 194), it put info on an actual brand colour instead of a Tailwind default, and it FIXED a live AA failure -- six surfaces were painting --ocean-700 (#0f7a9a) on -soft at 4.31:1, below the 4.5 minimum, because they had reached for the ocean the token set did not offer them. It also removed a carve-out: the old base was 4.53:1 on its own -soft, i.e. it passed AA by 0.03 and had to be excluded from the "fills must not pass" test assertion. Ocean is 2.71:1, so info rejoins that rule and the check covers all four families with no exception. WATCH: the base is now the same hue as links and other interactive affordances. That is acceptable because only ONE status moved onto ocean -- success/warning/danger stay green/amber/red, so this is not a repeat of the 2026-07-08 bug where several distinct statuses collapsed into one blue. Do not move a second family onto a brand hue without revisiting that. */ --status-danger: #dc2626; --status-danger-hover: #b91c1c; --status-danger-soft: #fee2e2; --status-danger-border: #eebaba; /* 1.39:1 on -soft */ --status-danger-text: #b91c1c; /* 5.30:1 on -soft */ --status-warning: #d97706; --status-warning-soft: #fef3e0; --status-warning-border: #f0d08a; --status-warning-text: #9a5b00; /* 4.94:1 on -soft */ --status-success: #16a34a; --status-success-soft: #e6f5ee; --status-success-border: #a3d9b8; --status-success-text: #157a3a; /* 4.81:1 on -soft */ --status-info: #1a9fc4; /* = --tf-ocean; fill/icon only, 2.71:1 on -soft */ --status-info-soft: #e2f3f8; --status-info-border: #b2d3dc; /* 1.39:1 on -soft */ --status-info-text: #0e6f8f; /* 4.99:1 on -soft; = --tf-ocean-800 (asserted in brand-colors_test) */ /* Effects */ --shadow-sm: 0 1px 3px rgba(6,40,64,0.08), 0 1px 2px rgba(6,40,64,0.05); --shadow-md: 0 6px 16px -6px rgba(11,79,108,0.18), 0 2px 6px -2px rgba(11,79,108,0.10); --shadow-lg: 0 18px 40px -12px rgba(11,79,108,0.24), 0 6px 14px -8px rgba(11,79,108,0.12); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --ease-standard: cubic-bezier(0.4,0,0.2,1); --duration-base: 200ms; /* Spacing — 4px base grid (apps) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Typography */ --font-display: "Libre Baskerville", Georgia, serif; --font-sans: "Inter", system-ui, -apple-system, sans-serif; /* ── Type scale ─────────────────────────────────────────────────────────── Added 2026-08-09. This file's own header has always claimed to be canonical for "colors, TYPE, scale" and carried no type scale at all, so every surface picked its own sizes. The website drifted UP and stayed readable; PoolBooks drifted DOWN and became hard to read: ~90 hand-picked sizes between .62rem and .82rem (10px-13px), where the WEBSITE'S SMALLEST body text is .88rem and its body is 1.0625rem. The admin's ceiling was roughly the website's floor. Values are derived from the website's live, approved usage rather than invented, so adopting them moves an app toward the look we already ship. --fs-eyebrow is the ONLY member below --fs-xs, and it is not a small-text licence: it is for UPPERCASE, letter-spaced section labels ONLY, where the caps make up the lost x-height. Never use it for a sentence. --fs-xs is the FLOOR for anything a person has to read or act on. If a layout only fits by going under it, the layout is wrong, not the type. */ --fs-eyebrow: 0.72rem; /* 11.5px — uppercase tracked labels only */ --fs-xs: 0.8125rem; /* 13px — metadata, badges, timestamps. Hard floor. */ --fs-sm: 0.875rem; /* 14px — secondary text, dense table cells */ --fs-base: 0.9375rem; /* 15px — default UI body inside apps */ --fs-md: 1.0625rem; /* 17px — website body copy, long-form reading */ --fs-lg: 1.25rem; /* 20px — card titles, panel headings */ --fs-xl: 1.5rem; /* 24px — section headings */ --fs-2xl: 2rem; /* 32px — page titles */ --fs-3xl: 2.5rem; /* 40px — hero / big stat numbers */ --lh-tight: 1.25; /* headings */ --lh-snug: 1.45; /* dense UI rows */ --lh-base: 1.6; /* body */ --lh-loose: 1.75; /* long-form marketing copy */ /* ── Icon sizes ─────────────────────────────────────────────────────────── Icons were being drawn at 12-14px next to 10-11px text, which is why the carets and chevrons read as decoration rather than as controls. --icon-md is the default; anything a finger or cursor is meant to hit uses --icon-md or larger and gets --tap-min of clickable area regardless of the glyph size. */ --icon-sm: 16px; /* inline, decorative, inside a line of text */ --icon-md: 20px; /* DEFAULT — buttons, list affordances, carets */ --icon-lg: 24px; /* primary actions, empty states */ --icon-xl: 32px; /* feature/marketing */ --tap-min: 44px; /* minimum hit target, per WCAG 2.5.5 */ /* Layout & legacy compatibility */ --max-w: 1120px; --border: rgba(6,40,64,0.10); --border-blue: rgba(26,159,196,0.22); }