/* ═══════════════════════════════════════════════════════════ GoGreen Design System v2 — Foundational Tokens + Base Components ─────────────────────────────────────────────────────────── Soft Dark palette + multi-tenant brand accents + Apple HIG buttons. Loaded AFTER design-system.css (v1) to override tokens progressively. Tenant customization surface (only these three vars change per tenant): --brand-accent --brand-accent-hover --brand-accent-dim ═══════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────── 1. Root tokens — Soft Dark (default) ───────────────────────────────────────────────────────── */ :root { /* Surface */ --v2-bg: #121216; --v2-bg-card: #1C1C22; --v2-bg-card-hover: #23232A; --v2-bg-inner: #18181D; --v2-bg-elevated: #27272E; /* Borders */ --v2-border: rgba(255, 255, 255, 0.07); --v2-border-strong: rgba(255, 255, 255, 0.12); /* Text */ --v2-text: #FAFAFA; --v2-text-muted: #9CA3AF; --v2-text-dim: #6B7280; --v2-text-faint: #4B5563; /* Brand accent — multi-tenant swappable (GoGreen default: emerald) */ --brand-accent: #10B981; --brand-accent-hover: #059669; --brand-accent-dim: rgba(16, 185, 129, 0.15); /* Semantic colors — brand-stable across tenants */ --v2-danger: #EF4444; --v2-warning: #F59E0B; --v2-info: #3B82F6; --v2-success: var(--brand-accent); /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px; /* Spacing scale (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Typography */ --v2-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ───────────────────────────────────────────────────────── 2. Light mode variant (via [data-scheme="light"]) Brand accent colors DO NOT change in light mode. ───────────────────────────────────────────────────────── */ [data-scheme="light"] { --v2-bg: #FAFAFA; --v2-bg-card: #FFFFFF; --v2-bg-card-hover: #F5F5F5; --v2-bg-inner: #F0F0F0; --v2-bg-elevated: #FFFFFF; --v2-border: rgba(0, 0, 0, 0.08); --v2-border-strong: rgba(0, 0, 0, 0.14); --v2-text: #0A0A0A; --v2-text-muted: #6B7280; --v2-text-dim: #9CA3AF; --v2-text-faint: #D1D5DB; } /* ───────────────────────────────────────────────────────── 2b. SHELL override — hijack v1 CSS variables per scheme ─────────────────────────────────────────────────────────── The legacy design-system.css defines --bg, --card, --text, --border, --primary etc. and every legacy screen references those vars. By reassigning them here per [data-scheme], we turn the whole app into Soft Dark or Clean Light in one shot without touching any screen. This is loaded AFTER v1 so these values win. The default scheme is "dark" (set on by color-scheme.js at boot). Brand colors (--primary, --success, etc.) are retuned for contrast on each surface while staying recognizable. ───────────────────────────────────────────────────────── */ /* ── Dark (default) ── */ :root, [data-scheme="dark"] { /* Surfaces — Soft Dark */ --bg: #121216; --card: #1C1C22; --card-hover: #23232A; /* Text */ --text: #FAFAFA; --text-secondary: #9CA3AF; --text-muted: #9CA3AF; --text-inverse: #0A0A0A; /* Borders & dividers — subtle white lines on dark */ --border: rgba(255, 255, 255, 0.07); --border-light: rgba(255, 255, 255, 0.05); --divider: rgba(255, 255, 255, 0.05); /* Brand — route v1's --primary through v2's multi-tenant accent */ --primary: var(--brand-accent); --primary-light: var(--brand-accent-dim); --primary-dark: var(--brand-accent-hover); --primary-hover: var(--brand-accent-hover); /* Status colors — tuned for dark backgrounds */ --success: #10B981; --success-bg: rgba(16, 185, 129, 0.12); --warning: #F59E0B; --warning-bg: rgba(245, 158, 11, 0.12); --danger: #EF4444; --danger-bg: rgba(239, 68, 68, 0.12); --info: #3B82F6; --info-bg: rgba(59, 130, 246, 0.12); /* Shadows — deeper on dark for subtle depth cue */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 2px 6px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.7); } /* ── Light ── */ [data-scheme="light"] { /* Surfaces — Clean Light */ --bg: #F7F7F9; --card: #FFFFFF; --card-hover: #F3F4F6; /* Text */ --text: #0A0A0A; --text-secondary: #4B5563; --text-muted: #6B7280; --text-inverse: #FFFFFF; /* Borders & dividers — soft gray lines on light */ --border: rgba(0, 0, 0, 0.08); --border-light: rgba(0, 0, 0, 0.05); --divider: rgba(0, 0, 0, 0.05); /* Brand — route v1's --primary through v2's multi-tenant accent */ --primary: var(--brand-accent); --primary-light: var(--brand-accent-dim); --primary-dark: var(--brand-accent-hover); --primary-hover: var(--brand-accent-hover); /* Status colors — tuned for light backgrounds */ --success: #059669; --success-bg: rgba(5, 150, 105, 0.10); --warning: #D97706; --warning-bg: rgba(217, 119, 6, 0.10); --danger: #DC2626; --danger-bg: rgba(220, 38, 38, 0.10); --info: #2563EB; --info-bg: rgba(37, 99, 235, 0.10); /* Shadows — lighter on light for gentle depth */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 2px 6px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10); --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.12); --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.16); } /* Body background safety net — in case any legacy style set it inline */ html, body { background: var(--bg) !important; color: var(--text) !important; } /* ───────────────────────────────────────────────────────── 3. Global type baseline — Inter applied globally Body background/colors stay controlled by design-system.css v1 for now (legacy screens), and each screen migrates to the v2 surface tokens as it picks up .v2-* classes. But typography is a free win we apply everywhere immediately. ───────────────────────────────────────────────────────── */ body, body input, body textarea, body select, body button { font-family: var(--v2-font) !important; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .v2, .v2 * { box-sizing: border-box; } .v2 { background: var(--v2-bg); color: var(--v2-text); } /* ───────────────────────────────────────────────────────── 4. Buttons — Apple HIG Padding 16px, radius 12px, weight 600, transitions 120ms, min-height 48px (tap target), font-size 16px (no iOS zoom). ───────────────────────────────────────────────────────── */ .v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand-accent); color: #ffffff; border: 0; border-radius: var(--r-md); padding: 16px 24px; font-family: var(--v2-font); font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; transition: background 120ms ease, transform 120ms ease; min-height: 48px; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .v2-btn:hover { background: var(--brand-accent-hover); } .v2-btn:active { transform: scale(0.98); } .v2-btn:disabled{ opacity: 0.4; cursor: not-allowed; } .v2-btn-secondary { background: var(--v2-bg-card); border: 1px solid var(--v2-border); color: var(--v2-text); } .v2-btn-secondary:hover { background: var(--v2-bg-card-hover); } .v2-btn-ghost { background: transparent; color: var(--v2-text-muted); padding: 12px 16px; min-height: 44px; } .v2-btn-ghost:hover { background: var(--v2-bg-card); color: var(--v2-text); } .v2-btn-danger { background: transparent; border: 1px solid var(--v2-border); color: var(--v2-danger); } .v2-btn-danger:hover { background: rgba(239, 68, 68, 0.08); } .v2-btn-sm { padding: 10px 16px; font-size: 13px; min-height: 40px; } .v2-btn-lg { padding: 18px 28px; font-size: 17px; min-height: 56px; } .v2-btn-full { width: 100%; } /* ───────────────────────────────────────────────────────── 5. Cards Zero border, zero shadow, zero gradient — flat surfaces. ───────────────────────────────────────────────────────── */ .v2-card { background: var(--v2-bg-card); border-radius: var(--r-lg); padding: var(--sp-6); } .v2-card-inner { background: var(--v2-bg-inner); border-radius: var(--r-md); padding: var(--sp-4); } .v2-card-hover { cursor: pointer; transition: background 120ms ease; } .v2-card-hover:hover { background: var(--v2-bg-card-hover); } /* ───────────────────────────────────────────────────────── 6. Form inputs 16px font-size is CRITICAL — prevents iOS auto-zoom. ───────────────────────────────────────────────────────── */ .v2-input-wrap { background: var(--v2-bg-card); border: 1px solid var(--v2-border); border-radius: var(--r-md); padding: 14px 16px; display: flex; align-items: center; gap: 12px; transition: border-color 120ms ease; min-height: 52px; } .v2-input-wrap:focus-within { border-color: var(--brand-accent); } .v2-input-wrap input, .v2-input-wrap textarea, .v2-input-wrap select { background: transparent; border: 0; color: var(--v2-text); font-family: var(--v2-font); font-size: 16px; font-weight: 400; flex: 1; outline: none; width: 100%; padding: 0; margin: 0; } .v2-input-wrap input::placeholder, .v2-input-wrap textarea::placeholder { color: var(--v2-text-dim); } .v2-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--v2-text-dim); font-weight: 600; margin-bottom: var(--sp-2); display: block; } /* ───────────────────────────────────────────────────────── 7. Section titles ───────────────────────────────────────────────────────── */ .v2-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--v2-text-dim); font-weight: 600; margin-bottom: var(--sp-3); } /* ───────────────────────────────────────────────────────── 8. KPI / Stat cards ───────────────────────────────────────────────────────── */ .v2-stat { background: var(--v2-bg-card); border-radius: var(--r-md); padding: var(--sp-5); } .v2-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--v2-text-dim); font-weight: 600; margin-bottom: var(--sp-2); } .v2-stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; color: var(--v2-text); font-variant-numeric: tabular-nums; } .v2-stat-sub { font-size: 12px; color: var(--v2-text-muted); } .v2-stat-sub .v2-accent { color: var(--brand-accent); font-weight: 600; } /* ───────────────────────────────────────────────────────── 9. Typography helpers ───────────────────────────────────────────────────────── */ .v2-text-hero { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--v2-text); } .v2-text-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--v2-text); } .v2-text-body { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--v2-text); } .v2-text-muted { color: var(--v2-text-muted); } .v2-text-dim { color: var(--v2-text-dim); } .v2-text-accent{ color: var(--brand-accent); } .v2-tabular { font-variant-numeric: tabular-nums; } /* ───────────────────────────────────────────────────────── 10. Layout helpers ───────────────────────────────────────────────────────── */ .v2-stack { display: flex; flex-direction: column; gap: var(--sp-4); } .v2-stack-2 { display: flex; flex-direction: column; gap: var(--sp-2); } .v2-stack-6 { display: flex; flex-direction: column; gap: var(--sp-6); } .v2-row { display: flex; align-items: center; gap: var(--sp-3); } .v2-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .v2-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .v2-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } /* ───────────────────────────────────────────────────────── 11. Badges ───────────────────────────────────────────────────────── */ .v2-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: var(--brand-accent-dim); color: var(--brand-accent); } .v2-badge-neutral { background: var(--v2-bg-inner); color: var(--v2-text-muted); } .v2-badge-danger { background: rgba(239, 68, 68, 0.12); color: var(--v2-danger); } .v2-badge-warning { background: rgba(245, 158, 11, 0.12); color: var(--v2-warning); } /* ───────────────────────────────────────────────────────── 11b. Bottom navigation v2 — 5 items with elevated Clock center Overrides the v1 .bottom-nav/.nav-item styles. The central clock button is a special floating element (position:absolute) that rises 20px above the nav strip. ───────────────────────────────────────────────────────── */ .bottom-nav { background: var(--v2-bg-card); border-top: 1px solid var(--v2-border); padding: 0; padding-bottom: env(safe-area-inset-bottom); height: 64px; position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: stretch; z-index: 1000; /* Reserve height for safe area on iOS */ box-sizing: content-box; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 0 6px; border: 0; background: transparent; cursor: pointer; min-width: 0; min-height: 64px; -webkit-tap-highlight-color: transparent; transition: transform 120ms ease; font-family: var(--v2-font); } .nav-item:active { transform: scale(0.94); } .nav-item svg { width: 24px; height: 24px; stroke: var(--v2-text-muted); fill: none; stroke-width: 1.8; transition: stroke 120ms ease; } .nav-item span { font-size: 10px; font-weight: 600; color: var(--v2-text-muted); letter-spacing: 0.02em; transition: color 120ms ease; line-height: 1; font-family: var(--v2-font); } .nav-item.active svg, .nav-item.active span { stroke: var(--brand-accent); color: var(--brand-accent); } /* GOG-69 (central floating Clock-In button) was rejected on 2026-04-10. The .nav-item-clock-slot / .nav-clock-btn / nav-clock-pulse styles that used to live here have been removed. Bottom nav is back to the 4-item layout: Home, Schedule, Inventory, More. */ /* Hide bottom nav on tablet/desktop (sidebar takes over) */ @media (min-width: 768px) { .bottom-nav { display: none; } } /* ───────────────────────────────────────────────────────── 12. iOS-safe font-size on all inputs (global safety net) This applies regardless of whether a screen uses v2 classes — it prevents iOS auto-zoom when the user focuses an input. Has to override design-system.css v1 line 1963, which has `font-size: 14px !important` on all modal inputs (the bug that GOG-71 was meant to fix). We use equal specificity with !important and the cascade order wins because v2 is loaded AFTER v1 in index.html. ───────────────────────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select { font-size: 16px !important; } /* Modal inputs (v1 uses `[style*="z-index:1000"]` selectors with !important) */ [style*="z-index:1000"] input, [style*="z-index:1000"] input[type="text"], [style*="z-index:1000"] input[type="email"], [style*="z-index:1000"] input[type="password"], [style*="z-index:1000"] input[type="number"], [style*="z-index:1000"] input[type="date"], [style*="z-index:1000"] input[type="time"], [style*="z-index:1000"] select, [style*="z-index:1000"] textarea { font-size: 16px !important; font-family: var(--v2-font) !important; }