/* ========================================================================== Journey Tracker Design System — Tokens -------------------------------------------------------------------------- Single canonical token source. Reusable across projects. Two themes (set on ): classic → today's JT, slate + sky blue (DEFAULT) garden → off-white parchment + moss green Add data-mode="dark" on for dark mode. STATUS SEMANTICS (matches the Rails app's status pills 1:1): pending → info (sky blue) review → review (teal) completed → success (green) late → late (amber) overdue → overdue (red) draft → draft (orange) archived → archive (slate) Donut zones (Comfort / Challenge / Panic) use dedicated tokens so the green/amber/red triad stays stable even when status colors are themed. ========================================================================== */ /* --------------------------------------------------------------- FONTS — Graphik (300/400/600/700) --------------------------------------------------------------- */ @font-face { font-family: "Graphik"; font-display: swap; font-weight: 300; src: url("fonts/graphik-regular.woff2") format("woff2"); } @font-face { font-family: "Graphik"; font-display: swap; font-weight: 400; src: url("fonts/graphik-medium.woff2") format("woff2"); } @font-face { font-family: "Graphik"; font-display: swap; font-weight: 600; src: url("fonts/graphik-semibold.woff2") format("woff2"); } @font-face { font-family: "Graphik"; font-display: swap; font-weight: 700; src: url("fonts/graphik-bold.woff2") format("woff2"); } /* --------------------------------------------------------------- THEME · CLASSIC (default) --------------------------------------------------------------- */ :root, [data-theme="classic"] { /* surfaces */ --bg-app: #f4f5f7; --bg-surface: #ffffff; --bg-subtle: #f8fafc; --bg-offset: #f1f5f9; --bg-inverse: #0f172a; /* text */ --fg-1: #1e293b; --fg-2: #334155; --fg-3: #64748b; --fg-on-accent: #ffffff; --fg-on-dark: #ffffff; /* borders */ --border-1: #e2e8f0; --border-2: #cbd5e1; --border-3: #94a3b8; /* primary action — Sky */ --accent: #0284c7; --accent-hover: #0369a1; --accent-soft: #e0f2fe; --accent-tint: rgba(2, 132, 199, 0.10); --accent-ring: rgba(2, 132, 199, 0.28); /* status */ --st-info: #3498db; --st-info-soft: rgba(52,152,219,0.10); --st-info-ring: rgba(52,152,219,0.26); --st-success: #1f9d55; --st-success-soft: rgba(31,157,85,0.10); --st-success-ring: rgba(31,157,85,0.28); --st-review: #00808a; --st-review-soft: rgba(0,128,138,0.10); --st-review-ring: rgba(0,128,138,0.28); --st-late: #d59311; --st-late-soft: rgba(213,147,17,0.12); --st-late-ring: rgba(213,147,17,0.30); --st-overdue: #cb4335; --st-overdue-soft: rgba(203,67,53,0.10); --st-overdue-ring: rgba(203,67,53,0.28); --st-draft: #d96e3f; --st-draft-soft: rgba(217,110,63,0.10); --st-draft-ring: rgba(217,110,63,0.28); --st-archive: #52607f; --st-archive-soft: rgba(82,96,127,0.08); --st-archive-ring: rgba(82,96,127,0.24); --st-warning: var(--st-late); /* donut zones — DO NOT theme. Same triad everywhere. */ --donut-comfort: #1f9d55; --donut-challenge: #d59311; --donut-panic: #cb4335; --donut-track: #e8edf3; /* chart palette */ --chart-1: #2e8c63; --chart-1-soft: rgba(46,140,99,0.14); --chart-1-line: #2e8c63; --chart-grid: #e2e8f0; /* iconic top-bar gradients (status-aware) */ --topbar-info: linear-gradient(135deg, rgba(52,152,219,0.96), rgba(41,128,185,0.96)); --topbar-success: linear-gradient(135deg, rgba(31,157,85,0.96), rgba(24,128,68,0.96)); --topbar-review: linear-gradient(135deg, rgba(0,128,138,0.96), rgba(0,108,116,0.96)); --topbar-late: linear-gradient(135deg, rgba(213,147,17,0.96), rgba(190,128,12,0.96)); --topbar-overdue: linear-gradient(135deg, rgba(203,67,53,0.96), rgba(176,55,42,0.96)); --topbar-default: var(--topbar-info); /* type */ --font-body: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-body); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --font-sans: var(--font-body); --font-feature: "ss01", "cv11"; /* type scale (matches modern UI dashboards.scss) */ --text-xs: 0.75rem; /* 12px — labels, meta */ --text-sm: 0.8125rem; /* 13px — pills, info bits */ --text-base: 0.875rem; /* 14px — buttons, body */ --text-md: 0.9375rem; /* 15px — survey questions */ --text-lg: 1rem; /* 16px — input, default html */ --text-xl: 1.125rem; /* 18px — sub-section heading */ --text-2xl: 1.25rem; /* 20px — challenge title */ --text-3xl: 1.5rem; /* 24px — dashboard section heading */ --text-display: 2.5rem; /* 40px — hero "display-4" stats */ /* weights */ --weight-light: 300; --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; /* radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 9999px; /* shadows */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04); --shadow-pill-inset: inset 0 0 0 2px rgba(255,255,255,0.6); /* focus ring */ --ring-focus: 0 0 0 3px var(--accent-ring); /* spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* transitions */ --transition-fast: all 0.15s ease; --transition-normal: all 0.2s ease; --transition-slow: all 0.3s ease; /* layout */ --sidebar-width: 240px; --container-max: 1092px; --header-height: 56px; } /* --------------------------------------------------------------- THEME · GARDEN — light touch of nature --------------------------------------------------------------- */ [data-theme="garden"] { --bg-app: #f6f4ee; --bg-surface: #fdfcf8; --bg-subtle: #f2efe6; --bg-offset: #ece8db; --bg-inverse: #1c2620; --fg-1: #1d2a24; --fg-2: #3a4a40; --fg-3: #6b7a6f; --border-1: #e3ddc9; --border-2: #cfc6ad; --border-3: #a89d80; --accent: #4f7a4f; --accent-hover: #3e6240; --accent-soft: #e3ecde; --accent-tint: rgba(79, 122, 79, 0.10); --accent-ring: rgba(79, 122, 79, 0.30); --st-info: #3a7a9c; --st-info-soft: rgba(58,122,156,0.10); --st-info-ring: rgba(58,122,156,0.28); --st-success: #4f7a4f; --st-success-soft: rgba(79,122,79,0.10); --st-success-ring: rgba(79,122,79,0.28); --st-review: #4a8a89; --st-review-soft: rgba(74,138,137,0.10); --st-review-ring: rgba(74,138,137,0.28); --st-late: #b3852d; --st-late-soft: rgba(179,133,45,0.12); --st-late-ring: rgba(179,133,45,0.30); --st-overdue: #a4513f; --st-overdue-soft: rgba(164,81,63,0.10); --st-overdue-ring: rgba(164,81,63,0.28); --st-draft: #b46a3d; --st-draft-soft: rgba(180,106,61,0.10); --st-draft-ring: rgba(180,106,61,0.28); --st-archive: #6d6856; --st-archive-soft: rgba(109,104,86,0.08); --st-archive-ring: rgba(109,104,86,0.24); --st-warning: var(--st-late); --donut-comfort: #4f7a4f; --donut-challenge: #b3852d; --donut-panic: #a4513f; --donut-track: #ece8db; --chart-1: #4f7a4f; --chart-1-soft: rgba(79,122,79,0.16); --chart-1-line: #4f7a4f; --chart-grid: #e3ddc9; --topbar-info: linear-gradient(135deg, rgba(58,122,156,0.96), rgba(48,102,134,0.96)); --topbar-success: linear-gradient(135deg, rgba(79,122,79,0.96), rgba(62,98,64,0.96)); --topbar-review: linear-gradient(135deg, rgba(74,138,137,0.96), rgba(60,118,118,0.96)); --topbar-late: linear-gradient(135deg, rgba(179,133,45,0.96), rgba(155,113,38,0.96)); --topbar-overdue: linear-gradient(135deg, rgba(164,81,63,0.96), rgba(140,68,53,0.96)); --topbar-default: var(--topbar-success); --radius-sm: 4px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 24px; --shadow-xs: 0 1px 2px rgba(45, 50, 30, 0.05); --shadow-sm: 0 1px 2px rgba(45, 50, 30, 0.06), 0 1px 3px rgba(45, 50, 30, 0.04); --shadow-md: 0 4px 14px rgba(45, 50, 30, 0.07), 0 1px 3px rgba(45, 50, 30, 0.04); --shadow-lg: 0 12px 36px rgba(45, 50, 30, 0.12), 0 2px 6px rgba(45, 50, 30, 0.05); --shadow-pill-inset: inset 0 0 0 2px rgba(255,255,255,0.55); } /* ========================================================================== DARK MODE — applies on top of any theme ========================================================================== */ [data-mode="dark"]:root, [data-mode="dark"][data-theme="classic"], [data-mode="dark"]:not([data-theme]) { --bg-app: #0b1220; --bg-surface: #111a2c; --bg-subtle: #16223a; --bg-offset: #1d2b48; --bg-inverse: #f8fafc; --fg-1: #f1f5f9; --fg-2: #cbd5e1; --fg-3: #94a3b8; --border-1: #1f2a44; --border-2: #2c3a5c; --border-3: #475574; --accent-soft: rgba(59, 130, 246, 0.16); --shadow-xs: 0 1px 2px rgba(0,0,0,0.30); --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.20); --shadow-md: 0 4px 14px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.20); --shadow-lg: 0 14px 38px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.20); --donut-track: #1d2942; --chart-grid: #1f2a44; --chart-1-soft: rgba(46,140,99,0.22); } [data-mode="dark"][data-theme="garden"] { --bg-app: #131815; --bg-surface: #1b2520; --bg-subtle: #202b25; --bg-offset: #28342d; --fg-1: #ecebe2; --fg-2: #c5c5b6; --fg-3: #8a8d80; --border-1: #2c352f; --border-2: #3f4a41; --border-3: #5b6a5f; --accent: #76a275; --accent-hover: #8db58c; --accent-soft: rgba(118, 162, 117, 0.18); --donut-track: #28342d; --chart-grid: #2c352f; }