/* ============================================================ just-base.css — Shared design tokens for the Just Suite THEMING SYSTEM: - Set --hue (0-360) to change the entire color palette - Light/dark via [data-theme="light|dark"] on - Falls back to prefers-color-scheme if no data-theme set PRESET HUES: [data-hue="blue"] → --hue: 210 [data-hue="teal"] → --hue: 175 [data-hue="green"] → --hue: 145 [data-hue="purple"] → --hue: 265 [data-hue="red"] → --hue: 0 [data-hue="orange"] → --hue: 25 [data-hue="pink"] → --hue: 330 USAGE: ============================================================ */ /* --- Hue presets (applied via data-hue on ) --- */ :root { --hue: 210; } [data-hue="blue"] { --hue: 210; } [data-hue="teal"] { --hue: 175; } [data-hue="green"] { --hue: 145; } [data-hue="purple"] { --hue: 265; } [data-hue="red"] { --hue: 0; } [data-hue="orange"] { --hue: 25; } [data-hue="pink"] { --hue: 330; } /* --- Dark theme (default) --- */ :root, [data-theme="dark"] { --bg: hsl(var(--hue) 15% 8%); --bg-surface: hsl(var(--hue) 12% 12%); --bg-raised: hsl(var(--hue) 10% 16%); --bg-overlay: hsl(var(--hue) 12% 12% / 0.95); --text: hsl(var(--hue) 10% 88%); --text-muted: hsl(var(--hue) 8% 55%); --text-faint: hsl(var(--hue) 6% 35%); --accent: hsl(var(--hue) 70% 60%); --accent-hover: hsl(var(--hue) 70% 68%); --accent-muted: hsl(var(--hue) 40% 25%); --accent-glow: hsl(var(--hue) 70% 60% / 0.15); --border: hsl(var(--hue) 10% 20%); --border-subtle: hsl(var(--hue) 8% 15%); --success: hsl(145 60% 45%); --warning: hsl(40 80% 55%); --danger: hsl(0 65% 55%); } /* --- Light theme --- */ [data-theme="light"] { --bg: hsl(var(--hue) 15% 96%); --bg-surface: hsl(var(--hue) 15% 100%); --bg-raised: hsl(var(--hue) 12% 93%); --bg-overlay: hsl(var(--hue) 15% 100% / 0.95); --text: hsl(var(--hue) 15% 15%); --text-muted: hsl(var(--hue) 8% 45%); --text-faint: hsl(var(--hue) 6% 65%); --accent: hsl(var(--hue) 70% 45%); --accent-hover: hsl(var(--hue) 70% 38%); --accent-muted: hsl(var(--hue) 30% 88%); --accent-glow: hsl(var(--hue) 70% 45% / 0.1); --border: hsl(var(--hue) 12% 85%); --border-subtle: hsl(var(--hue) 8% 90%); --success: hsl(145 55% 38%); --warning: hsl(40 75% 45%); --danger: hsl(0 60% 48%); } /* --- System preference fallback --- */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: hsl(var(--hue) 15% 96%); --bg-surface: hsl(var(--hue) 15% 100%); --bg-raised: hsl(var(--hue) 12% 93%); --bg-overlay: hsl(var(--hue) 15% 100% / 0.95); --text: hsl(var(--hue) 15% 15%); --text-muted: hsl(var(--hue) 8% 45%); --text-faint: hsl(var(--hue) 6% 65%); --accent: hsl(var(--hue) 70% 45%); --accent-hover: hsl(var(--hue) 70% 38%); --accent-muted: hsl(var(--hue) 30% 88%); --accent-glow: hsl(var(--hue) 70% 45% / 0.1); --border: hsl(var(--hue) 12% 85%); --border-subtle: hsl(var(--hue) 8% 90%); --success: hsl(145 55% 38%); --warning: hsl(40 75% 45%); --danger: hsl(0 60% 48%); } } /* --- Spacing & radius scale --- */ :root { --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; } /* --- Typography --- */ :root { --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "SF Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 3rem; --text-hero: clamp(3rem, 8vw, 6rem); --leading-tight: 1.2; --leading-normal: 1.5; --leading-loose: 1.7; --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; } /* --- Transitions --- */ :root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 400ms; } /* ============================================================ BASE RESET & DEFAULTS ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: var(--font-body); font-size: 16px; line-height: var(--leading-normal); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; transition: background var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out); } body { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; } /* ============================================================ UTILITY CLASSES ============================================================ */ /* --- Layout --- */ .just-container { width: 100%; max-width: 480px; padding: var(--space-lg); margin: 0 auto; } .just-center { display: flex; flex-direction: column; align-items: center; justify-content: center; } .just-stack > * + * { margin-top: var(--space-md); } .just-stack-lg > * + * { margin-top: var(--space-lg); } /* --- Surfaces --- */ .just-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-lg); } .just-card-raised { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); } /* --- Buttons --- */ .just-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); border: none; border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: all var(--duration-normal) var(--ease-out); user-select: none; -webkit-tap-highlight-color: transparent; } .just-btn-primary { background: var(--accent); color: hsl(var(--hue) 15% 8%); } .just-btn-primary:hover { background: var(--accent-hover); box-shadow: 0 0 20px var(--accent-glow); } .just-btn-primary:active { transform: scale(0.97); } .just-btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .just-btn-ghost:hover { color: var(--text); border-color: var(--text-muted); } .just-btn-ghost:active { transform: scale(0.97); } .just-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-muted); border: 1px solid var(--border-subtle); font-size: var(--text-lg); } .just-btn-icon:hover { color: var(--text); border-color: var(--border); background: var(--bg-raised); } /* --- Typography helpers --- */ .just-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--text); letter-spacing: -0.02em; } .just-subtitle { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-normal); } .just-mono { font-family: var(--font-mono); } .just-accent { color: var(--accent); } .just-muted { color: var(--text-muted); } .just-faint { color: var(--text-faint); } /* --- Big display numbers (timers, counters) --- */ .just-display { font-family: var(--font-mono); font-size: var(--text-hero); font-weight: var(--weight-bold); color: var(--accent); line-height: 1; letter-spacing: -0.03em; } /* --- Stat blocks --- */ .just-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--space-md); } .just-stat { text-align: center; } .just-stat-value { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--accent); } .just-stat-label { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-top: var(--space-xs); } /* --- Settings panel (for theme picker) --- */ .just-settings { position: fixed; bottom: var(--space-lg); right: var(--space-lg); z-index: 100; } .just-settings-panel { position: absolute; bottom: calc(100% + var(--space-sm)); right: 0; background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md); min-width: 200px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } .just-settings-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); } .just-settings-label { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-sm); } .just-hue-options { display: flex; gap: var(--space-xs); flex-wrap: wrap; } .just-hue-dot { width: 28px; height: 28px; border-radius: var(--radius-full); border: 2px solid transparent; cursor: pointer; transition: border-color var(--duration-fast), transform var(--duration-fast); } .just-hue-dot:hover { transform: scale(1.15); } .just-hue-dot.active { border-color: var(--text); } .just-theme-toggle { display: flex; gap: var(--space-xs); margin-top: var(--space-md); } .just-theme-option { flex: 1; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: var(--text-xs); font-family: var(--font-body); cursor: pointer; text-align: center; transition: all var(--duration-fast); } .just-theme-option.active { background: var(--accent-muted); color: var(--accent); border-color: var(--accent); } /* --- Footer --- */ .just-footer { margin-top: auto; padding: var(--space-lg); text-align: center; font-size: var(--text-xs); color: var(--text-faint); } .just-footer a { color: var(--text-muted); text-decoration: none; } .just-footer a:hover { color: var(--accent); } /* --- Responsive --- */ @media (max-width: 480px) { .just-container { padding: var(--space-md); } } /* --- Accessibility --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }