/* ========================================================================== TABIFLOW V2 — Design Tokens -------------------------------------------------------------------------- File: styles/core/tokens.css Source: Mock-up/planner-v2-mockup.html :root block (Day 8, locked) Load order: BEFORE styles.css in planner.html V1 tokens (--bg, --text, --accent, etc.) remain in styles.css and continue to resolve normally — this file adds V2 tokens alongside them. No V1 token is overridden here. Migration is additive. Migration flag: --tf-focus-ring, --tf-focus-ring-danger, --tf-tap-min appeared inside html.tf-theme-light in the mockup source. Placed in :root here for correctness — they are mode-independent. Reported to Owner for mockup annotation update. ========================================================================== */ /* -------------------------------------------------------------------------- DARK MODE (default) -------------------------------------------------------------------------- */ :root { /* Force dark native controls (fixes invisible stop-name inputs on iOS). */ color-scheme: dark; /* Backgrounds */ --tf-bg-page: #0c0f17; --tf-bg-surface: #141826; --tf-bg-elevated: #21283c; --tf-bg-elevated-2: #2a3148; /* Text */ --tf-text-primary: #f4f3ee; --tf-text-secondary: #a8b0c0; --tf-text-muted: #6b7388; /* Borders */ --tf-border-soft: #2a3148; --tf-border-line: rgba(168, 176, 192, 0.12); /* Day colors — locked per landing-v3.css values */ --tf-day-1-pink: #ec5e8a; --tf-day-2-gold: #f5a623; --tf-day-3-teal: #2bb8b8; --tf-day-4-blue: #5e7fec; --tf-day-5-green: #5eb87a; --tf-day-6-purple: #a25eec; /* Day-pill color aliases — Panel B. Consumed by day-card.css (.d1–.d6 selectors). Aliases of the canonical --tf-day-* values above so future palette shifts touch one token, not selectors. */ --day-color-d1: var(--tf-day-1-pink); --day-color-d2: var(--tf-day-2-gold); --day-color-d3: var(--tf-day-3-teal); --day-color-d4: var(--tf-day-4-blue); --day-color-d5: var(--tf-day-5-green); --day-color-d6: var(--tf-day-6-purple); /* Fogged surface — unpinned stop (Panel B). Owner decision: NOT reduced-opacity (reads "disabled"), NOT dotted border (reads "selected"). Treatment: barely-there cool tint; semantically "exists, not yet pinned". */ --tf-fogged-bg: rgba(168, 176, 192, 0.05); --tf-fogged-text: var(--tf-text-secondary); /* V2 stop-row interactive-state surfaces — fresh palette, NOT V1 hues. Tokens consumed by day-card.css state-class rules. */ --tf-state-hold-bg: rgba(245, 166, 35, 0.08); /* hold-to-reorder — warm Mochi accent */ --tf-state-move-bg: rgba(185, 182, 240, 0.10); /* move-selected — primary-soft */ --tf-state-anchor-bg: rgba(185, 182, 240, 0.13); /* browse-anchor — focused stop */ --tf-state-neighbor-bg: rgba(168, 176, 192, 0.04); /* browse-neighbor — nearby stop */ /* Primary action */ --tf-primary: #b9b6f0; --tf-primary-ink: #1a1730; --tf-primary-soft: rgba(185, 182, 240, 0.12); /* Status */ --tf-warn: #f5a623; --tf-danger: #ec5e8a; --tf-success: #5eb87a; --tf-success-soft: rgba(94, 184, 122, 0.18); /* Mascot presence — Mochi (warm gold) and Tabi (teal) */ --tf-mochi-bg: rgba(245, 166, 35, 0.12); --tf-mochi-border: rgba(245, 166, 35, 0.32); --tf-tabi-bg: rgba(43, 184, 184, 0.12); --tf-tabi-border: rgba(43, 184, 184, 0.32); /* Spacing rhythm */ --tf-space-xs: 4px; --tf-space-sm: 8px; --tf-space-md: 12px; --tf-space-lg: 16px; --tf-space-xl: 24px; --tf-space-xxl: 32px; /* Radius */ --tf-radius-sm: 6px; --tf-radius-md: 10px; --tf-radius-lg: 14px; --tf-radius-full: 999px; /* Transitions */ --tf-ease: cubic-bezier(0.4, 0.0, 0.2, 1); --tf-duration-fast: 150ms; --tf-duration-normal: 250ms; --tf-duration-slow: 400ms; /* Interaction — mode-independent */ --tf-focus-ring: 0 0 0 3px rgba(185, 182, 240, 0.4); --tf-focus-ring-danger: 0 0 0 3px rgba(236, 94, 138, 0.4); --tf-tap-min: 44px; } /* -------------------------------------------------------------------------- LIGHT MODE OVERRIDE Toggled via html.tf-theme-light (V2 shell theme toggle, setV2Theme()) Only tokens that change between modes are listed here. -------------------------------------------------------------------------- */ html.tf-theme-light { /* Backgrounds */ --tf-bg-page: #fafaf7; --tf-bg-surface: #ffffff; --tf-bg-elevated: #f0eee7; --tf-bg-elevated-2: #e6e2d5; /* Text */ --tf-text-primary: #1a1730; --tf-text-secondary: #2a2640; --tf-text-muted: #5f6474; /* §23: was #8a8f9f — failed WCAG AA (3.08–3.23×); now 5.64–5.90× */ /* Borders — §23: was #d8d4c7; upgraded to pass WCAG 1.4.11 on transparent-bg elements */ --tf-border-soft: #8a8060; --tf-border-line: rgba(26, 23, 48, 0.08); /* Primary action */ --tf-primary: #1a1730; --tf-primary-ink: #ffffff; --tf-primary-soft: rgba(26, 23, 48, 0.06); /* Mascot presence — warmer/more saturated on light backgrounds */ --tf-mochi-bg: rgba(245, 166, 35, 0.18); --tf-mochi-border: rgba(245, 166, 35, 0.48); --tf-tabi-bg: rgba(43, 184, 184, 0.16); --tf-tabi-border: rgba(43, 184, 184, 0.48); /* Fogged surface — warmer/lighter on light backgrounds */ --tf-fogged-bg: rgba(26, 23, 48, 0.04); --tf-fogged-text: var(--tf-text-secondary); /* V2 stop-row state surfaces — light mode */ --tf-state-hold-bg: rgba(245, 166, 35, 0.10); --tf-state-move-bg: rgba(26, 23, 48, 0.06); --tf-state-anchor-bg: rgba(26, 23, 48, 0.08); --tf-state-neighbor-bg: rgba(26, 23, 48, 0.03); /* Status — §23: warn + danger need light-mode overrides (dark hues fail WCAG AA on light bg) */ --tf-warn: #955f07; /* was #f5a623 (1.72–1.94×); now 4.55–5.36× */ --tf-danger: #c4174d; /* was #ec5e8a (3.07–3.21×); now 5.61–5.87× */ /* Day colors, spacing, radius, transitions: same as dark mode */ /* (--day-color-d1–d6 aliases are also mode-independent — day hues are fixed) */ }