/* ============================================================ theme.css — Digilife Software design token system ------------------------------------------------------------ Three layers, same idea as Tailwind's theme config: 1. PRIMITIVES raw brand values --brand-primary 2. SEMANTIC role-based aliases --color-surface 3. COMPONENT each site maps its own local vars To rebrand a whole site you change ONE line in the HTML: Load this BEFORE styles.css. ============================================================ */ /* ------------------------------------------------------------ 1. TYPOGRAPHY TOKENS ------------------------------------------------------------ */ :root { /* System stacks — zero network cost, instant render */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Role assignments — swap these per client */ --font-display: var(--font-serif); --font-body: var(--font-sans); --font-ui: var(--font-sans); /* Type scale */ --text-xs: 0.78rem; --text-sm: 0.88rem; --text-base: 1rem; --text-lg: 1.14rem; --text-xl: 1.28rem; --text-2xl: clamp(1.6rem, 3.2vw, 2.2rem); --text-3xl: clamp(1.75rem, 3.6vw, 2.45rem); --text-4xl: clamp(2.2rem, 5.2vw, 3.6rem); --leading-tight: 1.18; --leading-snug: 1.4; --leading-normal: 1.65; --leading-relaxed: 1.75; --tracking-tight: -0.02em; --tracking-wide: 0.09em; --tracking-widest: 0.18em; /* Shape & rhythm */ --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-full: 999px; --space-section: 88px; --space-section-sm: 62px; --container: 1120px; --measure: 66ch; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 12px 28px -14px rgba(15, 20, 30, 0.24); --shadow-lg: 0 26px 60px -30px rgba(15, 20, 30, 0.38); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ------------------------------------------------------------ 2. BRAND PRESETS (primitives) Each preset defines primary / secondary / tertiary plus the neutral hue that tints the greys. Add your own by copying a block and changing six values. ------------------------------------------------------------ */ /* -- sage : calm, human, good for coaches & therapists -------- */ :root, [data-preset="sage"] { --brand-primary: #3f6349; --brand-primary-hover: #33513b; --brand-secondary: #8fae96; --brand-tertiary: #a9853f; --neutral-hue: 84; --neutral-sat: 12%; } /* -- navy : corporate, credible, good for consultants --------- */ [data-preset="navy"] { --brand-primary: #1c4e80; --brand-primary-hover: #163d64; --brand-secondary: #3d7ab5; --brand-tertiary: #b0722f; --neutral-hue: 216; --neutral-sat: 14%; } /* -- wine : editorial, premium, good for advisors ------------- */ [data-preset="wine"] { --brand-primary: #6d2f3d; --brand-primary-hover: #572531; --brand-secondary: #a9853f; --brand-tertiary: #8c6f4e; --neutral-hue: 32; --neutral-sat: 14%; } /* -- forest : grounded, natural ------------------------------- */ [data-preset="forest"] { --brand-primary: #1f5f3a; --brand-primary-hover: #17462c; --brand-secondary: #4e8f68; --brand-tertiary: #9c6c14; --neutral-hue: 150; --neutral-sat: 10%; } /* -- slate : neutral, technical, safe default ----------------- */ [data-preset="slate"] { --brand-primary: #334155; --brand-primary-hover: #1e293b; --brand-secondary: #64748b; --brand-tertiary: #0891b2; --neutral-hue: 220; --neutral-sat: 8%; } /* -- plum : distinctive, creative ----------------------------- */ [data-preset="plum"] { --brand-primary: #5b3a7e; --brand-primary-hover: #472e63; --brand-secondary: #8b6bb1; --brand-tertiary: #c4763f; --neutral-hue: 275; --neutral-sat: 10%; } /* -- ember : warm, energetic, good for fitness & hospitality -- */ [data-preset="ember"] { --brand-primary: #b4471f; --brand-primary-hover: #8f3717; --brand-secondary: #e0895c; --brand-tertiary: #3f6349; --neutral-hue: 26; --neutral-sat: 16%; } /* ------------------------------------------------------------ 3. SEMANTIC TOKENS — LIGHT (default) Components should only ever reference these, never the primitives above. That is what makes dark mode free. ------------------------------------------------------------ */ :root { --color-primary: var(--brand-primary); --color-primary-hover: var(--brand-primary-hover); --color-secondary: var(--brand-secondary); --color-tertiary: var(--brand-tertiary); --color-bg: hsl(var(--neutral-hue) var(--neutral-sat) 98%); --color-bg-alt: hsl(var(--neutral-hue) var(--neutral-sat) 95%); --color-surface: #ffffff; --color-surface-2: hsl(var(--neutral-hue) var(--neutral-sat) 97%); --color-inverse: hsl(var(--neutral-hue) calc(var(--neutral-sat) + 6%) 11%); --color-text: hsl(var(--neutral-hue) calc(var(--neutral-sat) + 8%) 10%); --color-text-muted: hsl(var(--neutral-hue) calc(var(--neutral-sat) - 2%) 40%); --color-text-subtle: hsl(var(--neutral-hue) calc(var(--neutral-sat) - 4%) 55%); --color-text-inverse: hsl(var(--neutral-hue) var(--neutral-sat) 88%); --color-border: hsl(var(--neutral-hue) var(--neutral-sat) 88%); --color-border-strong: hsl(var(--neutral-hue) var(--neutral-sat) 52%); --color-primary-soft: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface)); --color-on-primary: #ffffff; color-scheme: light; } /* ------------------------------------------------------------ 4. SEMANTIC TOKENS — DARK ------------------------------------------------------------ */ [data-theme="dark"] { --color-bg: hsl(var(--neutral-hue) calc(var(--neutral-sat) + 4%) 8%); --color-bg-alt: hsl(var(--neutral-hue) calc(var(--neutral-sat) + 4%) 11%); --color-surface: hsl(var(--neutral-hue) calc(var(--neutral-sat) + 3%) 13%); --color-surface-2: hsl(var(--neutral-hue) calc(var(--neutral-sat) + 3%) 16%); --color-inverse: hsl(var(--neutral-hue) calc(var(--neutral-sat) + 4%) 5%); --color-text: hsl(var(--neutral-hue) var(--neutral-sat) 94%); --color-text-muted: hsl(var(--neutral-hue) calc(var(--neutral-sat) - 2%) 68%); --color-text-subtle: hsl(var(--neutral-hue) calc(var(--neutral-sat) - 4%) 56%); --color-text-inverse: hsl(var(--neutral-hue) var(--neutral-sat) 92%); --color-border: hsl(var(--neutral-hue) var(--neutral-sat) 22%); --color-border-strong: hsl(var(--neutral-hue) var(--neutral-sat) 48%); /* Brand colours need lifting in dark mode or contrast fails WCAG */ --color-primary: color-mix(in srgb, var(--brand-primary) 58%, white); --color-primary-hover: color-mix(in srgb, var(--brand-primary) 74%, white); --color-secondary: color-mix(in srgb, var(--brand-secondary) 78%, white); --color-tertiary: color-mix(in srgb, var(--brand-tertiary) 72%, white); --color-primary-soft: color-mix(in srgb, var(--brand-primary) 22%, var(--color-surface)); --color-on-primary: hsl(var(--neutral-hue) 20% 8%); --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, 0.6); --shadow-lg: 0 26px 60px -30px rgba(0, 0, 0, 0.75); color-scheme: dark; } /* Follow the operating system when no explicit choice was made */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: hsl(var(--neutral-hue) calc(var(--neutral-sat) + 4%) 8%); --color-bg-alt: hsl(var(--neutral-hue) calc(var(--neutral-sat) + 4%) 11%); --color-surface: hsl(var(--neutral-hue) calc(var(--neutral-sat) + 3%) 13%); --color-surface-2: hsl(var(--neutral-hue) calc(var(--neutral-sat) + 3%) 16%); --color-inverse: hsl(var(--neutral-hue) calc(var(--neutral-sat) + 4%) 5%); --color-text: hsl(var(--neutral-hue) var(--neutral-sat) 94%); --color-text-muted: hsl(var(--neutral-hue) calc(var(--neutral-sat) - 2%) 68%); --color-text-subtle: hsl(var(--neutral-hue) calc(var(--neutral-sat) - 4%) 56%); --color-text-inverse: hsl(var(--neutral-hue) var(--neutral-sat) 92%); --color-border: hsl(var(--neutral-hue) var(--neutral-sat) 22%); --color-border-strong: hsl(var(--neutral-hue) var(--neutral-sat) 48%); --color-primary: color-mix(in srgb, var(--brand-primary) 58%, white); --color-primary-hover: color-mix(in srgb, var(--brand-primary) 74%, white); --color-secondary: color-mix(in srgb, var(--brand-secondary) 78%, white); --color-tertiary: color-mix(in srgb, var(--brand-tertiary) 72%, white); --color-primary-soft: color-mix(in srgb, var(--brand-primary) 22%, var(--color-surface)); --color-on-primary: hsl(var(--neutral-hue) 20% 8%); color-scheme: dark; } } /* ------------------------------------------------------------ 5. FONT PAIRING PRESETS ------------------------------------------------------------ */ [data-type="editorial"] { --font-display: var(--font-serif); --font-body: var(--font-sans); } [data-type="modern"] { --font-display: var(--font-sans); --font-body: var(--font-sans); } [data-type="classic"] { --font-display: var(--font-serif); --font-body: var(--font-serif); } [data-type="technical"] { --font-display: var(--font-mono); --font-body: var(--font-sans); } /* ------------------------------------------------------------ 6. THEME TRANSITION Colours cross-fade on switch, but never on first paint. ------------------------------------------------------------ */ .theme-ready body, .theme-ready body * { transition: background-color 0.32s var(--ease-out), border-color 0.32s var(--ease-out), color 0.32s var(--ease-out); } @media (prefers-reduced-motion: reduce) { .theme-ready body, .theme-ready body * { transition: none; } } /* ------------------------------------------------------------ 7. THEME SWITCHER WIDGET (demo only — delete for client sites) ------------------------------------------------------------ */ .theme-bar { position: fixed; right: 18px; bottom: 18px; z-index: 250; display: flex; align-items: center; gap: 14px; padding: 11px 15px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-surface) 88%, transparent); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); backdrop-filter: saturate(180%) blur(14px); font-family: var(--font-ui); } .theme-bar__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-subtle); white-space: nowrap; } .theme-bar__swatches { display: flex; gap: 7px; } .theme-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; outline: 1px solid var(--color-border); cursor: pointer; padding: 0; transition: transform 0.25s var(--ease-out), border-color 0.2s ease; } .theme-swatch:hover { transform: scale(1.18); } .theme-swatch[aria-pressed="true"] { border-color: var(--color-surface); outline-color: var(--color-text); outline-width: 2px; transform: scale(1.12); } .theme-toggle { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg-alt); color: var(--color-text); cursor: pointer; padding: 0; transition: transform 0.35s var(--ease-out), background-color 0.2s ease; } .theme-toggle:hover { transform: rotate(28deg); background: var(--color-primary-soft); } .theme-bar__divider { width: 1px; height: 22px; background: var(--color-border); } @media (max-width: 620px) { .theme-bar { right: 10px; bottom: 10px; gap: 9px; padding: 9px 11px; } .theme-bar__label { display: none; } }