/* ============================================================================ TipsChampions — Theme primitives (Phase B) ---------------------------------------------------------------------------- Lives alongside the legacy public/assets/css/app.css + dark-theme.css. Defines the CSS custom-properties that the NEW production themes (mates-match, stack-deck, ...) plug into. Existing legacy themes (light, dark) keep working because: 1. Nothing here overrides the legacy --tc-* vars in app.css. 2. Theme-specific files (e.g. 04-mates-match.css) set values for these new vars at [data-theme="..."] — they only apply when that theme is selected. ============================================================================ */ :root { /* ---- Body / surface --------------------------------------------------- Defaults match the current light-theme look so this stylesheet is inert until a "full theme" overrides them. */ --tc-bg: var(--tc-bg-body, #f8f9fa); --tc-bg-2: var(--tc-bg-surface, #ffffff); --tc-bg-elevated: var(--tc-bg-surface, #ffffff); /* ---- Foreground / text ---- */ --tc-fg: var(--tc-text-primary, #212529); --tc-fg-dim: var(--tc-text-secondary, #6c757d); --tc-fg-muted: var(--tc-text-muted, #9ca3af); /* ---- Accents (theme-defined; defaults to the existing brand colors) -- */ --tc-accent: var(--tc-primary, #667eea); --tc-accent-2: var(--tc-secondary, #764ba2); --tc-accent-fg: #ffffff; /* readable text on top of --tc-accent */ /* ---- Semantic (just aliasing; themes can override) ---- */ --tc-success-accent: var(--tc-success, #28a745); --tc-danger-accent: var(--tc-danger, #dc3545); --tc-warning-accent: var(--tc-warning, #ffc107); /* ---- Radii ---- */ --tc-radius-sm: 0.375rem; --tc-radius-md: 0.75rem; --tc-radius-lg: 1.25rem; --tc-radius-pill: 999px; /* ---- Spacing (theme-tunable density scale) ---- */ --tc-spacing-unit: 0.25rem; /* 1 = 4px. Themes can dial up/down. */ --tc-section-gap: calc(var(--tc-spacing-unit) * 8); /* default 32px */ /* ---- Typography ---- */ --tc-font-body: var(--tc-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); --tc-font-display: var(--tc-font-body); /* themes override with a display face */ --tc-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* ---- Shadows ---- */ --tc-shadow-card: var(--tc-shadow, 0 4px 6px rgba(0,0,0,0.1)); --tc-shadow-pop: var(--tc-shadow-lg, 0 10px 30px rgba(0,0,0,0.15)); /* ---- Motion ---- */ --tc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --tc-ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* ---- Z-index scale used by new themes ---- */ --tc-z-nav: 1020; --tc-z-bottom-tab: 1030; --tc-z-modal: 1050; --tc-z-toast: 1080; } /* ---------------------------------------------------------------------------- Body-class helpers. Theme PHP layouts set these on so component CSS in the theme files can scope cleanly without colliding with legacy CSS. ---------------------------------------------------------------------------- */ body.theme-mates-match, body.theme-stack-deck { font-family: var(--tc-font-body); background-color: var(--tc-bg); color: var(--tc-fg); } /* ---------------------------------------------------------------------------- tabular numerics everywhere a number lives. New themes opt-in their own numeric containers with .tc-num; legacy CSS is untouched. ---------------------------------------------------------------------------- */ .tc-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* ---------------------------------------------------------------------------- Bottom tab bar primitive — shared shell that #04 and #11-style themes can reuse. Each theme overrides the visual styling. ---------------------------------------------------------------------------- */ .tc-bottom-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--tc-z-bottom-tab); display: none; /* themes flip to flex on mobile */ padding-bottom: env(safe-area-inset-bottom, 0); background: var(--tc-bg-2); border-top: 1px solid var(--tc-fg-muted); } .tc-bottom-tabs__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem 0.25rem; color: var(--tc-fg-dim); text-decoration: none; font-size: 0.7rem; line-height: 1.1; gap: 2px; } .tc-bottom-tabs__item.is-active { color: var(--tc-accent); } .tc-bottom-tabs__item i { font-size: 1.25rem; } @media (max-width: 767.98px) { body.has-bottom-tabs .tc-bottom-tabs { display: flex; } body.has-bottom-tabs main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); } }