/* ========================================================================== PandBaz — Shared Design Tokens Single source of truth for HsProject (public website) and HsProject.App (end-user web app). This folder (/DesignSystem) mirrors wwwroot's own layout (css/, js/) and is synced into each project's actual wwwroot by an MSBuild Copy target (see the SyncDesignSystem target in both .csproj files) that runs before every build — editing this one file and rebuilding updates both projects' wwwroot copies. Layered structure: Primitive → Semantic → Component. The admin dashboard (HsProject/Components/Admin) still has its own separate design-tokens.css for now; unifying it with this file is a possible future step, not done yet. ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. Primitive tokens Raw color values. Never use these directly in components — only the Semantic layer below should reference them. ------------------------------------------------------------------------ */ /* Indigo — primary brand color */ --color-indigo-50: #EDEFF5; --color-indigo-100: #C7CCDF; --color-indigo-200: #A1A9C9; --color-indigo-300: #7A85B0; --color-indigo-400: #566293; --color-indigo-500: #2E3A5C; /* base */ --color-indigo-600: #26304C; --color-indigo-700: #1E263C; --color-indigo-800: #161C2D; --color-indigo-900: #0E121D; /* Copper — secondary brand color */ --color-copper-50: #FBEFE7; --color-copper-100: #F2D2BC; --color-copper-200: #E8B491; --color-copper-300: #DE9668; --color-copper-400: #D17E4E; --color-copper-500: #C56A3E; /* base */ --color-copper-600: #A2542F; --color-copper-700: #7D4025; --color-copper-800: #592D1A; --color-copper-900: #3D1E0C; /* Warm gray — neutrals */ --color-gray-0: #FFFFFF; --color-gray-50: #F7F5F0; --color-gray-100: #EFEDE7; --color-gray-200: #DDDAD2; --color-gray-300: #C2BFB6; --color-gray-400: #A0A099; --color-gray-500: #8A8A86; --color-gray-600: #6B6B67; --color-gray-700: #4E4E4B; --color-gray-800: #2C2C2A; --color-gray-900: #1A1A18; /* Status colors — deliberately outside the brand palette for clarity */ --color-green-500: #4E8B3B; --color-green-100: #E1EEDA; --color-red-500: #C0433F; --color-red-100: #F7E1E0; --color-amber-500: #C08A2E; --color-amber-100: #F5E9D3; --color-blue-500: #3B6FA0; --color-blue-100: #DFEAF3; /* Gamification gold — kept separate from copper so it never blends with CTAs */ --color-gold-500: #D6A337; --color-gold-100: #F8EDD4; /* ------------------------------------------------------------------------ 2. Semantic tokens What each color MEANS in this UI. Components should only use this layer. ------------------------------------------------------------------------ */ /* Brand */ --color-brand-primary: var(--color-indigo-500); --color-brand-primary-hover: var(--color-indigo-600); --color-brand-secondary: var(--color-copper-500); --color-brand-secondary-hover: var(--color-copper-600); /* Surfaces */ --surface-page: var(--color-gray-50); --surface-card: var(--color-gray-0); --surface-raised: var(--color-gray-0); --surface-sunken: var(--color-gray-100); --surface-brand: var(--color-indigo-500); --surface-overlay: rgba(26, 26, 24, 0.5); /* Text */ --text-primary: var(--color-gray-800); --text-secondary: var(--color-gray-600); --text-muted: var(--color-gray-400); --text-on-brand: var(--color-gray-0); --text-on-copper: var(--color-gray-0); --text-link: var(--color-indigo-500); /* Borders */ --border-default: var(--color-gray-200); --border-strong: var(--color-gray-300); --border-brand: var(--color-indigo-500); /* System states — for things like form errors, offline banners, toasts. Do NOT use these for Challenge feedback; see --feedback-* below. */ --state-success-bg: var(--color-green-100); --state-success-text: var(--color-green-500); --state-danger-bg: var(--color-red-100); --state-danger-text: var(--color-red-500); --state-warning-bg: var(--color-amber-100); --state-warning-text: var(--color-amber-500); --state-info-bg: var(--color-blue-100); --state-info-text: var(--color-blue-500); /* Gamification */ --gamify-points: var(--color-gold-500); --gamify-points-bg: var(--color-gold-100); --gamify-streak: var(--color-copper-500); --gamify-locked: var(--color-gray-300); /* Learning path nodes (Skill path screen) — app-specific, not in admin */ --path-node-complete-bg: var(--color-gray-100); --path-node-complete-icon: var(--color-gray-400); --path-node-current-bg: var(--color-indigo-50); --path-node-current-border: var(--color-indigo-500); --path-node-current-icon: var(--color-indigo-600); --path-node-locked-bg: var(--surface-page); --path-node-locked-icon: var(--color-gray-400); --path-line: var(--border-strong); /* Reflective feedback (Challenge screen) — app-specific, not in admin. Intentionally uses the brand indigo tint, never success/danger colors: a Challenge has no "correct" or "wrong" answer, only reflection. */ --feedback-bg: var(--color-indigo-50); --feedback-text: var(--color-indigo-700); /* ------------------------------------------------------------------------ 3. Typography, spacing, radius, shadow Same scale as the admin dashboard, plus one larger size for full-screen Hook statements and celebratory completion screens. ------------------------------------------------------------------------ */ --font-sans: 'IRANYekan', -apple-system, sans-serif; --font-size-caption: 0.75rem; /* 12px */ --font-size-body: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-heading: 1.125rem; /* 18px */ --font-size-title: 1.375rem; /* 22px */ --font-size-display: 1.75rem; /* 28px — Hook screens, XP/celebration screens */ /* App-specific: reading content (Hook/Learn text) needs a defined line-height for comfort; the admin dashboard's dense tables didn't. */ --line-height-tight: 1.25; --line-height-normal: 1.6; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(26, 26, 24, 0.06); --shadow-md: 0 4px 12px rgba(26, 26, 24, 0.08); } /* ========================================================================== Dark mode Only the Semantic layer is overridden; Primitive tokens stay fixed. Activated with data-theme="dark" on or . ========================================================================== */ [data-theme="dark"] { --surface-page: var(--color-gray-900); --surface-card: var(--color-gray-800); --surface-raised: var(--color-gray-800); --surface-sunken: var(--color-gray-700); --surface-brand: var(--color-indigo-600); --surface-overlay: rgba(0, 0, 0, 0.6); --text-primary: var(--color-gray-50); --text-secondary: var(--color-gray-300); --text-muted: var(--color-gray-500); --text-on-copper: var(--color-gray-50); --text-link: var(--color-indigo-200); --border-default: var(--color-gray-700); --border-strong: var(--color-gray-600); --state-success-bg: rgba(78, 139, 59, 0.16); --state-danger-bg: rgba(192, 67, 63, 0.16); --state-warning-bg: rgba(192, 138, 46, 0.16); --state-info-bg: rgba(59, 111, 160, 0.16); --gamify-points-bg: rgba(214, 163, 55, 0.16); --path-node-complete-bg: var(--color-gray-700); --path-node-current-bg: rgba(122, 133, 176, 0.16); --path-node-locked-bg: var(--surface-page); --feedback-bg: rgba(122, 133, 176, 0.16); --feedback-text: var(--color-indigo-200); }