/* Design System Tokens — Japanese-One * * Single source of truth for color, spacing, radius, shadow, typography, z-index. * All new code MUST use --ds-* tokens. Legacy variables (--primary, --student-primary, * --teacher-primary, --primary-color, --auth-primary, --brand-primary) are kept during * migration and will be removed after stage 5. * * Role-specific primary color is injected by themes.css via [data-role="..."] selector * on . Default role is "student". */ :root { /* ── Color · Neutral semantic ────────────────────────────────────── */ --ds-color-bg: #f8faff; --ds-color-surface: #fff; --ds-color-surface-alt: #f8f9fa; --ds-color-border: #e9ecef; --ds-color-border-strong: #ced4da; --ds-color-text: #212529; --ds-color-text-muted: #6c757d; --ds-color-text-on-primary: #fff; --ds-color-overlay: rgb(0 0 0 / 50%); --ds-color-focus-ring: rgb(102 126 234 / 40%); --ds-color-shadow: rgb(0 0 0 / 8%); /* ── Color · Neutral scale (Tailwind-aligned slate) ─────────────── */ /* 10-stop greyscale used across modules for borders, dividers, mute text */ --ds-color-neutral-50: #f8fafc; --ds-color-neutral-100: #f1f5f9; --ds-color-neutral-200: #e2e8f0; --ds-color-neutral-300: #cbd5e1; --ds-color-neutral-400: #94a3b8; --ds-color-neutral-500: #64748b; --ds-color-neutral-600: #475569; --ds-color-neutral-700: #334155; --ds-color-neutral-800: #1e293b; --ds-color-neutral-900: #0f172a; /* ── Color · Semantic (success / warning / danger / info) ──────── */ --ds-color-success-50: #e6f7f1; --ds-color-success-500: #1cc88a; --ds-color-success-700: #169b6b; --ds-color-warning-50: #fef3cd; --ds-color-warning-500: #f59e0b; --ds-color-warning-700: #c47b08; --ds-color-danger-50: #fdecea; --ds-color-danger-500: #e74a3b; --ds-color-danger-700: #b53528; --ds-color-info-50: #e1f5f7; --ds-color-info-500: #36b9cc; --ds-color-info-700: #258a99; /* ── Color · Accent palette ────────────────────────────────────── * Generic accent colors used across modules for visual emphasis, * progress rings, status badges, or feature icons. Each accent has * 3 stops (50 = tint, 500 = base, 700 = strong). Module-specific * one-off colors should stay as private `---` vars * in their own file (see docs/ui/tokens-guide.md). */ --ds-color-accent-purple-50: #f3eefe; --ds-color-accent-purple-500: #8b5cf6; --ds-color-accent-purple-700: #6d28d9; --ds-color-accent-blue-50: #eff6ff; --ds-color-accent-blue-500: #3b82f6; --ds-color-accent-blue-700: #1d4ed8; --ds-color-accent-green-50: #ecfdf5; --ds-color-accent-green-500: #10b981; --ds-color-accent-green-700: #047857; --ds-color-accent-orange-50: #fff7ed; --ds-color-accent-orange-500: #f97316; --ds-color-accent-orange-700: #c2410c; --ds-color-accent-pink-50: #fdf2f8; --ds-color-accent-pink-500: #ec4899; --ds-color-accent-pink-700: #be185d; --ds-color-accent-indigo-500: #6366f1; --ds-color-accent-indigo-700: #4338ca; /* Accent · Sky / Cyan / Teal (cool tones used in listening / analytics) */ --ds-color-accent-sky-50: #e0f2fe; --ds-color-accent-sky-500: #0ea5e9; --ds-color-accent-sky-700: #0369a1; --ds-color-accent-cyan-500: #06b6d4; --ds-color-accent-cyan-700: #0891b2; --ds-color-accent-teal-500: #14b8a6; --ds-color-accent-teal-700: #0d9488; /* Deep brand secondary (paired with primary in many gradients) */ --ds-color-primary-deep: #764ba2; /* Bootstrap-compatible aliases (legacy CSS uses these directly) */ --ds-color-bs-success-500: #28a745; --ds-color-bs-success-700: #198754; --ds-color-bs-danger-500: #dc3545; --ds-color-bs-warning-500: #ffc107; --ds-color-bs-warning-700: #f59e0b; /* Dark neutrals (snake/dark-mode pages) */ --ds-color-neutral-950: #1a1a1a; --ds-color-neutral-925: #2c2c2e; --ds-color-neutral-875: #3a3a3c; --ds-color-neutral-darknav: #1a1a2e; /* ── Color · Role primary (defaults to student; overridden by themes.css) ── */ --ds-color-primary: #667eea; --ds-color-primary-hover: #5a67d8; --ds-color-primary-subtle: rgb(102 126 234 / 8%); --ds-color-primary-gradient-from: #667eea; --ds-color-primary-gradient-to: #7c3aed; /* ── Spacing (4px base) ────────────────────────────────────────── */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-12: 48px; /* ── Radius ────────────────────────────────────────────────────── */ --ds-radius-xs: 4px; --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 14px; --ds-radius-xl: 20px; --ds-radius-pill: 9999px; /* ── Shadow ────────────────────────────────────────────────────── */ --ds-shadow-xs: 0 1px 2px rgb(0 0 0 / 4%); --ds-shadow-sm: 0 2px 8px rgb(0 0 0 / 8%); --ds-shadow-md: 0 4px 12px rgb(0 0 0 / 12%); --ds-shadow-lg: 0 12px 32px rgb(0 0 0 / 16%); /* ── Typography · Font size (rem only) ─────────────────────────── */ --ds-text-xs: 0.75rem; /* 12px */ --ds-text-sm: 0.875rem; /* 14px */ --ds-text-md: 1rem; /* 16px */ --ds-text-lg: 1.125rem; /* 18px */ --ds-text-xl: 1.25rem; /* 20px */ --ds-text-2xl: 1.5rem; /* 24px */ --ds-text-3xl: 1.875rem; /* 30px */ /* ── Typography · Weight ───────────────────────────────────────── */ --ds-font-regular: 400; --ds-font-medium: 500; --ds-font-semibold: 600; --ds-font-bold: 700; /* ── Typography · Line height ──────────────────────────────────── */ --ds-leading-tight: 1.25; --ds-leading-normal: 1.5; --ds-leading-relaxed: 1.75; /* ── z-index ───────────────────────────────────────────────────── */ --ds-z-base: 1; --ds-z-dropdown: 100; --ds-z-sticky: 500; --ds-z-overlay: 1000; --ds-z-modal: 1100; --ds-z-toast: 1200; /* ── Transition ────────────────────────────────────────────────── */ --ds-transition-fast: 0.2s ease; --ds-transition-normal: 0.3s ease; /* ── Viewport helper (iOS keyboard fix) ────────────────────────── */ --ds-vh-full: 100dvh; /* ── Typography · Font size px scale (legacy bridge) ─────────────── * For legacy CSS that uses px values; map to closest rem token. * Prefer --ds-text-* for new code. */ --ds-text-px-10: 0.625rem; /* 10px */ --ds-text-px-11: 0.6875rem; /* 11px */ --ds-text-px-12: 0.75rem; /* 12px = --ds-text-xs */ --ds-text-px-13: 0.8125rem; /* 13px */ --ds-text-px-14: 0.875rem; /* 14px = --ds-text-sm */ --ds-text-px-16: 1rem; /* 16px = --ds-text-md */ --ds-text-px-18: 1.125rem; /* 18px = --ds-text-lg */ }