/* ============================================================================ DayFlowPro — theme.css (drop-in) Place at: lib/phase3/theme.css Load it by adding ONE line to in index.html, AFTER the font link: What this file does WITHOUT touching your inline styles: • Sets a modern token system (light + dark) you can migrate to. • Upgrades base typography, focus states, inputs, buttons, scrollbars, and selection via ELEMENT selectors — these apply even to your inline-styled React shell (they fill in wherever an inline style didn't already hardcode that property). • Adds a per-client --accent hook for rebranding (see bottom). To FULLY adopt (consistent dark mode, one-line rebrand): migrate the hardcoded hex values in your inline styles to the tokens below using the map in the "HEX → TOKEN MIGRATION MAP" section. That part is a find/replace pass in index.html, not something a stylesheet can do on its own. ========================================================================== */ /* ---- 1. Design tokens ---------------------------------------------------- */ :root { /* Surfaces — kept in lockstep with C_LIGHT in index.html so the stylesheet and the inline React shell never disagree about what "surface" means. */ --bg: #F9FAFB; --surface: #FFFFFF; --surface-2: #F3F4F6; --elevated: #FFFFFF; /* Text */ --text: #1F2937; --text-muted: #6B7280; --text-subtle: #9CA3AF; --text-inverse: #FFFFFF; /* Lines */ --border: #E5E7EB; --border-strong: #D1D5DB; /* Brand accent — distinctive teal (was default #3B82F6 blue). This is the ONE value a client workspace overrides to rebrand. */ --accent: #12A594; --accent-hover: #0E8578; --accent-contrast:#FFFFFF; --accent-soft: rgba(18,165,148,0.12); --ring: 0 0 0 3px var(--accent-soft); /* Status */ --success: #16A34A; --warning: #D9820B; --danger: #DC2626; /* Radius scale */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-full: 999px; /* Soft, layered shadows (not the flat drop-shadow default) */ --shadow-sm: 0 1px 2px rgba(16,24,40,0.05); --shadow: 0 2px 4px rgba(16,24,40,0.06), 0 6px 16px rgba(16,24,40,0.06); --shadow-lg: 0 8px 24px rgba(16,24,40,0.10), 0 2px 6px rgba(16,24,40,0.06); /* Type */ --font-body: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* Motion */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur: 160ms; } [data-theme="dark"] { /* Mirrors C_DARK in index.html. */ --bg: #0F1216; --surface: #181C22; --surface-2: #20252D; --elevated: #20252D; --text: #E6E9EF; --text-muted: #9AA3B0; --text-subtle: #727C8A; --text-inverse: #0F1216; --border: #2B313A; --border-strong: #3A424E; --accent: #2DD4BF; --accent-hover: #14B8A6; --accent-contrast:#06231F; --accent-soft: rgba(45,212,191,0.16); --success: #34D399; --warning: #FBBF24; --danger: #F87171; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 2px 6px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.4); --shadow-lg: 0 10px 30px rgba(0,0,0,0.55); } /* ---- 2. Base element polish (applies to inline-styled shell) ------------- */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-feature-settings: "cv01","ss01"; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display face for headings — used with restraint, the app's signature. Only sets family/weight/spacing so it won't fight your inline sizing. */ h1, h2, h3, .dfp-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.12; } h4, h5, h6 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; } a { color: var(--accent); text-underline-offset: 2px; } a:hover { color: var(--accent-hover); } /* Visible keyboard focus everywhere — a quality-floor win most inline styles skip. */ :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } ::selection { background: var(--accent-soft); color: var(--text); } hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; } /* Interactive elements: consistent radius + smooth transitions + focus ring. Additive — inline styles that set these already will win. */ button, input, select, textarea { font-family: inherit; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease); } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: 0.6; } input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--ring); border-color: var(--accent); } /* Custom scrollbars — small detail that reads as "designed". */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: content-box; } /* ---- 3. Opt-in component classes (adopt incrementally) ------------------- */ .dfp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .dfp-elevated { box-shadow: var(--shadow-lg); border-radius: var(--r-lg); } .dfp-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font-weight: 600; } .dfp-btn:hover { background: var(--surface-2); } .dfp-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .dfp-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .dfp-input { width: 100%; padding: 0.55rem 0.7rem; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r); } .dfp-input::placeholder { color: var(--text-subtle); } .dfp-badge { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; font-size: 0.78rem; font-weight: 600; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-hover); } /* Modern frosted overlay for modals — add this class to your modal backdrop. NOTE: the full modal system now lives in modal-system.css (.dfp-modal). This class is kept for any backdrop that isn't a modal (menus, lightboxes). */ .dfp-overlay { background: rgba(18, 24, 33, 0.38); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); } [data-theme="dark"] .dfp-overlay { background: rgba(4, 7, 12, 0.6); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dfp-overlay { background: rgba(18, 24, 33, 0.62); } [data-theme="dark"] .dfp-overlay { background: rgba(4, 7, 12, 0.8); } } /* Glass surface for any raised element (popovers, dropdowns, toasts). */ .dfp-glass { background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(16, 24, 40, 0.10); border-radius: var(--r-lg); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); } [data-theme="dark"] .dfp-glass { background: rgba(28, 33, 41, 0.84); border-color: rgba(255, 255, 255, 0.09); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.14); } /* ---- 3b. Icons ---------------------------------------------------------- One convention so every icon reads as a single modern set, inherits the accent/text color, and aligns to text. Opt-in via class="dfp-icon" (or a [data-icon] wrapper) so it never touches logos, charts, or other SVGs. Works for inline SVG line icons (Lucide/Phosphor — recommended) and, during the transition, normalizes Font Awesome glyphs too. */ /* Inline SVG line icons (Lucide/Phosphor). */ .dfp-icon, [data-icon] > svg { width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: -0.125em; /* optical baseline align to text */ fill: none; stroke: currentColor; /* follows text / accent color */ stroke-width: 1.75; /* one modern stroke weight everywhere */ stroke-linecap: round; stroke-linejoin: round; } /* Filled-style icons (Phosphor-fill or solid glyph SVGs). */ .dfp-icon--fill { fill: currentColor; stroke: none; } /* Size steps, relative to surrounding text. */ .dfp-icon--sm { width: 1em; height: 1em; } .dfp-icon--lg { width: 1.5em; height: 1.5em; } .dfp-icon--xl { width: 2em; height: 2em; } /* Accent-colored icon — recolors per client via --accent. */ .dfp-icon--accent { color: var(--accent); } /* Icons inside a button or link inherit the control's color. */ button .dfp-icon, a .dfp-icon { color: inherit; } /* Font Awesome transition normalization: consistent size + baseline (FA glyphs already inherit currentColor). Prefer ONE family (regular/light) while you migrate off it for the cleaner, lighter look. */ i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands, i.fa-light, i.fa-thin { font-size: 1em; line-height: 1; vertical-align: -0.075em; } /* ---- 4. Quality floor ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ============================================================================ 5. PER-CLIENT REBRANDING HOOK The workspace layer sets one line at runtime from workspace.json.branding: document.documentElement.style.setProperty('--accent', wsAccent); document.documentElement.style.setProperty('--accent-hover', darken(wsAccent)); Everything accent-driven (links, focus rings, primary buttons, badges, active nav) recolors instantly. A few tasteful presets: Teal (default) --accent:#12A594 --accent-hover:#0E8578 Indigo --accent:#4F46E5 --accent-hover:#4338CA Coral --accent:#F0603A --accent-hover:#D94E2B Plum --accent:#8B3FA8 --accent-hover:#763592 Forest --accent:#2F855A --accent-hover:#276749 ============================================================================ */ /* ============================================================================ 6. HEX → TOKEN MIGRATION MAP (for the full-adoption find/replace pass) Replace these hardcoded values in index.html's inline styles with the token: #ffffff (surface) -> var(--surface) #f5f6f8 / #f1f3f6 -> var(--surface-2) #e5e7eb (borders) -> var(--border) #d1d5db (input border)-> var(--border-strong) #1a1a2e / #16181d -> var(--text) #6b7280 (subtext) -> var(--text-muted) #9ca3af -> var(--text-subtle) #3B82F6 / #2563EB -> var(--accent) / var(--accent-hover) #10B981 -> var(--success) #F59E0B -> var(--warning) #EF4444 -> var(--danger) rgba(0,0,0,0.08) -> var(--shadow) (or --shadow-sm) After this pass, dark mode is fully consistent AND every client rebrand is a single --accent change. ============================================================================ */