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.