/* ============================================================================ HeyUniversity — Design Tokens ---------------------------------------------------------------------------- Single source of truth for the brand's visual language. Everything here is a CSS custom property so it can be tweaked in one place (or live-overridden by the playground panel). Layer 1 — RAW SCALES : the full palette / type scale / spacing ramp. Layer 2 — SEMANTIC : meaningful names components actually reference. Re-theme by remapping these, not by editing components. Direction: elegant & premium edtech. White + red + warm grey. Libre Baskerville serif headings + Source Sans 3 body. ============================================================================ */ :root { /* ------------------------------------------------------------------------ LAYER 1 — RAW COLOR SCALES ------------------------------------------------------------------------ */ /* Brand red — a refined, collegiate crimson (not fire-engine). */ --red-50: #fdf2f2; --red-100: #fbe0e0; --red-200: #f5bcbc; --red-300: #ec9090; --red-400: #de5d5d; --red-500: #c62f2f; --red-600: #b31b1b; /* primary accent */ --red-700: #931717; --red-800: #741414; --red-900: #571414; /* Warm neutrals — subtle warmth reads more "premium" than cold blue-grey. */ --white: #ffffff; --grey-50: #faf9f7; /* page background */ --grey-100: #f3f1ee; --grey-200: #e7e3dd; --grey-300: #d5cfc6; --grey-400: #a8a096; --grey-500: #7c746a; --grey-600: #5b544c; --grey-700: #403b35; --grey-800: #2a2621; --grey-900: #1a1714; /* near-black text */ /* ------------------------------------------------------------------------ LAYER 1 — TYPOGRAPHY PRIMITIVES ------------------------------------------------------------------------ */ /* Editorial serif headings paired with a clean humanist sans body — loaded as web fonts (see the tags in each page's ). Fallback stacks kick in before the web fonts finish loading or if they fail. */ --font-heading: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'SF Mono', 'Menlo', 'Consolas', monospace; /* Base drives the whole modular scale (1.250 — major third). */ --font-size-base: 18px; --text-xs: 0.694rem; --text-sm: 0.833rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.563rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem; --text-4xl: 3.052rem; --text-5xl: 3.815rem; --text-6xl: 4.768rem; --weight-regular: 400; --weight-medium: 500; /* Times has no true medium; used as a hook */ --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.8; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.12em; /* for small uppercase eyebrows/labels */ /* ------------------------------------------------------------------------ LAYER 1 — SPACING SCALE (8px rhythm, with fine steps at the bottom) ------------------------------------------------------------------------ */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 5rem; --space-16: 8rem; /* ------------------------------------------------------------------------ LAYER 1 — RADII, BORDERS, SHADOWS, MOTION ------------------------------------------------------------------------ */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; /* restrained rounding = premium */ --radius-lg: 8px; --radius-pill: 999px; --border-hairline: 1px; --border-thick: 2px; /* Soft, low-opacity shadows — quiet elevation. */ --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.06); --shadow-md: 0 4px 16px rgba(26, 23, 20, 0.08); --shadow-lg: 0 12px 40px rgba(26, 23, 20, 0.12); --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration: 220ms; --duration-slow: 400ms; /* ------------------------------------------------------------------------ LAYER 1 — LAYOUT ------------------------------------------------------------------------ */ --container-narrow: 720px; /* reading measure */ --container: 1120px; /* standard content width */ --container-wide: 1320px; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; /* ------------------------------------------------------------------------ LAYER 2 — SEMANTIC TOKENS (components reference THESE) ------------------------------------------------------------------------ */ /* Surfaces & text */ --color-bg: var(--grey-50); --color-surface: var(--white); --color-surface-alt: var(--grey-100); --color-text: var(--grey-900); --color-text-muted: var(--grey-500); --color-text-subtle: var(--grey-400); --color-border: var(--grey-200); --color-border-strong: var(--grey-300); /* Accent (the red) */ --color-accent: var(--red-600); --color-accent-hover: var(--red-700); --color-accent-active: var(--red-800); --color-accent-soft: var(--red-50); --color-on-accent: var(--white); /* Links */ --color-link: var(--red-700); --color-link-hover: var(--red-900); /* Focus ring */ --color-focus: var(--red-400); /* ------------------------------------------------------------------------ LAYER 2 — COMPONENT-FACING SEMANTIC SIZES ------------------------------------------------------------------------ */ --page-max: var(--container); --heading-font: var(--font-heading); --body-font: var(--font-body); --radius-ui: var(--radius-md); --shadow-card: var(--shadow-md); --focus-ring: 0 0 0 3px var(--color-focus); }