/* ============================================ NVA Course — Design Tokens OKLCH palette · Japanese-first typography ============================================ */ :root { /* ── Brand palette (indigo → violet → teal) ── */ --color-primary: oklch(54% 0.23 275); /* #4f46e5 indigo */ --color-primary-light: oklch(94% 0.04 275); --color-primary-dark: oklch(42% 0.2 275); --color-violet: oklch(55% 0.26 300); /* #7c3aed violet (mid-stop) */ --color-violet-light: oklch(94% 0.05 300); --color-accent: oklch(70% 0.14 180); /* #14b8a6 teal */ --color-accent-light: oklch(95% 0.04 180); --color-accent-dark: oklch(55% 0.13 180); /* Signature brand gradient — echoes the app icon */ --gradient-brand: linear-gradient(135deg, oklch(54% 0.23 275) 0%, oklch(55% 0.26 300) 55%, oklch(70% 0.14 180) 100%); --gradient-brand-soft: linear-gradient(135deg, oklch(96% 0.04 275) 0%, oklch(95% 0.05 300) 55%, oklch(95% 0.04 180) 100%); --gradient-hero: radial-gradient(ellipse at 18% 10%, oklch(96% 0.05 275) 0%, oklch(98% 0.02 300) 40%, oklch(99% 0.005 265) 75%); --color-surface: oklch(99% 0.003 265); --color-surface-raised: oklch(100% 0 0); --color-surface-sunken: oklch(97% 0.006 275); --color-surface-tinted: oklch(98% 0.015 285); --color-text: oklch(20% 0.02 275); --color-text-muted: oklch(50% 0.015 275); --color-text-soft: oklch(35% 0.018 275); --color-text-inverse: oklch(98% 0 0); --color-border: oklch(91% 0.012 275); --color-border-strong: oklch(82% 0.015 275); --color-border-brand: oklch(82% 0.06 275); /* aliases */ --color-bg: var(--color-surface); --color-surface-muted: var(--color-surface-sunken); --color-danger: oklch(58% 0.2 28); --color-warning: oklch(76% 0.17 75); --color-info: oklch(65% 0.14 230); --admin-accent: var(--color-accent); /* Callout palettes */ --color-tip-bg: oklch(97% 0.03 90); --color-tip-border: oklch(78% 0.14 90); --color-tip-icon: oklch(55% 0.18 85); --color-activity-bg: oklch(95% 0.03 250); --color-activity-border: oklch(58% 0.18 250); --color-pro-bg: oklch(96% 0.03 300); --color-pro-border: oklch(58% 0.16 300); --color-warn-bg: oklch(97% 0.03 30); --color-warn-border: oklch(58% 0.2 30); --color-def-bg: oklch(97% 0.005 265); --color-def-border: oklch(62% 0.01 265); --color-success-bg: oklch(95% 0.04 155); --color-success-border: oklch(50% 0.16 155); /* Typography */ --font-display: "Noto Sans JP", "Hiragino Sans", -apple-system, sans-serif; --font-body: "Noto Sans JP", "Hiragino Sans", -apple-system, sans-serif; --font-mono: "JetBrains Mono", "Source Code Pro", monospace; --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem); --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem); --text-base: clamp(0.95rem, 0.88rem + 0.35vw, 1.0625rem); --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 2.75rem); --text-hero: clamp(2.5rem, 1.8rem + 3.5vw, 4rem); --leading-tight: 1.3; --leading-normal: 1.7; --leading-loose: 1.9; --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 900; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-section: clamp(3rem, 2.5rem + 3vw, 6rem); /* Radii */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; /* Motion */ --duration-fast: 120ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1); --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* Elevation (subtle, layered) */ --shadow-xs: 0 1px 2px oklch(20% 0.02 275 / 0.05); --shadow-sm: 0 1px 2px oklch(20% 0.02 275 / 0.06), 0 2px 6px oklch(20% 0.02 275 / 0.05); --shadow-md: 0 4px 8px oklch(20% 0.02 275 / 0.06), 0 10px 24px oklch(20% 0.02 275 / 0.08); --shadow-lg: 0 12px 24px oklch(20% 0.02 275 / 0.08), 0 24px 48px oklch(20% 0.02 275 / 0.12); --shadow-brand: 0 10px 24px oklch(54% 0.23 275 / 0.22), 0 4px 10px oklch(54% 0.23 275 / 0.14); --shadow-ring: 0 0 0 1px var(--color-border), 0 1px 2px oklch(20% 0.02 275 / 0.05); /* Layout */ --sidebar-width: 18rem; --header-height: 3.75rem; --tabbar-height: 3.75rem; --content-max: 76rem; --reading-max: 42rem; /* iOS safe area */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* ── Dark mode ── */ @media (prefers-color-scheme: dark) { :root { --color-surface: oklch(15% 0.018 275); --color-surface-raised: oklch(19% 0.02 275); --color-surface-sunken: oklch(12% 0.016 275); --color-surface-tinted: oklch(22% 0.04 285); --color-text: oklch(94% 0.01 275); --color-text-muted: oklch(68% 0.015 275); --color-text-soft: oklch(80% 0.012 275); --color-border: oklch(30% 0.02 275); --color-border-strong: oklch(42% 0.025 275); --color-border-brand: oklch(55% 0.1 275); --color-primary-light: oklch(26% 0.1 275); --color-violet-light: oklch(27% 0.1 300); --color-accent-light: oklch(26% 0.06 180); --gradient-hero: radial-gradient(ellipse at 18% 10%, oklch(22% 0.08 275) 0%, oklch(18% 0.05 300) 40%, oklch(14% 0.02 275) 75%); --gradient-brand-soft: linear-gradient(135deg, oklch(25% 0.08 275) 0%, oklch(26% 0.08 300) 55%, oklch(24% 0.06 180) 100%); --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.3); --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.35), 0 2px 6px oklch(0% 0 0 / 0.3); --shadow-md: 0 4px 8px oklch(0% 0 0 / 0.4), 0 10px 24px oklch(0% 0 0 / 0.35); --shadow-lg: 0 12px 24px oklch(0% 0 0 / 0.45), 0 24px 48px oklch(0% 0 0 / 0.5); --shadow-brand: 0 10px 30px oklch(54% 0.23 275 / 0.45); --shadow-ring: 0 0 0 1px var(--color-border), 0 1px 2px oklch(0% 0 0 / 0.3); --color-tip-bg: oklch(22% 0.03 90); --color-activity-bg: oklch(20% 0.03 250); --color-pro-bg: oklch(20% 0.03 300); --color-warn-bg: oklch(22% 0.03 30); --color-def-bg: oklch(20% 0.005 265); --color-success-bg: oklch(20% 0.03 155); } }