From c2f89bd55f0bd701b292af6c9d39450f77ae8ae6 Mon Sep 17 00:00:00 2001
From: Lucas Berger <me@lucasberger.ca>
Date: Thu, 18 Jun 2026 12:12:42 -0400
Subject: [PATCH] feat(17-01): restructure tokens.css to combined
 :root,[data-theme=light] selector + add --bottom-chrome-h

- Change :root { to :root, [data-theme="light"] { (D-06 combined selector)
- Add --bottom-chrome-h: calc(56px + env(safe-area-inset-bottom, 0px)) to spacing scale
- Keep all 12 --sx-color-* overrides inside the combined block (cascade unchanged)
- Keep --brand-logo-* tokens inside the combined block (verbatim, no value changes)
- Add dark-theme stub as comment-only (Phase 999.20 fills values; no live rule)
- All existing values unchanged; PWA build passes; Schedule-X colors verified via playwright-cli
---
 apps/pwa/src/styles/tokens.css | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/pwa/src/styles/tokens.css b/apps/pwa/src/styles/tokens.css
index ea5d94e..0edc200 100644
--- a/apps/pwa/src/styles/tokens.css
+++ b/apps/pwa/src/styles/tokens.css
@@ -13,7 +13,8 @@
  * theme-default import so they win the cascade.
  */
 
-:root {
+:root,
+[data-theme="light"] {
   /* ─────────────────────────────────────────────────────────────────────────
    * BASE SURFACE / BORDER / TEXT PALETTE
    * ───────────────────────────────────────────────────────────────────────── */
@@ -62,6 +63,11 @@
   --space-8: 32px;
   --space-12: 48px;
 
+  /* Layout-chrome token — single source of truth for BottomTabBar effective height.
+   * Consumed by: FAB offset (CalendarShell.tsx), content padding (App.tsx), BottomTabBar.
+   * Workstreams A and D reference this token; do not hard-code 56px elsewhere. */
+  --bottom-chrome-h: calc(56px + env(safe-area-inset-bottom, 0px));
+
   /* ─────────────────────────────────────────────────────────────────────────
    * TYPOGRAPHY
    * ───────────────────────────────────────────────────────────────────────── */
@@ -135,6 +141,15 @@
   --sx-internal-color-text: var(--color-text-primary);
 }
 
+/* ─────────────────────────────────────────────────────────────────────────
+ * DARK THEME STUB — Phase 17 groundwork only.
+ * Values are intentionally absent. Phase 999.20 fills these values and
+ * wires prefers-color-scheme / data-theme toggle.
+ * DO NOT add a live rule here until Phase 999.20.
+ * ─────────────────────────────────────────────────────────────────────────
+ * [data-theme="dark"] { ... }
+ * ───────────────────────────────────────────────────────────────────────── */
+
 /* ─────────────────────────────────────────────────────────────────────────
  * SKELETON SHIMMER ANIMATION
  * Used by SkeletonCalendar.tsx — no third-party animation library.