/* ============================================================================
SnappyCards Design System — Tokens
============================================================================
Source of truth for every UI value: colors, typography, spacing, radii,
shadows, motion. All page styles consume these via CSS custom properties.
Rules:
- NO gradients (per 2026-05-13 design directive)
- Solid brand color: --color-primary-600 (#7c3aed)
- Slate neutrals + Violet brand
- Inter typography
- 4-base spacing scale
- Subtle layered shadows (no harsh drop shadows)
Use:
See: design-system/README.md
========================================================================== */
:root {
/* ─── Brand color (Violet scale) ─────────────────────────────── */
--color-primary-50: #f5f3ff;
--color-primary-100: #ede9fe;
--color-primary-200: #ddd6fe;
--color-primary-300: #c4b5fd;
--color-primary-400: #a78bfa;
--color-primary-500: #8b5cf6;
--color-primary-600: #7c3aed; /* default brand */
--color-primary-700: #6d28d9; /* hover */
--color-primary-800: #5b21b6;
--color-primary-900: #4c1d95;
/* ─── Neutrals (Slate scale) ─────────────────────────────────── */
--color-neutral-0: #ffffff;
--color-neutral-50: #f8fafc;
--color-neutral-100: #f1f5f9;
--color-neutral-200: #e2e8f0;
--color-neutral-300: #cbd5e1;
--color-neutral-400: #94a3b8;
--color-neutral-500: #64748b;
--color-neutral-600: #475569;
--color-neutral-700: #334155;
--color-neutral-800: #1e293b;
--color-neutral-900: #0f172a;
/* ─── Semantic colors ────────────────────────────────────────── */
--color-success-50: #ecfdf5;
--color-success-500: #10b981;
--color-success-600: #059669;
--color-success-700: #047857;
--color-warning-50: #fffbeb;
--color-warning-500: #f59e0b;
--color-warning-600: #d97706;
--color-warning-700: #b45309;
--color-danger-50: #fff1f2;
--color-danger-500: #f43f5e;
--color-danger-600: #e11d48;
--color-danger-700: #be123c;
--color-info-50: #f0f9ff;
--color-info-500: #0ea5e9;
--color-info-600: #0284c7;
--color-info-700: #0369a1;
/* ─── Surface aliases (light theme default) ──────────────────── */
--surface-page: var(--color-neutral-50); /* page background */
--surface-elevated: var(--color-neutral-0); /* card / modal bg */
--surface-subtle: var(--color-neutral-100); /* hover state, dividers */
--surface-overlay: rgba(15, 23, 42, 0.5); /* modal backdrop */
/* ─── Text aliases ───────────────────────────────────────────── */
--text-strong: var(--color-neutral-900); /* h1 / hero */
--text-default: var(--color-neutral-800); /* body */
--text-muted: var(--color-neutral-500); /* secondary */
--text-faint: var(--color-neutral-400); /* placeholders */
--text-inverted: var(--color-neutral-0); /* on primary bg */
--text-link: var(--color-primary-600);
--text-link-hover: var(--color-primary-700);
/* ─── Borders ────────────────────────────────────────────────── */
--border-default: var(--color-neutral-200);
--border-strong: var(--color-neutral-300);
--border-focus: var(--color-primary-600);
/* ─── Typography ─────────────────────────────────────────────── */
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-family-mono: ui-monospace, 'SF Mono', 'Cascadia Code',
'Roboto Mono', Menlo, Consolas, monospace;
/* Type scale (clamp() optional later for fluid) */
--font-size-xs: 12px;
--font-size-sm: 13px;
--font-size-base: 14px;
--font-size-md: 15px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 20px;
--font-size-3xl: 24px;
--font-size-4xl: 30px;
--font-size-5xl: 36px;
--font-size-6xl: 48px;
--line-height-tight: 1.2;
--line-height-snug: 1.35;
--line-height-normal: 1.5;
--line-height-relaxed: 1.65;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--letter-spacing-tight: -0.02em;
--letter-spacing-snug: -0.01em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.04em;
--letter-spacing-wider: 0.08em;
/* ─── Spacing scale (4px base) ───────────────────────────────── */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ─── Border radius ──────────────────────────────────────────── */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-3xl: 20px;
--radius-full: 9999px;
/* ─── Shadows (soft, layered — no harsh drops) ───────────────── */
--shadow-xs: 0 1px 2px rgb(15 23 42 / 0.04);
--shadow-sm: 0 2px 4px rgb(15 23 42 / 0.05), 0 1px 2px rgb(15 23 42 / 0.03);
--shadow-md: 0 4px 8px rgb(15 23 42 / 0.06), 0 2px 4px rgb(15 23 42 / 0.04);
--shadow-lg: 0 10px 20px rgb(15 23 42 / 0.08), 0 4px 8px rgb(15 23 42 / 0.05);
--shadow-xl: 0 20px 40px rgb(15 23 42 / 0.10), 0 8px 16px rgb(15 23 42 / 0.06);
--shadow-focus: 0 0 0 3px rgb(124 58 237 / 0.15);
--shadow-danger-focus: 0 0 0 3px rgb(225 29 72 / 0.15);
/* ─── Motion ─────────────────────────────────────────────────── */
--duration-fast: 100ms;
--duration-base: 150ms;
--duration-slow: 250ms;
--easing-standard: cubic-bezier(0.2, 0, 0, 1);
--easing-emphasize: cubic-bezier(0.3, 0, 0.1, 1);
/* ─── Layout ─────────────────────────────────────────────────── */
--container-narrow: 640px;
--container-base: 960px;
--container-wide: 1200px;
--container-full: 100%;
--z-base: 1;
--z-dropdown: 50;
--z-sticky: 100;
--z-modal: 1000;
--z-toast: 1100;
}
/* ─── Dark theme override (toggle via data-theme="dark" on ) ─ */
:root[data-theme="dark"] {
--surface-page: var(--color-neutral-900);
--surface-elevated: var(--color-neutral-800);
--surface-subtle: var(--color-neutral-700);
--surface-overlay: rgba(0, 0, 0, 0.6);
--text-strong: var(--color-neutral-0);
--text-default: var(--color-neutral-100);
--text-muted: var(--color-neutral-400);
--text-faint: var(--color-neutral-500);
--text-inverted: var(--color-neutral-900);
--text-link: var(--color-primary-400);
--text-link-hover: var(--color-primary-300);
--border-default: var(--color-neutral-700);
--border-strong: var(--color-neutral-600);
--shadow-xs: 0 1px 2px rgb(0 0 0 / 0.20);
--shadow-sm: 0 2px 4px rgb(0 0 0 / 0.25), 0 1px 2px rgb(0 0 0 / 0.15);
--shadow-md: 0 4px 8px rgb(0 0 0 / 0.30), 0 2px 4px rgb(0 0 0 / 0.20);
--shadow-lg: 0 10px 20px rgb(0 0 0 / 0.40), 0 4px 8px rgb(0 0 0 / 0.25);
--shadow-xl: 0 20px 40px rgb(0 0 0 / 0.50), 0 8px 16px rgb(0 0 0 / 0.30);
}
/* ============================================================================
Legacy alias tokens — themes.css compatibility (added Phase 6d.1, 2026-05-15)
============================================================================
The 19 variables below were originally defined in styles/themes.css. They
continue to be consumed by admin/student/teacher dashboards (36+ var()
calls). We preserve them here verbatim so that removing the themes.css
link in Phase 6d.2 produces zero visual diff on admin and teacher (the
2/3 majority rendering), and resolves the latent cascade bug on
student-dashboard (which was silently rendering tokens.css values for
the 5 collision tokens because of inverted load order).
Policy decisions (Phase 6c):
• --primary aliases to design-system --color-primary-600 (violet, the
post-2026-05-13 brand color), overriding the legacy themes.css blue
(#2563eb). The 3 dashboards use --primary 0 times so this brand-fix
has zero immediate visual impact; future JS-injected CSS that uses
var(--primary) will receive the correct brand color.
• The 5 naming-collision tokens (--text-strong, --border-strong,
--shadow-sm/md/lg) preserve themes.css values to match what admin
and teacher currently render. student-dashboard will shift to match.
• Shadow tokens here are raw rgba() alpha values (consumed inline in
component box-shadow declarations), NOT full box-shadow specs as in
design-system above (--shadow-sm: 0 2px 4px rgb(...), ...). They are
semantically incompatible with the design-system shadow tokens and
deliberately NOT aliased — preserved as-is.
Where the themes.css value exactly equals a design-system token, we
alias via var() for semantic linkage. Where the values diverge, we
inline the raw themes.css value to keep zero diff. Each line below
notes which case applies.
========================================================================== */
:root {
/* Surfaces */
--bg: var(--color-neutral-0); /* #ffffff — exact match */
--fg: #1f2937; /* no design-system equivalent */
--card-bg: #f9fafb; /* no exact match */
--bg-subtle: #f3f4f6; /* no exact match */
--bg-input: rgba(255, 255, 255, 0.9); /* GAP: no transparent surface */
--bg-input-focus: rgba(255, 255, 255, 0.95); /* GAP */
/* Brand (Policy 1: violet, overrides legacy themes.css blue) */
--primary: var(--color-primary-600); /* was #2563eb in themes.css */
/* Borders */
--border: #e5e7eb; /* no exact match */
--border-subtle: var(--color-neutral-200); /* #e2e8f0 — exact match */
--border-strong: #d1d5db; /* COLLISION: themes.css value wins */
/* Text */
--muted: #6b7280; /* no exact match */
--text-strong: #1a202c; /* COLLISION: themes.css value wins */
--text-secondary: #374151; /* no exact match */
--text-tertiary: var(--color-neutral-500); /* #64748b — exact match */
--text-disabled: #9ca3af; /* no exact match */
/* Shadows — raw alpha values, NOT design-system box-shadow specs */
--shadow-sm: rgba(0, 0, 0, 0.10); /* COLLISION + incompatible */
--shadow-md: rgba(0, 0, 0, 0.15); /* COLLISION + incompatible */
--shadow-lg: rgba(0, 0, 0, 0.25); /* COLLISION + incompatible */
/* Overlay */
--overlay: rgba(0, 0, 0, 0.5); /* differs from --surface-overlay */
}
:root[data-theme="dark"] {
/* Surfaces */
--bg: var(--color-neutral-900); /* #0f172a — exact match */
--fg: var(--color-neutral-100); /* #f1f5f9 — exact match */
--card-bg: var(--color-neutral-800); /* #1e293b — exact match */
--bg-subtle: #111827; /* GAP: no exact match */
--bg-input: rgba(30, 41, 59, 0.9); /* GAP */
--bg-input-focus: rgba(30, 41, 59, 0.95); /* GAP */
/* Brand (constant across modes per Policy 1) */
--primary: var(--color-primary-600);
/* Borders */
--border: var(--color-neutral-700); /* #334155 — exact match */
--border-subtle: var(--color-neutral-700); /* #334155 — exact match */
--border-strong: var(--color-neutral-600); /* #475569 — exact match (COLLISION) */
/* Text */
--muted: var(--color-neutral-400); /* #94a3b8 — exact match */
--text-strong: var(--color-neutral-50); /* #f8fafc — exact match (COLLISION) */
--text-secondary: var(--color-neutral-300); /* #cbd5e1 — exact match */
--text-tertiary: var(--color-neutral-400); /* #94a3b8 — exact match */
--text-disabled: var(--color-neutral-500); /* #64748b — exact match */
/* Shadows — raw alpha values */
--shadow-sm: rgba(0, 0, 0, 0.40);
--shadow-md: rgba(0, 0, 0, 0.55);
--shadow-lg: rgba(0, 0, 0, 0.70);
/* Overlay */
--overlay: rgba(0, 0, 0, 0.70);
}
/* System mode follows OS preference: light values inherited from :root,
dark values applied only when the OS reports prefers-color-scheme: dark.
Mirrors the themes.css structure exactly. */
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] {
--bg: var(--color-neutral-900);
--fg: var(--color-neutral-100);
--card-bg: var(--color-neutral-800);
--bg-subtle: #111827;
--bg-input: rgba(30, 41, 59, 0.9);
--bg-input-focus: rgba(30, 41, 59, 0.95);
--primary: var(--color-primary-600);
--border: var(--color-neutral-700);
--border-subtle: var(--color-neutral-700);
--border-strong: var(--color-neutral-600);
--muted: var(--color-neutral-400);
--text-strong: var(--color-neutral-50);
--text-secondary: var(--color-neutral-300);
--text-tertiary: var(--color-neutral-400);
--text-disabled: var(--color-neutral-500);
--shadow-sm: rgba(0, 0, 0, 0.40);
--shadow-md: rgba(0, 0, 0, 0.55);
--shadow-lg: rgba(0, 0, 0, 0.70);
--overlay: rgba(0, 0, 0, 0.70);
}
}
/* Smooth theme transitions — preserved from themes.css so that removing
the themes.css link in Phase 6d.2 does not change the theme-toggle UX
from animated to instant. */
html, body {
transition: background-color 200ms ease, color 200ms ease;
}
/* ─── Base reset + typography defaults ───────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
}
html {
/* Always have system colors on the html element so Lighthouse contrast
checks see them even before page styles load. */
background: var(--surface-page);
color: var(--text-default);
}
body {
margin: 0;
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
color: var(--text-default);
background: var(--surface-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
color: var(--text-strong);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-snug);
}
h1 {
font-size: var(--font-size-4xl);
letter-spacing: var(--letter-spacing-tight);
}
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); }
h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
h5 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
p {
margin: 0 0 var(--space-3);
color: var(--text-default);
}
a {
color: var(--text-link);
text-decoration: none;
transition: color var(--duration-base) var(--easing-standard);
}
a:hover {
color: var(--text-link-hover);
text-decoration: underline;
}
::placeholder {
color: var(--text-faint);
}
:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
}
/* Utility helpers — sparingly used; prefer components.css */
.text-muted { color: var(--text-muted); }
.text-strong { color: var(--text-strong); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-mono { font-family: var(--font-family-mono); }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}