/* ============================================================ EIA Design Tokens — Phase 1 Foundation ------------------------------------------------------------ Variants : A (Linear-warm orange, default) / B (Editorial terracotta) Themes : light / dark — prefers-color-scheme + manual override Toggle : ============================================================ */ :root { /* -------- spacing (4 / 8 / 16 / 24 / 32 / 48 / 64) -------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; /* -------- radius -------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* -------- type stack -------- System fallback today; swap in self-hosted Inter + Noto Sans JP via @font-face at deploy. The variable names stay the same. */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Hiragino Kaku Gothic ProN", monospace; /* -------- type scale -------- */ --fs-h1: clamp(30px, 3.4vw, 42px); --fs-h2: clamp(22px, 2.4vw, 28px); --fs-h3: 18px; --fs-body-lg: 17px; --fs-body: 15px; --fs-caption: 13px; --fs-micro: 12px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.65; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-label: 0.04em; /* -------- timing -------- */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms; --dur: 180ms; /* -------- elevation (rings + whisper shadows) -------- */ --sh-1: 0 0 0 1px var(--c-border); --sh-2: 0 1px 2px rgba(15, 12, 10, 0.04), 0 0 0 1px var(--c-border); --sh-3: 0 8px 24px -10px rgba(15, 12, 10, 0.12), 0 0 0 1px var(--c-border); --sh-focus: 0 0 0 3px var(--c-focus-ring); /* -------- status (variant-agnostic) -------- */ --c-success: oklch(58% 0.13 150); --c-success-soft: oklch(94% 0.05 150); --c-warning: oklch(70% 0.13 75); --c-warning-soft: oklch(95% 0.06 80); --c-error: oklch(56% 0.18 25); --c-error-soft: oklch(96% 0.04 30); /* ====== Variant A — Linear-warm orange (default) — Light ====== */ --c-bg: oklch(99% 0.003 80); --c-surface: oklch(100% 0 0); --c-surface-2: oklch(97.5% 0.005 80); --c-surface-elev: oklch(100% 0 0); --c-border: oklch(92% 0.006 80); --c-border-strong: oklch(86% 0.008 80); --c-fg: oklch(20% 0.012 60); --c-fg-muted: oklch(50% 0.012 60); --c-fg-subtle: oklch(68% 0.01 60); --c-fg-inverse: oklch(99% 0.005 80); --c-accent: oklch(64% 0.18 48); --c-accent-hover: oklch(58% 0.19 46); --c-accent-fg: oklch(99% 0.005 80); --c-accent-soft: oklch(95% 0.05 60); --c-accent-soft-fg: oklch(40% 0.14 45); --c-focus-ring: oklch(64% 0.18 48 / 0.32); } /* ====== Variant A — Dark ====== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-variant="B"]) { --c-bg: oklch(15% 0.01 60); --c-surface: oklch(19% 0.012 60); --c-surface-2: oklch(22% 0.012 60); --c-surface-elev: oklch(24% 0.014 60); --c-border: oklch(28% 0.012 60); --c-border-strong: oklch(34% 0.012 60); --c-fg: oklch(96% 0.005 60); --c-fg-muted: oklch(70% 0.012 60); --c-fg-subtle: oklch(52% 0.012 60); --c-fg-inverse: oklch(15% 0.01 60); --c-accent: oklch(72% 0.16 50); --c-accent-hover: oklch(78% 0.15 52); --c-accent-fg: oklch(15% 0.01 60); --c-accent-soft: oklch(28% 0.05 50); --c-accent-soft-fg: oklch(82% 0.13 55); --c-focus-ring: oklch(72% 0.16 50 / 0.4); --c-success-soft: oklch(28% 0.05 150); --c-warning-soft: oklch(28% 0.05 80); --c-error-soft: oklch(28% 0.06 30); } } :root[data-theme="dark"]:not([data-variant="B"]) { --c-bg: oklch(15% 0.01 60); --c-surface: oklch(19% 0.012 60); --c-surface-2: oklch(22% 0.012 60); --c-surface-elev: oklch(24% 0.014 60); --c-border: oklch(28% 0.012 60); --c-border-strong: oklch(34% 0.012 60); --c-fg: oklch(96% 0.005 60); --c-fg-muted: oklch(70% 0.012 60); --c-fg-subtle: oklch(52% 0.012 60); --c-fg-inverse: oklch(15% 0.01 60); --c-accent: oklch(72% 0.16 50); --c-accent-hover: oklch(78% 0.15 52); --c-accent-fg: oklch(15% 0.01 60); --c-accent-soft: oklch(28% 0.05 50); --c-accent-soft-fg: oklch(82% 0.13 55); --c-focus-ring: oklch(72% 0.16 50 / 0.4); --c-success-soft: oklch(28% 0.05 150); --c-warning-soft: oklch(28% 0.05 80); --c-error-soft: oklch(28% 0.06 30); } /* ====== Variant B — Editorial terracotta — Light ====== */ :root[data-variant="B"] { --c-bg: oklch(98% 0.012 70); --c-surface: oklch(99.5% 0.006 70); --c-surface-2: oklch(96% 0.012 70); --c-surface-elev: oklch(100% 0 0); --c-border: oklch(90% 0.012 70); --c-border-strong: oklch(82% 0.014 70); --c-fg: oklch(22% 0.02 50); --c-fg-muted: oklch(48% 0.016 50); --c-fg-subtle: oklch(66% 0.012 50); --c-fg-inverse: oklch(98% 0.012 70); --c-accent: oklch(56% 0.14 32); --c-accent-hover: oklch(50% 0.15 30); --c-accent-fg: oklch(98% 0.012 70); --c-accent-soft: oklch(94% 0.045 50); --c-accent-soft-fg: oklch(38% 0.13 35); --c-focus-ring: oklch(56% 0.14 32 / 0.32); } /* ====== Variant B — Dark ====== */ @media (prefers-color-scheme: dark) { :root[data-variant="B"]:not([data-theme="light"]) { --c-bg: oklch(17% 0.018 50); --c-surface: oklch(21% 0.02 50); --c-surface-2: oklch(25% 0.02 50); --c-surface-elev: oklch(28% 0.022 50); --c-border: oklch(30% 0.018 50); --c-border-strong: oklch(36% 0.018 50); --c-fg: oklch(95% 0.008 70); --c-fg-muted: oklch(68% 0.014 60); --c-fg-subtle: oklch(50% 0.014 60); --c-fg-inverse: oklch(17% 0.018 50); --c-accent: oklch(66% 0.13 30); --c-accent-hover: oklch(72% 0.13 32); --c-accent-fg: oklch(15% 0.018 50); --c-accent-soft: oklch(30% 0.05 40); --c-accent-soft-fg: oklch(80% 0.12 35); --c-focus-ring: oklch(66% 0.13 30 / 0.4); --c-success-soft: oklch(28% 0.05 150); --c-warning-soft: oklch(28% 0.05 80); --c-error-soft: oklch(28% 0.06 30); } } :root[data-variant="B"][data-theme="dark"] { --c-bg: oklch(17% 0.018 50); --c-surface: oklch(21% 0.02 50); --c-surface-2: oklch(25% 0.02 50); --c-surface-elev: oklch(28% 0.022 50); --c-border: oklch(30% 0.018 50); --c-border-strong: oklch(36% 0.018 50); --c-fg: oklch(95% 0.008 70); --c-fg-muted: oklch(68% 0.014 60); --c-fg-subtle: oklch(50% 0.014 60); --c-fg-inverse: oklch(17% 0.018 50); --c-accent: oklch(66% 0.13 30); --c-accent-hover: oklch(72% 0.13 32); --c-accent-fg: oklch(15% 0.018 50); --c-accent-soft: oklch(30% 0.05 40); --c-accent-soft-fg: oklch(80% 0.12 35); --c-focus-ring: oklch(66% 0.13 30 / 0.4); --c-success-soft: oklch(28% 0.05 150); --c-warning-soft: oklch(28% 0.05 80); --c-error-soft: oklch(28% 0.06 30); } /* -------- base reset -------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light dark; } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-fg); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-sm); } ::selection { background: var(--c-accent-soft); color: var(--c-accent-soft-fg); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }