/* Altiora Design System v2 — Notion-inspired
* Single source of truth for all design tokens.
* Import this before styles.css.
*/
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap');
/* Confident Editorial type (Bricolage Grotesque + Space Mono + Hanken Grotesk)
* is loaded via in the HTML — a is more reliable than an
* @import buried in CSS. Clash Display was dropped: Fontshare is not reliably
* reachable, whereas Google Fonts (Bricolage Grotesque) is. */
:root {
/* ── Base palette ──────────────────────────────────── */
--color-bg: #F6F7F9;
--color-surface: #FFFFFF;
--color-border: #DFE1E8;
--color-text-primary: #16151A;
--color-text-secondary: #52515A;
--color-text-tertiary: #8C8B96;
/* ── Category accent colours ───────────────────────── */
--color-cat-medicine: #E03E3E;
--color-cat-medicine-bg: #FBE4E4;
--color-cat-cs: #0F7DDB;
--color-cat-cs-bg: #E7F3FC;
--color-cat-engineering: #D9730D;
--color-cat-engineering-bg: #FAEEE0;
--color-cat-economics: #0F7957;
--color-cat-economics-bg: #E5F3EE;
--color-cat-law: #6940A5;
--color-cat-law-bg: #EEE8F5;
--color-cat-business: #AD1A72;
--color-cat-business-bg: #F5E0EE;
--color-cat-sciences: #2B6CB0;
--color-cat-sciences-bg: #E4EDF7;
--color-cat-mathematics: #E03E3E;
--color-cat-mathematics-bg: #FBE4E4;
--color-cat-psychology: #0F7957;
--color-cat-psychology-bg: #E5F3EE;
--color-cat-architecture: #D9730D;
--color-cat-architecture-bg: #FAEEE0;
/* ── Match state colours ────────────────────────────── */
--color-match-strong: #1F7A4D;
--color-match-strong-bg: #E3F5EC;
--color-match-possible: #8A6400;
--color-match-possible-bg: #FBF3DC;
--color-match-reach: #C0382A;
--color-match-reach-bg: #FCE6E3;
--color-match-grade: #52515A;
--color-match-grade-bg: #EEEEF2;
/* ── Typography ─────────────────────────────────────── */
--font-display: 'Lora', Georgia, serif;
--font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.875rem;
--text-display: 3.5rem;
--text-display-xl: 5.5rem;
/* ── 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;
/* ── Border radius ───────────────────────────────────── */
--radius-sm: 3px;
--radius-md: 5px;
--radius-lg: 8px;
--radius-full: 999px;
/* ── Motion ──────────────────────────────────────────── */
--t-fast: 100ms ease;
--t-base: 150ms ease;
/* ── Layout ──────────────────────────────────────────── */
--max-w: 1040px;
--pad: 32px;
/* ═══════════════════════════════════════════════════════════
* CONFIDENT EDITORIAL — new design language (v3).
* Anchored on the Check Combination course card; reuse these
* tokens to propagate the language to other screens later.
* ═══════════════════════════════════════════════════════════ */
/* Type roles */
--ce-font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; /* headings, course names */
--ce-font-mono: 'Space Mono', ui-monospace, monospace; /* labels, metadata, badges, buttons */
--ce-font-body: 'Hanken Grotesk', system-ui, sans-serif; /* descriptions, paragraphs */
/* Palette */
--ce-bg: #F5F4EF; /* warm off-white canvas */
--ce-surface: #FBFAF6; /* card fill, a touch lighter than bg */
--ce-ink: #1F1A17; /* warm near-black */
--ce-accent: #F2D64B; /* butter yellow — primary action / highlight */
--ce-ink-60: rgba(31,26,23,0.60); /* muted text */
--ce-ink-30: rgba(31,26,23,0.30); /* faint text / default accent */
--ce-hairline-color: rgba(31,26,23,0.12);
--ce-hairline: 1px solid var(--ce-hairline-color);
/* Named accent palette (structural colour on reading surfaces) */
--ce-coral: #E89B7D;
--ce-sage: #86C99A;
--ce-lavender: #B9A3D9;
/* Soft tints — gentle backgrounds for long-form reading, never saturated */
--ce-accent-tint: rgba(242,214,75,0.18);
--ce-coral-tint: rgba(232,155,125,0.14);
--ce-sage-tint: rgba(134,201,154,0.16);
--ce-lavender-tint: rgba(185,163,217,0.14);
--ce-reach-tint: rgba(178,70,50,0.09);
/* Category accents (muted — small accents only) */
--ce-cat-engineering: #E89B7D; /* coral — engineering / STEM */
--ce-cat-mathematics: #E89B7D;
--ce-cat-architecture: #E89B7D;
--ce-cat-cs: #B9A3D9; /* lavender — CS / tech */
--ce-cat-sciences: #86C99A; /* sage — sciences / med */
--ce-cat-medicine: #86C99A;
--ce-cat-psychology: #86C99A;
--ce-cat-economics: var(--ce-ink-30); /* economics / business / law — ink, no colour */
--ce-cat-business: var(--ce-ink-30);
--ce-cat-law: var(--ce-ink-30);
/* Match status — clean, intentional, legible on the warm bg (not neon) */
--ce-status-strong: #1E7A40; /* clear confident green */
--ce-status-possible: #9A6700; /* clean amber/gold (was murky ochre) */
--ce-status-reach: #B24632; /* clear clay / terracotta */
--ce-status-grade: #6B5E54; /* muted ink */
/* Radius — sharp editorial corners; pills for controls */
--ce-radius: 0px;
--ce-radius-pill: 999px;
/* ── Legacy aliases (keeps main.js inline styles working) ── */
--bg: var(--color-bg);
--surface: var(--color-surface);
--border: var(--color-border);
--text: var(--color-text-primary);
--text-muted: var(--color-text-secondary);
--text-faint: var(--color-text-tertiary);
--accent: var(--color-cat-cs);
--accent-light: var(--color-cat-cs-bg);
--accent-dark: #0B6BBF;
--font: var(--font-sans);
--radius: var(--radius-md);
--radius-lg: var(--radius-lg);
--t: var(--t-base);
}