/* Northway Design Tokens — Tesla-style rebuild Phase 0 / Foundation. See DESIGN-TESLA.md for the philosophy. Mobile-first by default. Every breakpoint documented below. Shared iOS / mobile hygiene lives here so every app inherits it. */ :root { /* Brand palette — white-dominant (DESIGN-TESLA.md decision 2026-08-03). Background images deferred — start with these surface tokens and slot images in once art direction is locked. */ --color-bg: #FFFFFF; --color-surface: #F7F8FA; --color-surface-2: #EEF1F5; --color-border: #E5E7EB; --color-gold: #C9A84C; --color-gold-bright: #E8C97A; --color-text: #111827; --color-text-muted: #6B7280; --color-text-faint: #9CA3AF; /* State — WCAG AA against white background */ --color-success: #16A34A; --color-warning: #D97706; --color-danger: #DC2626; --color-info: #2563EB; /* Type */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Type scale — base (mobile-first) */ --text-display: 36px; --text-h1: 28px; --text-h2: 20px; --text-body: 16px; --text-caption: 14px; --text-micro: 12px; /* Type scale — desktop (720px+) */ --text-display-desktop: 48px; --text-h1-desktop: 32px; --text-h2-desktop: 24px; /* Line heights */ --lh-display: 1.16; --lh-h1: 1.25; --lh-h2: 1.33; --lh-body: 1.5; --lh-caption: 1.43; --lh-micro: 1.33; /* Weights */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* Motion */ --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --dur-quick: 200ms; --dur-default: 300ms; --dur-emph: 400ms; --dur-hero: 600ms; /* Space — 4px base */ --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; --space-16: 64px; --space-20: 80px; /* Radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-full: 999px; /* Z-index */ --z-base: 0; --z-content: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300; /* Layout */ --shell-max-width: 1120px; --shell-padding: var(--space-4); --shell-padding-desktop: var(--space-8); --content-max-width: 480px; /* sheets, modals */ --bottom-nav-height: 64px; --touch-target-min: 44px; /* Apple HIG / WCAG AAA */ --touch-target-comfortable: 48px; /* Breakpoints (for reference — use in @media queries) */ /* --bp-xs: 480px; small phones */ /* --bp-sm: 600px; large phones / sheet-fullscreen */ /* --bp-md: 720px; tablet portrait / desktop switch */ /* --bp-lg: 880px; two-column desktop layout */ /* --bp-xl: 1120px; content max width */ } /* Dark theme — opt-in for ops-v2 / tech-v2 (night-shift use). Apply by setting `data-theme="dark"` on a parent (e.g. or ). Customer portal stays light by default. */ [data-theme="dark"] { --color-bg: #0B1117; --color-surface: #111827; --color-surface-2: #1a2234; --color-border: #1F2937; --color-text: #F9FAFB; --color-text-muted: #9CA3AF; --color-text-faint: #6B7280; --color-success: #4ADE80; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #60A5FA; } /* ── Global mobile hygiene ─────────────────────────────────────── Applied to every page that imports tokens.css. Apps don't need to repeat these rules — just include the tokens file in . */ html { -webkit-text-size-adjust: 100%; } body { /* Bug fix 2026-08-05: defensive overflow guard. Without this, any child element wider than the viewport (long URL text, a wide image, an oversized grid item) pushes the entire page to the right and produces a horizontal scrollbar on desktop. Hidden instead of scroll because nothing in the portal surface should ever require horizontal scroll on desktop. Mobile gets the same treatment — a clipped element is better than a side-scrolling page. */ overflow-x: hidden; width: 100%; max-width: 100vw; } input, select, textarea { font-size: 16px; } /* prevent iOS auto-zoom */ /* Tap highlight suppressed globally — apps can re-enable per-element if a tap feedback is desired. */ button, .tap { -webkit-tap-highlight-color: transparent; } /* Safe-area insets for notched devices (iPhone X+) */ .safe-bottom { padding-bottom: env(safe-area-inset-bottom); } .safe-top { padding-top: env(safe-area-inset-top); } /* Desktop type scale bump — applies to all consumers */ @media (min-width: 720px) { :root { --text-display: var(--text-display-desktop); --text-h1: var(--text-h1-desktop); --text-h2: var(--text-h2-desktop); --shell-padding: var(--shell-padding-desktop); } } /* Sheet behavior — mobile-first full-screen, desktop bottom-anchored */ @media (min-width: 600px) { .sheet { max-width: var(--content-max-width); max-height: 85vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } } @media (max-width: 599px) { .sheet { max-width: 100%; max-height: 95vh; border-radius: 0; } } /* Bottom nav — visible on mobile and desktop. Mobile: full-bleed strip pinned to the bottom edge. Desktop: capped at 720px and centered. The original rule combined both into one block, which led to a bug where the dual `left:` declarations and the centering transform interacted badly when content min-width exceeded the viewport — the strip would render off-center on small phones. Splitting into base + desktop keeps the math honest on each. */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); /* Bug fix 2026-08-05 (Phil #northway 22:20:38): 'now that is centered, can you even it out in the sides. The measurement on the account side edge is very tight.' Previous padding was var(--space-2) var(--space-3) = 8px top/bottom, 12px left/right, which combined with space-around's half-gutter-on-edges math left only ~6px between the rightmost item and the viewport edge. Bump horizontal padding to var(--space-4) (16px) on both sides so the leftmost and rightmost items sit at equal distances from the viewport edges — matches the iOS/Android bottom-tab convention (~16px edge gutter on 375px-class phones). */ padding: var(--space-2) var(--space-4); padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); z-index: var(--z-overlay); display: flex; justify-content: space-around; /* Bug fix 2026-08-05 (Phil #northway 21:59:24): 6 nav items × ~78px min-content (icon + padding + label) = ~468px content, but a 375px viewport only gives ~345px after padding. The labels force min-content wider than viewport, so Account (the 6th item) clipped off the right edge. Hide labels on mobile below 720px and rely on the icon — matches the iOS/Android bottom-tab convention. Labels come back on desktop where there's enough horizontal room. */ } .bottom-nav-item span:not(.bottom-nav-icon):not(.bottom-nav-badge) { display: none; } @media (min-width: 720px) { .bottom-nav-item span:not(.bottom-nav-icon):not(.bottom-nav-badge) { display: inline; } .bottom-nav { left: 50%; right: auto; transform: translateX(-50%); max-width: 720px; } } /* Body offset so content doesn't hide under bottom nav */ body { padding-top: env(safe-area-inset-top); padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); } /* Toast positioning — full-width on mobile, anchored on desktop */ .toast-stack { position: fixed; top: var(--space-4); left: var(--space-4); right: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); z-index: var(--z-toast); pointer-events: none; } @media (min-width: 720px) { .toast-stack { left: auto; right: var(--space-6); top: var(--space-6); } } /* Layout shell — single column on mobile, two-column on desktop. Top-level children (banner, greeting, dashboard, ...) default to spanning both columns on desktop so the visible content fills the full shell width and the page reads as centered. The 2-column intent is preserved for future right-side panels (a sticky activity sidebar, etc.) — any child that wants to live in the right column overrides with `grid-column: 2`. Without the `> * { grid-column: 1 / -1 }` rule, children auto-place into column 1, leaving a 360px empty column on the right that reads as the page "leaning to the right" against the shell's center. Bug fix 2026-08-05 (Phil #northway 22:01:40 UTC 'desktop still leans to the right side'). */ .shell { max-width: var(--shell-max-width); margin: 0 auto; padding: var(--space-6) var(--shell-padding); display: grid; grid-template-columns: 1fr; gap: var(--space-8); } .shell > * { grid-column: 1 / -1; } @media (min-width: 720px) { .shell { gap: var(--space-12); grid-template-columns: 1fr 360px; } } /* Sheet backdrop — shared */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity var(--dur-default) var(--ease-out); z-index: var(--z-modal); } .sheet-backdrop.open { opacity: 1; pointer-events: auto; }