/* ============================================================ The Study Clinic - Design Tokens Pure ASCII. Shared by Marketing site + MCAT Hub + Study Guide. FONTS DM Sans : self-hosted variable font (opsz + wght) Bricolage Grotesque: Google Fonts. Add to your : ============================================================ */ /* ---- @font-face: self-host DM Sans ---- */ @font-face { font-family: "DM Sans"; src: url("fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype-variations"), url("fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype"); font-weight: 100 1000; font-stretch: 25% 151%; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"), url("fonts/DMSans-Italic-VariableFont_opsz_wght.ttf") format("truetype"); font-weight: 100 1000; font-stretch: 25% 151%; font-style: italic; font-display: swap; } :root { /* ============================================================ PRIMARY TOKENS (the canonical names) ============================================================ */ /* Brand */ --color-primary: #2563EB; /* Blue. CTAs, links, active states, C/P section */ --color-teal: #0D9488; /* Teal. Streak, calm-success, B/B section */ --color-coral: #F97316; /* Coral. Streak/fire, burnout flag, P/S section */ --color-purple: #7C3AED; /* Purple. CARS section, occasional emphasis */ /* Neutrals */ --color-dark: #0F172A; /* Body text, sidebar bg, CTA section bg */ --color-mid: #475569; /* Secondary body text */ --color-muted: #94A3B8; /* Captions, labels, placeholder text */ --color-light: #F8FAFC; /* Page bg in app, alt section bg in marketing */ --color-white: #FFFFFF; --color-border: #E2E8F0; /* Default 1px line everywhere */ /* MCAT sections (locked) */ --color-cp: #2563EB; /* Chem / Physics - Blue */ --color-bb: #0D9488; /* Bio / Biochem - Teal */ --color-ps: #F97316; /* Psych / Soc - Coral */ --color-cars: #7C3AED; /* CARS - Purple */ /* Typography */ --font-heading: 'Bricolage Grotesque', sans-serif; --font-body: 'DM Sans', sans-serif; /* Radii */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; /* ============================================================ EXTENDED TOKENS (shades, tints, scales, semantic, motion) Build on the primary tokens above. All ASCII. ============================================================ */ /* Brand shades */ --color-primary-hover: #1D4ED8; --color-primary-deep: #1E40AF; --color-primary-mid: #BFDBFE; --color-primary-tint: #EFF6FF; --color-teal-deep: #0F766E; --color-teal-tint: #F0FDFA; --color-coral-tint: #FFF7ED; --color-purple-deep: #5B21B6; --color-purple-tint: #F5F3FF; --color-dark-2: #1E293B; /* MCAT section tints */ --color-cp-tint: #EFF6FF; --color-bb-tint: #F0FDFA; --color-ps-tint: #FFF7ED; --color-cars-tint: #F5F3FF; /* Slate scale */ --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B; --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: #0F172A; /* Semantic */ --color-success: #16A34A; --color-success-tint: #DCFCE7; --color-success-deep: #15803D; --color-warning: #F59E0B; --color-warning-tint: #FEF3C7; --color-warning-deep: #92400E; --color-danger: #DC2626; --color-danger-tint: #FEE2E2; --color-danger-deep: #B91C1C; /* Radii extras */ --radius-xs: 6px; --radius-pill: 100px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05); --shadow-lg: 0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06); --shadow-xl: 0 24px 64px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.07); --shadow-blue: 0 4px 20px rgba(37,99,235,0.30); --shadow-ring: 0 0 0 4px rgba(37,99,235,0.08); /* Spacing (4px base) */ --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; /* Motion (standard material easing - no bouncy springs) */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.15s; --dur-base: 0.25s; --dur-slow: 0.35s; /* ============================================================ LEGACY ALIASES Preserved so existing UI kits, preview cards, and JSX continue to work without churn. Prefer the --color-* tokens above for any new code. ============================================================ */ --blue: var(--color-primary); --blue-hover: var(--color-primary-hover); --blue-deep: var(--color-primary-deep); --blue-mid: var(--color-primary-mid); --blue-light: var(--color-primary-tint); --teal: var(--color-teal); --teal-dark: var(--color-teal-deep); --teal-light: var(--color-teal-tint); --coral: var(--color-coral); --coral-light: var(--color-coral-tint); --purple: var(--color-purple); --purple-deep: var(--color-purple-deep); --purple-light: var(--color-purple-tint); --dark: var(--color-dark); --dark-2: var(--color-dark-2); --mid: var(--color-mid); --muted: var(--color-muted); --light: var(--color-light); --white: var(--color-white); --border: var(--color-border); --success: var(--color-success); --success-light: var(--color-success-tint); --success-deep: var(--color-success-deep); --warning: var(--color-warning); --warning-light: var(--color-warning-tint); --warning-deep: var(--color-warning-deep); --danger: var(--color-danger); --danger-light: var(--color-danger-tint); --danger-deep: var(--color-danger-deep); --info: var(--color-primary); --sec-cp: var(--color-cp); --sec-cp-tint: var(--color-cp-tint); --sec-bb: var(--color-bb); --sec-bb-tint: var(--color-bb-tint); --sec-ps: var(--color-ps); --sec-ps-tint: var(--color-ps-tint); --sec-cars: var(--color-cars); --sec-cars-tint: var(--color-cars-tint); --font-display: var(--font-heading); --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* ============================================================ SEMANTIC TYPE STYLES Body default: DM Sans 400, 16px, line-height 1.6, slate-900. ============================================================ */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--color-dark); background: var(--color-white); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Headings: Bricolage Grotesque 800 */ .tsc-h1, .tsc-display-xl { font-family: var(--font-heading); font-weight: 800; font-size: clamp(42px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.02em; color: var(--color-dark); } .tsc-h2, .tsc-display-lg { font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-dark); } .tsc-h3 { font-family: var(--font-heading); font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-dark); } .tsc-h4 { font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-dark); } .tsc-h5 { font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--color-dark); } /* Body: DM Sans 400 / 500 */ .tsc-lead { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 1.65; color: var(--color-mid); } .tsc-body { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-mid); } .tsc-body-sm { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.6; color: var(--color-mid); } .tsc-caption { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1.4; color: var(--color-muted); } /* Eyebrows / labels (uppercase, tracked) */ .tsc-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .tsc-eyebrow-blue { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); } /* Numeric / metrics */ .tsc-metric { font-family: var(--font-heading); font-weight: 800; font-size: 52px; line-height: 1; letter-spacing: -0.02em; color: var(--color-dark); } .tsc-metric-sm { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 1; color: var(--color-dark); }