/* StudyPass — Design Tokens v2.0 · 28 July 2026 · the restraint pass. Direction: quiet, spacious, square. Confidence comes from alignment, hairlines and whitespace — never from weight or size. Blue is an accent, not a surface. Nothing is rounded, anywhere. Primitives (brand colours) are fixed by the StudyPass Brand Guidelines. Everything else is ours to tune. Type: Manrope (display) + Inter (body) — both chosen for Mongolian Cyrillic coverage. See fonts.css. */ :root { color-scheme: light; /* ============================================================ 1. COLOUR — primitives (brand-fixed, do not edit here) ============================================================ */ --brand-blue: #1464FF; --brand-navy: #0A1E46; --brand-ink: #1C1C1C; --brand-white: #FFFFFF; --brand-sky: #DAEBFF; --brand-yellow: #FFE478; --brand-orange: #F78239; --brand-green: #4ECC97; --neutral-04: #F5F6F8; --neutral-08: #EBEDF0; --neutral-12: #E2E4E9; --neutral-20: #CED2DA; --neutral-32: #B1B7C4; --neutral-48: #8993A6; --neutral-62: #67748C; --neutral-78: #40506F; --neutral-90: #223458; /* ---------- Colour — semantic roles ---------- */ /* Surfaces */ --bg-canvas: var(--brand-white); --bg-raised: var(--brand-white); --bg-subtle: var(--neutral-04); --bg-muted: var(--neutral-08); --bg-accent: var(--brand-sky); /* sparingly — a tint, not a theme */ --bg-inverse: var(--brand-navy); --bg-brand: var(--brand-blue); --bg-disabled: var(--neutral-08); --bg-overlay: rgba(10, 30, 70, 0.55); /* Foreground */ --fg-default: var(--brand-ink); --fg-strong: var(--brand-navy); --fg-muted: var(--neutral-62); --fg-subtle: var(--neutral-48); --fg-placeholder: var(--neutral-48); --fg-disabled: var(--neutral-32); --fg-brand: var(--brand-blue); --fg-on-brand: var(--brand-white); --fg-on-dark: var(--brand-white); --fg-on-dark-muted:#A9C4EE; /* Edges — a hairline is the default. Anything heavier is a state. */ --edge-hair: var(--neutral-20); --edge-subtle: var(--neutral-12); --edge-strong: var(--brand-navy); --edge-brand: var(--brand-blue); --edge-error: var(--brand-orange); --edge-inverse: rgba(255, 255, 255, 0.22); /* Status — expressed as a rule or a mark, not a filled slab */ --status-pass: var(--brand-green); --status-warn: var(--brand-yellow); --status-alert: var(--brand-orange); --status-info: var(--brand-blue); /* Focus */ --focus-ring: var(--brand-blue); --focus-ring-dark: var(--brand-yellow); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ============================================================ 2. TYPE ============================================================ */ --font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Weight — the ceiling is 700. Nothing is black. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Size — fluid where it earns it, fixed where it must be predictable. Display sizes are deliberately smaller than v1; the page breathes instead of shouting. */ --text-display-1: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem); /* 44 → 72 */ --text-display-2: clamp(2.25rem, 1.5rem + 3.0vw, 3.375rem); /* 36 → 54 */ --text-display-3: clamp(1.875rem, 1.4rem + 1.9vw, 2.625rem);/* 30 → 42 */ --text-h1: 2rem; /* 32 */ --text-h2: 1.5rem; /* 24 */ --text-h3: 1.1875rem; /* 19 */ --text-h4: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-md: 1rem; /* 16 — body default */ --text-sm: 0.875rem; /* 14 */ --text-xs: 0.75rem; /* 12 */ --text-2xs: 0.6875rem; /* 11 — labels only */ /* Line height — generous. This is most of the "breathing room". */ --leading-tight: 1.05; --leading-snug: 1.18; --leading-heading: 1.3; --leading-body: 1.7; --leading-loose: 1.85; /* Letter spacing */ --tracking-mega: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-label: 0.12em; /* uppercase micro-labels */ /* ============================================================ 3. SPACE — 4px base, extended for wide vertical rhythm ============================================================ */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --space-11: 12rem; /* 192 */ /* Section rhythm — fluid, so mobile isn't cramped and desktop isn't tight */ --section-y: clamp(4rem, 2rem + 7vw, 8rem); --section-y-tight: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem); /* ============================================================ 4. SHAPE & LINE ============================================================ */ --radius: 0; /* the only radius that exists */ --border-hair: 1px; --border-medium: 2px; /* emphasis state only */ --border-heavy: 3px; /* rare: active tab, current step */ --shadow-none: none; /* One shadow exists, for genuinely floating layers (menu, modal). */ --shadow-overlay: 0 1px 2px rgba(10, 30, 70, 0.08), 0 12px 32px rgba(10, 30, 70, 0.12); /* ============================================================ 5. MOTION ============================================================ */ --duration-fast: 90ms; --duration-base: 150ms; --duration-slow: 240ms; --ease-default: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ============================================================ 6. SIZE & LAYOUT ============================================================ */ --container-max: 1200px; --container-wide: 1360px; --container-text: 720px; --measure-body: 68ch; --measure-read: 62ch; --control-sm: 36px; --control-md: 44px; /* default */ --control-lg: 52px; --touch-min: 44px; --nav-height: 72px; --sidebar-width: 248px; --grid-columns: 12; /* Breakpoints — reference values (media queries can't read vars) */ --bp-sm: 560px; --bp-md: 760px; --bp-lg: 1000px; --bp-xl: 1240px; /* ============================================================ 7. LAYERS ============================================================ */ --z-base: 0; --z-nav: 100; --z-sticky: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; } /* ============================================================== DARK THEME Applied via [data-theme="dark"] on . Navy is the canvas; blue lifts to stay legible on it. ============================================================== */ [data-theme='dark'] { color-scheme: dark; --bg-canvas: #061029; --bg-raised: #0A1E46; --bg-subtle: #0E2551; --bg-muted: #142E60; --bg-accent: #16305F; --bg-inverse: var(--brand-white); --bg-brand: #2C74FF; --bg-disabled: #16264A; --bg-overlay: rgba(3, 8, 20, 0.7); --fg-default: #EEF3FB; --fg-strong: var(--brand-white); --fg-muted: #A9C4EE; --fg-subtle: #7D97C4; --fg-placeholder: #7D97C4; --fg-disabled: #4A6291; --fg-brand: #7FAAFF; --fg-on-brand: var(--brand-white); --fg-on-dark: var(--brand-white); --fg-on-dark-muted: #A9C4EE; --edge-hair: rgba(255, 255, 255, 0.16); --edge-subtle: rgba(255, 255, 255, 0.10); --edge-strong: rgba(255, 255, 255, 0.72); --edge-brand: #2C74FF; --edge-inverse: rgba(10, 30, 70, 0.24); --focus-ring: var(--brand-yellow); --shadow-overlay: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; } }