/* ================================================================ TOKENS.CSS — Winnie Nguyen Mentoring Design System v2 Single source of truth for all design values. Purple (#6B3FEE) primary · Yellow (#F5D028) secondary Used by: - Themes/components.css → learning pages & hub - _Config/slide-design/ → teaching slide decks (via @import) Edit values here → every HTML file inherits automatically. DO NOT add component styles here — use components.css. ================================================================ */ /* ── Public Sans variable font (self-hosted) ──────────────── */ @font-face { font-family: 'Public Sans'; src: url('./assets/fonts/PublicSans-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('./assets/fonts/PublicSans-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } /* ── Syne variable font (self-hosted — display headings) ──── */ @font-face { font-family: 'Syne'; src: url('./assets/fonts/Syne-VariableFont_wght.ttf') format('truetype'); font-weight: 400 800; font-style: normal; font-display: swap; } /* ── JetBrains Mono (Google Fonts — code/mono only) ─────── */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ── Brand: Purple ────────────────────────────────────────── */ --purple: #6B3FEE; --purple-deep: #4A24C4; --purple-mid: #9E7EF5; --purple-tint: #EAE0FF; --purple-subtle: #F5F2FF; /* ── Brand: Yellow ────────────────────────────────────────── */ --yellow: #F5D028; --yellow-deep: #C9A400; --yellow-mid: #FAE57A; --yellow-tint: #FFF4B8; --yellow-subtle: #FFFDE8; /* ── Semantic: Success ────────────────────────────────────── */ --success: #22C55E; --success-deep: #16A34A; --success-tint: #DCFCE7; /* ── Semantic: Error ──────────────────────────────────────── */ --error: #EF4444; --error-deep: #DC2626; --error-tint: #FEE2E2; /* ── Semantic: Warning ────────────────────────────────────── */ --warning: #F59E0B; --warning-deep: #D97706; --warning-tint: #FEF3C7; /* ── Semantic: Info ───────────────────────────────────────── */ --info: #3B82F6; --info-deep: #2563EB; --info-tint: #DBEAFE; /* ── Tertiary accents ─────────────────────────────────────── */ --sage: #5D8A6E; --sage-tint: #D2E2D6; --coral: #E85A7A; --coral-tint: #FBDDE4; /* ── Neutrals ─────────────────────────────────────────────── */ --white: #FFFFFF; --gray-50: #F8F7FB; --gray-100: #F0EEF5; --gray-200: #E0DCE9; --gray-300: #C4BECD; --gray-400: #9A94A5; --gray-500: #706A7C; --gray-600: #4E4758; --gray-700: #342E3E; --gray-900: #1A1325; /* ── Text ─────────────────────────────────────────────────── */ --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-tertiary: var(--gray-400); --text-disabled: var(--gray-300); --text-on-primary: #FFFFFF; --text-on-yellow: var(--gray-900); /* ── Surfaces & borders ───────────────────────────────────── */ --surface-page: var(--gray-50); --surface-base: #FFFFFF; --surface-raised: #FFFFFF; --surface-overlay: #FFFFFF; --border-default: var(--gray-200); --border-strong: var(--gray-300); --border-focus: var(--purple); /* ── Slide surfaces (used by _Config/slide-design/) ──────── */ --paper: #FFFFFF; --paper-deeper: #F6F3FB; --paper-cool: #F7F7F8; --ink: var(--gray-900); --ink-soft: #3D3552; --ink-muted: #7C7488; --ink-ghost: #DDD7E6; /* ── Typography ───────────────────────────────────────────── */ --font-display: 'Syne', 'Public Sans', system-ui, sans-serif; --font-body: 'Public Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* Web type scale (15–48px) */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-mono: 0.12em; /* ── 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; --space-20: 80px; --space-24: 96px; /* ── Border radius ────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 9999px; /* ── Elevation shadow scale (neutral gray) ───────────────── */ --shadow-z1: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-z4: 0 2px 6px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-z8: 0 4px 14px rgba(0, 0, 0, 0.09), 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-z12: 0 6px 20px rgba(0, 0, 0, 0.10), 0 3px 6px rgba(0, 0, 0, 0.05); --shadow-z16: 0 10px 28px rgba(0, 0, 0, 0.11), 0 4px 8px rgba(0, 0, 0, 0.05); --shadow-z20: 0 14px 40px rgba(0, 0, 0, 0.13), 0 6px 12px rgba(0, 0, 0, 0.06); --shadow-z24: 0 24px 64px rgba(0, 0, 0, 0.16), 0 10px 20px rgba(0, 0, 0, 0.08); /* Named elevation aliases */ --shadow-card: var(--shadow-z4); --shadow-dropdown: var(--shadow-z8); --shadow-dialog: var(--shadow-z20); --shadow-modal: var(--shadow-z24); /* ── Motion ───────────────────────────────────────────────── */ --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --transition: all var(--duration-base) var(--ease-standard); --transition-fast: all var(--duration-fast) var(--ease-standard); --transition-slow: all var(--duration-slow) var(--ease-standard); /* ── Layout ───────────────────────────────────────────────── */ --max-width: 1200px; --nav-height: 64px; --gutter: 48px; /* Slide canvas */ --slide-w: 1920px; --slide-h: 1080px; --slide-pad: 96px; /* ── Content-type colors ──────────────────────────────────── */ --lesson-color: var(--purple); --lesson-bg: var(--purple-tint); --framework-color: #7B4F2E; --framework-bg: #F5E6D8; --slides-color: var(--sage); --slides-bg: var(--sage-tint); --guide-color: var(--yellow-deep); --guide-bg: var(--yellow-tint); /* ── Program badge colors ─────────────────────────────────── */ --prog-ux-class-color: var(--sage); --prog-ux-class-bg: var(--sage-tint); --prog-private-color: #7B4F2E; --prog-private-bg: #F5E6D8; /* ── Chart series colors ──────────────────────────────────── */ --chart-1: #6B3FEE; /* purple */ --chart-2: #F5A623; /* amber */ --chart-3: #22D3C8; /* teal */ --chart-4: #EF4444; /* coral */ --chart-5: #F5D028; /* yellow */ --chart-grid: rgba(107, 63, 238, 0.08); --chart-axis: var(--gray-300); --chart-label: var(--text-tertiary); /* ── Legacy aliases — keep existing HTML files working ───── */ /* v1 Themes aliases */ --off-white: var(--gray-50); --warm-gray: var(--gray-100); --rule: var(--border-default); --accent: var(--purple); --accent-light: var(--purple-tint); --accent-mid: var(--purple-mid); --serif: var(--font-display); --sans: var(--font-body); /* v1 slide aliases */ --sienna: var(--purple); --sienna-deep: var(--purple-deep); --sienna-tint: var(--purple-tint); --ochre: var(--yellow); --ochre-tint: var(--yellow-tint); --accent-deep: var(--purple-deep); --accent-tint: var(--purple-tint); --positive: var(--sage); --positive-tint: var(--sage-tint); --caution: var(--yellow); --caution-tint: var(--yellow-tint); --hairline: 1px solid var(--ink-ghost); --shadow-sm: var(--shadow-z4); --shadow-md: var(--shadow-z8); --shadow-lg: var(--shadow-z20); } /* ── Override example — page-level theme swap: ================================================================ */