/* ============================================================================ HugoFamily — Design Tokens ---------------------------------------------------------------------------- Layered token architecture so the whole app can be themed (light/dark) AND skinned (per family member) without rewriting component CSS. LAYER ORDER (each layer may override the one above): 1. Base scales .......... spacing, radius, shadow geometry, typography, motion. Theme- and skin-independent. 2. Brand + theme palette raw colour values for the *current theme* (`--color-*`). Light is the default; dark is applied via `[data-theme="dark"]` or the OS preference. This is also the layer a SKIN overrides (see layer 4). 3. Semantic tokens ...... role-based tokens the components actually use (`--surface-card`, `--btn-primary-bg`, `--nav-active-bg`, `--focus-ring`, ...). They point at layer-2 colours, so re-skinning only touches layer 2. 4. Skins ................ `[data-skin="…"]` blocks that override a small, well-defined set of layer-2 colours (mainly the brand + accents). Default skin = `hugo-classic` (= the bare `:root` values, no override needed). 5. Legacy aliases ....... old token names (`--bg`, `--brand`, …) mapped to the new semantic tokens, so any not-yet-migrated CSS / inline styles keep working during rollout. HOW IT IS APPLIED TO THE DOM (see base.html / context_processors.py): Absence of `data-theme` => follow the OS (`prefers-color-scheme`). Absence of `data-skin` => `hugo-classic` (the :root defaults). ADDING A NEW SKIN: copy a `[data-skin]` block below, give it a new name, and override the brand/accent colours. You MUST keep every token listed under "Mandatory skin tokens" (see docs/design/skin-system.md) and pass the accessibility checks documented there (AA text/UI contrast, visible focus, success/warning/danger still distinguishable, dark-mode variant). ========================================================================== */ /* ---- Self-hosted brand typeface (shared with the marketing site) --------- */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plus-jakarta-sans-500.304f6bea61bc.ttf") format("truetype"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-700.d19e33cac5f6.ttf") format("truetype"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-800.7ad9017c5008.ttf") format("truetype"); } /* ============================================================================ LAYER 1 — Base scales (theme/skin independent) ========================================================================== */ :root { color-scheme: light dark; /* Typography ------------------------------------------------------------- */ --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --text-eyebrow: 0.75rem; /* 12px */ --text-small: 0.8125rem; /* 13px */ --text-meta: 0.875rem; /* 14px */ --text-body: 1rem; /* 16px */ --text-row: 1.0625rem; /* 17px */ --text-h2: 1.35rem; /* ~22px */ --text-button: 1rem; /* 16px */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 650; --weight-bold: 700; --weight-heavy: 800; /* Spacing scale (4px rhythm) -------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ /* Radius scale ----------------------------------------------------------- */ --radius-sm: 10px; /* chips, badges, small controls */ --radius-md: 16px; /* inputs, buttons */ --radius-lg: 22px; /* cards, list groups */ --radius-xl: 28px; /* hero cards, modals, sheets */ --radius-pill: 999px; /* Motion ----------------------------------------------------------------- */ --dur-press: 120ms; --dur-base: 200ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* Tap target floor (WCAG / one-handed use) ------------------------------ */ --tap-min: 44px; /* Layout ----------------------------------------------------------------- */ --shell-max: 48rem; /* Swipe-action geometry (kept from the original shell) ------------------- */ --swipe-left-offset: -9.8rem; --swipe-right-offset: 5.6rem; } /* ============================================================================ LAYER 2 — Brand + theme palette (LIGHT, default = "hugo-classic") Hybrid model: ORANGE = brand / create / CTA / Hugo; SAGE = done / success / trust / routine; cream + brown = shared foundation with the website. ========================================================================== */ :root { /* Surfaces */ --color-bg: #fff7ec; --color-bg-soft: #faeedc; --color-surface: #ffffff; --color-surface-warm: #fffdf8; --color-surface-tint: #faf2e4; /* Text */ --color-text: #2d241c; --color-text-muted: #6f6257; --color-text-faint: #8a7a6c; /* Lines */ --color-border: #e8dccb; /* Brand (orange) */ --color-primary: #f28c38; --color-primary-hover: #e67622; --color-primary-soft: #ffe1bf; --color-primary-text: #b95d16; /* orange dark enough for text on cream (AA) */ --color-on-primary: #2d241c; /* dark-brown on orange ≈ 6.2:1 (AA) */ /* Success / trust (sage) */ --color-success: #5f8a57; /* darker sage: white text passes AA */ --color-success-strong: #4f724b; --color-success-text: #44663f; /* sage text on light (AA) */ --color-success-soft: #e8f0e2; --color-on-success: #ffffff; /* Info / edit (slate blue) */ --color-info: #4f6f97; --color-info-text: #315985; --color-info-soft: #e7eef6; --color-on-info: #ffffff; /* Warning / attention */ --color-warning: #c98a2b; --color-warning-text: #875717; --color-warning-soft: #f7eac6; --color-on-warning: #2d241c; /* Danger / destructive */ --color-danger: #9c3f2f; --color-danger-hover: #863525; --color-danger-text: #9c3f2f; --color-danger-soft: #fff0ed; --color-danger-border: #e2b4aa; --color-on-danger: #ffffff; /* HugoAI accent */ --color-ai: #7c5cb8; --color-ai-text: #5e3fa0; --color-ai-soft: #efe7fa; /* Effects */ --color-overlay: rgba(45, 36, 28, 0.45); --shadow-rgb: 61, 45, 29; --focus-ring-color: #c9701f; /* high-visibility orange ring on cream */ /* Disabled */ --color-disabled-bg: #ece3d4; --color-disabled-text: #a99c8c; } /* ---- LAYER 2 (DARK) — warm, soft, readable (not pure black) -------------- */ /* Applied two ways: forced via [data-theme="dark"], or auto via the OS when no explicit light is forced. The declarations are duplicated because CSS cannot share a body across two selectors. Keep the two blocks in sync. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #1f1914; --color-bg-soft: #2a221b; --color-surface: #332a22; --color-surface-warm: #3b3027; --color-surface-tint: #2a231b; --color-text: #fff4e6; --color-text-muted: #c9b9a6; --color-text-faint: #a99a88; --color-border: #4a3d31; --color-primary: #f6a15a; --color-primary-hover: #ffb16d; --color-primary-soft: #4a2e18; --color-primary-text: #f6a15a; --color-on-primary: #2d1f12; --color-success: #7fa37a; --color-success-strong: #94b88e; --color-success-text: #aacba4; --color-success-soft: #263a25; --color-on-success: #18230f; --color-info: #6f93bf; --color-info-text: #a9c7ef; --color-info-soft: #243244; --color-on-info: #0f1a26; --color-warning: #e4bc68; --color-warning-text: #f0cd8f; --color-warning-soft: #44361b; --color-on-warning: #2d1f12; --color-danger: #d47b6c; --color-danger-hover: #e08c7d; --color-danger-text: #e7a99c; --color-danger-soft: #3a201c; --color-danger-border: #6e3a30; --color-on-danger: #2d1410; --color-ai: #bda4ea; --color-ai-text: #cdbcf2; --color-ai-soft: #352943; --color-overlay: rgba(0, 0, 0, 0.55); --shadow-rgb: 0, 0, 0; --focus-ring-color: #ffb16d; --color-disabled-bg: #2c241c; --color-disabled-text: #7c6f60; } } [data-theme="dark"] { --color-bg: #1f1914; --color-bg-soft: #2a221b; --color-surface: #332a22; --color-surface-warm: #3b3027; --color-surface-tint: #2a231b; --color-text: #fff4e6; --color-text-muted: #c9b9a6; --color-text-faint: #a99a88; --color-border: #4a3d31; --color-primary: #f6a15a; --color-primary-hover: #ffb16d; --color-primary-soft: #4a2e18; --color-primary-text: #f6a15a; --color-on-primary: #2d1f12; --color-success: #7fa37a; --color-success-strong: #94b88e; --color-success-text: #aacba4; --color-success-soft: #263a25; --color-on-success: #18230f; --color-info: #6f93bf; --color-info-text: #a9c7ef; --color-info-soft: #243244; --color-on-info: #0f1a26; --color-warning: #e4bc68; --color-warning-text: #f0cd8f; --color-warning-soft: #44361b; --color-on-warning: #2d1f12; --color-danger: #d47b6c; --color-danger-hover: #e08c7d; --color-danger-text: #e7a99c; --color-danger-soft: #3a201c; --color-danger-border: #6e3a30; --color-on-danger: #2d1410; --color-ai: #bda4ea; --color-ai-text: #cdbcf2; --color-ai-soft: #352943; --color-overlay: rgba(0, 0, 0, 0.55); --shadow-rgb: 0, 0, 0; --focus-ring-color: #ffb16d; --color-disabled-bg: #2c241c; --color-disabled-text: #7c6f60; } /* ============================================================================ LAYER 4 — Skins A skin overrides ONLY layer-2 colours (mainly brand/accent). Because every component reads layer-3 semantic tokens, no component CSS changes per skin. Each skin provides light defaults plus dark overrides where the light value would be wrong on a dark surface. ========================================================================== */ /* hugo-classic = the :root defaults. Declared empty for clarity/discoverability. */ [data-skin="hugo-classic"] { /* uses :root brand tokens (orange primary, sage success) */ } /* ---- Warm Orange: orange-forward, a touch warmer and bolder --------------- */ [data-skin="warm-orange"] { --color-bg: #fff4e3; --color-bg-soft: #fde7cd; --color-surface-tint: #fdeed9; --color-primary: #ee7f23; --color-primary-hover: #db6c12; --color-primary-soft: #ffdcb4; --color-primary-text: #ad520f; --focus-ring-color: #c2611a; } [data-theme="dark"][data-skin="warm-orange"] { --color-primary: #f8a85f; --color-primary-hover: #ffba74; --color-primary-soft: #51300f; --color-primary-text: #f8a85f; } /* ---- Sage Calm: sage becomes the brand/primary; orange becomes secondary -- */ [data-skin="sage-calm"] { --color-primary: #4f724b; /* deep sage: white text passes AA */ --color-primary-hover: #426140; --color-primary-soft: #e0ecda; --color-primary-text: #3d5a39; --color-on-primary: #ffffff; --focus-ring-color: #3d5a39; /* Orange relegated to a secondary/accent role */ --color-success: #c98a2b; --color-success-text: #875717; --color-success-soft: #f7eac6; --color-on-success: #2d241c; } [data-theme="dark"][data-skin="sage-calm"] { --color-primary: #8fb889; --color-primary-hover: #a3c89d; --color-primary-soft: #25351f; --color-primary-text: #a3c89d; --color-on-primary: #16230f; --focus-ring-color: #a3c89d; } /* ---- High Contrast: AAA-leaning, strong borders, dark-on-light ------------ */ /* First-class accessibility skin: maximise text/UI contrast & focus visibility. */ [data-skin="high-contrast"] { --color-bg: #fffaf0; --color-bg-soft: #f4ead6; --color-surface: #ffffff; --color-surface-warm: #ffffff; --color-surface-tint: #f4ead6; --color-text: #1a130c; --color-text-muted: #3d342a; --color-text-faint: #4d4336; --color-border: #1a130c; --color-primary: #b5560f; /* darker orange: white text passes AA */ --color-primary-hover: #98480b; --color-primary-soft: #ffe1bf; --color-primary-text: #8f430a; --color-on-primary: #ffffff; --color-success: #2f5a2a; --color-success-text: #234521; --color-success-soft: #d8e8d2; --color-on-success: #ffffff; --color-info: #1f4d80; --color-info-text: #163a61; --color-on-info: #ffffff; --color-warning: #8a5a12; --color-warning-text: #6b4610; --color-on-warning: #ffffff; --color-danger: #8a2417; --color-danger-text: #7a1f13; --color-on-danger: #ffffff; --focus-ring-color: #1a130c; } [data-theme="dark"][data-skin="high-contrast"] { --color-bg: #000000; --color-bg-soft: #14110d; --color-surface: #1c1812; --color-surface-warm: #1c1812; --color-surface-tint: #14110d; --color-text: #ffffff; --color-text-muted: #e8ddcd; --color-text-faint: #d4c8b6; --color-border: #ffffff; --color-primary: #ffb066; --color-primary-hover: #ffc184; --color-primary-soft: #3a2410; --color-primary-text: #ffb066; --color-on-primary: #000000; --color-success: #9fd398; --color-success-text: #b6e0b0; --color-success-soft: #183014; --color-on-success: #000000; --color-info: #9cc2f0; --color-info-text: #b6d2f5; --color-on-info: #000000; --color-warning: #f5cd7f; --color-warning-text: #f8da9a; --color-on-warning: #000000; --color-danger: #f0998a; --color-danger-text: #f5b0a4; --color-on-danger: #000000; --focus-ring-color: #ffffff; } /* ============================================================================ LAYER 3 — Semantic component tokens These are what component CSS should reference. They are placed AFTER the skin/theme blocks but reference layer-2 vars, which CSS resolves lazily, so they always reflect the active theme + skin. ========================================================================== */ :root { /* Page / surfaces */ --surface-page: var(--color-bg); --surface-page-soft: var(--color-bg-soft); --surface-card: var(--color-surface); --surface-card-warm: var(--color-surface-warm); --surface-inset: var(--color-surface-tint); /* Text */ --text-primary: var(--color-text); --text-secondary: var(--color-text-muted); --text-muted: var(--color-text-faint); /* Hairlines */ --hairline: var(--color-border); /* Focus */ --focus-ring: var(--focus-ring-color); /* Shadows (warm, soft) */ --shadow-sm: 0 2px 8px rgba(var(--shadow-rgb), 0.06); --shadow-md: 0 8px 24px rgba(var(--shadow-rgb), 0.08); --shadow-lg: 0 18px 48px rgba(var(--shadow-rgb), 0.14); /* Buttons */ --btn-primary-bg: var(--color-primary); --btn-primary-bg-hover: var(--color-primary-hover); --btn-primary-text: var(--color-on-primary); --btn-secondary-bg: var(--color-surface); --btn-secondary-text: var(--color-text); --btn-secondary-border: var(--color-border); --btn-danger-bg: var(--color-danger); --btn-danger-bg-hover: var(--color-danger-hover); --btn-danger-text: var(--color-on-danger); --btn-disabled-bg: var(--color-disabled-bg); --btn-disabled-text: var(--color-disabled-text); /* Floating action button (= "add/create" => primary/orange) */ --fab-bg: var(--color-primary); --fab-text: var(--color-on-primary); /* Navigation */ --nav-bg: var(--color-surface); --nav-item: var(--color-text-muted); --nav-item-active-bg: var(--color-primary-soft); --nav-item-active-text: var(--color-primary-text); /* Inputs */ --input-bg: var(--color-surface); --input-border: var(--color-border); --input-border-focus: var(--color-primary); --input-text: var(--color-text); /* Chips / pills / badges */ --chip-bg: var(--color-surface-tint); --chip-text: var(--color-text-muted); --chip-active-bg: var(--color-primary); --chip-active-text: var(--color-on-primary); /* Status (used by status pills / flashes) */ --success-bg: var(--color-success-soft); --success-text: var(--color-success-text); --warning-bg: var(--color-warning-soft); --warning-text: var(--color-warning-text); --info-bg: var(--color-info-soft); --info-text: var(--color-info-text); --danger-bg: var(--color-danger-soft); --danger-text: var(--color-danger-text); --danger-border: var(--color-danger-border); /* Row action accents (swipe / overflow menu) */ --action-done-bg: var(--color-success); --action-done-text: var(--color-on-success); --action-edit-bg: var(--color-info); --action-edit-text: var(--color-on-info); --action-delete-bg: var(--color-danger); --action-delete-text: var(--color-on-danger); --action-restore-bg: #7a623f; --action-restore-text: #ffffff; /* Hero / decorative */ --hero-from: var(--color-surface-tint); --hero-to: var(--color-bg-soft); /* Overlay (modals/sheets) */ --overlay: var(--color-overlay); } /* ============================================================================ LAYER 5 — Legacy aliases Keep old token names working for any CSS / inline styles not yet migrated. New code should prefer the semantic tokens above. Remove once fully migrated. ========================================================================== */ :root { --bg: var(--surface-page); --panel: var(--surface-card); --surface-tint: var(--surface-inset); --surface-muted: var(--color-bg-soft); --text: var(--text-primary); --muted: var(--text-secondary); --brand: var(--color-primary); --brand-dark: var(--color-primary-text); --on-brand: var(--color-on-primary); --border: var(--hairline); --danger: var(--color-danger); --danger-border: var(--color-danger-border); --edit: var(--color-info); --accent-soft: var(--color-primary-soft); --ring: var(--focus-ring); --warn-bg: var(--warning-bg); --warn-text: var(--warning-text); --flash-bg: var(--success-bg); --flash-border: var(--color-success); --flash-text: var(--success-text); --hero-2: var(--hero-to); }