/* ============================================================ tokens.css — Nudge Design System v1.0 The single source of truth for every colour, font, radius, shadow and space value in the hub. hub.css references these only via var(...) — it contains zero hardcoded hex or font-family names. Swap the values here (or override them at runtime from theme-editor.html) to whitelabel the suite. ============================================================ */ :root { /* ---- Colour — surfaces ---- */ --color-paper: #FBF7F2; /* outermost page background */ --color-surface: #F4EFE8; /* app canvas inside the nav */ --color-card: #FFFFFF; /* cards, inputs, panels */ /* ---- Colour — ink / text ---- */ --color-ink: #211C3E; /* primary text + structure */ --color-ink-soft: #5B5578; /* secondary text */ --color-muted: #8A85A0; /* tertiary / hint text */ --color-on-ink: #FBF7F2; /* text on ink-filled tiles */ --color-ink-tile: #211C3E; /* app-icon monogram tile bg — stays dark navy in both light and dark mode, since --color-ink itself flips to light text under [data-theme="dark"] below */ /* ---- Colour — one coral action ---- */ --color-primary: #FF7A29; --color-primary-soft: #FFF1E8; /* active nav pill / tint */ --color-on-primary: #FFFFFF; /* ---- Colour — status (always paired with a word) ---- */ --color-success: #29C7AC; /* teal — done / progress */ --color-warn: #E0655B; /* coral-red — at risk */ --color-highlight: #FFC857; /* sun — streak / highlight */ --color-highlight-soft: #FFF6E1; --color-highlight-border: #F3E4BC; --color-highlight-ink: #8A6414; /* ---- Colour — lines & fills ---- */ --color-border: #E8E1D6; /* card / input borders */ --color-track: #EFE7DB; /* progress-bar track */ --color-chip: #F4EFE8; /* neutral chip / segment bg */ /* ---- Overlays (rgba tints reused across states) ---- */ --overlay-focus: rgba(255, 122, 41, 0.16); /* input focus ring */ --overlay-hover: rgba(33, 28, 62, 0.04); /* soft hover wash */ /* ---- Type ---- */ --font-display: 'Baloo 2', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* ---- Radius (soft, never sharp) ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---- Shadow (low, warm) ---- */ --shadow-card: 0 12px 30px rgba(33, 28, 62, 0.05); --shadow-float: 0 16px 44px rgba(33, 28, 62, 0.06); --shadow-primary: 0 8px 18px rgba(255, 122, 41, 0.26); /* ---- Space (4px base, 8pt rhythm) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 44px; /* ---- Medals (leaderboard / podium — ordinal, not categorical) ---- */ --medal-gold: #F0BE4B; --medal-silver: #C3C7CE; --medal-bronze: #D2905A; /* ---- Brand ---- */ --logo-label: "nudge"; --logo-url: none; } /* ============================================================ Whitelabel demo — "Horizonte Academy" The exact same screens with one token swap: terracotta primary, deep-navy structure, sharper corners, school wordmark. No layout change — only tokens. theme-editor.html reproduces this live by calling :root.style.setProperty(). Preview it with . ============================================================ */ [data-theme="whitelabel"] { --color-primary: #E0632A; /* terracotta */ --color-primary-soft: #FBEAE0; --color-ink: #1C3D5A; /* navy structure */ --color-ink-soft: #4A6072; --color-muted: #8298A6; --color-success: #2E9C86; --color-highlight: #F0BE4B; --overlay-focus: rgba(224, 99, 42, 0.16); --shadow-primary: 0 8px 18px rgba(224, 99, 42, 0.26); /* Sharper 12px corners */ --radius-xl: 12px; --radius-lg: 10px; --radius-md: 8px; --logo-label: "Horizonte"; } /* ============================================================ Dark mode — , toggled by js/color-scheme.js (one shared preference across the hub and every spoke app that has a dark palette). Surfaces LIFT with elevation rather than inverting flatly — same convention TextBite/PhoneticsFlow/TenseTimeline already use, so the whole suite reads as one system in dark mode. Brand coral/teal/sun stay constant; only structure/surface tones and the warn colour (brightened for contrast) change. ============================================================ */ [data-theme="dark"] { --color-paper: #17142B; --color-surface: #1D1836; --color-card: #211C3E; --color-ink: #FBF7F2; --color-ink-soft: rgba(251, 247, 242, 0.70); --color-muted: rgba(251, 247, 242, 0.50); /* --color-on-ink and --color-ink-tile are intentionally NOT overridden — the app-icon monogram tile stays a constant dark-navy-with-cream-text chip regardless of page mode. */ --color-primary-soft: rgba(255, 122, 41, 0.16); --overlay-focus: rgba(255, 138, 61, 0.35); --overlay-hover: rgba(251, 247, 242, 0.06); --color-warn: #F07167; /* brightened — #E0655B reads too muddy on dark */ --color-highlight-soft: rgba(255, 200, 87, 0.18); --color-highlight-border: rgba(255, 200, 87, 0.32); --color-highlight-ink: #F4CE6B; --color-border: #2E2852; --color-track: #2A2450; --color-chip: #241F42; /* Dark lifts via surface contrast, not shadow — shadows recede. */ --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.32); --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.40); --shadow-primary: 0 8px 18px rgba(255, 122, 41, 0.30); }