/* ============================================================ DESIGN TOKENS — "Ink & Paper" Single source of truth for color, type, spacing, radius, shadow. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Tells the browser's own rendering engine (form controls, scrollbars, and — critically on WebKit/Safari — GPU compositing of transformed/ animated elements) which color scheme is actually active. Without this, a manual override that disagrees with the OS preference (site forced to light while the phone is in system Dark Mode) can leave Safari's compositor still assuming dark, showing stale dark-themed backgrounds behind text on elements that use transform/opacity (the .fade/.reveal scroll-in cards) even though every CSS variable below says light. */ color-scheme: light dark; /* ── Color ── */ --bg-base: #F7F5EF; --bg-elevated: #FFFFFF; --bg-overlay: #EFEBE0; --border-subtle: rgba(30, 30, 40, 0.08); --border-strong: rgba(30, 30, 40, 0.16); --text-primary: #1A1A24; --text-secondary: #4A4A5A; --text-muted: #7A7A8A; --accent: #C8452E; --accent-hover: #A8371F; --accent-glow: rgba(200, 69, 46, 0.08); --accent-rgb: 200, 69, 46; --success: #3B7A57; --warning: #B8860B; --danger: #C0392B; /* Back-compat aliases used by not-yet-migrated inline styles */ --bg: var(--bg-base); --bg2: var(--bg-elevated); --bg3: var(--bg-overlay); --border: var(--border-subtle); --text: var(--text-primary); --muted: var(--text-secondary); --card: var(--bg-elevated); /* ── Type scale ── */ --text-caption: 0.75rem; --text-small: 0.875rem; --text-body: 1rem; --text-lead: 1.125rem; --text-h3: 1.5rem; --text-h2: 2rem; --text-h1: 2.5rem; --text-display: 2.5rem; /* ── Fonts ── */ --font-heading: 'Fraunces', 'Noto Serif JP', serif; --font-hand: 'Caveat', cursive; /* ── Radius ── */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px; /* ── Shadow ── */ --shadow-glow: 0 0 0 1px var(--border-strong), 0 8px 24px -4px rgba(30, 30, 40, 0.10); /* ── Nav glass tint (kept separate from --bg-elevated so it can carry alpha) ── */ --nav-glass: rgba(247, 245, 239, 0.75); } @media (min-width: 1024px) { :root { --text-h2: 2.5rem; --text-h1: 3.5rem; --text-display: 3.5rem; } } /* Fixed px (not rem) on purpose: this must stay small enough to fit a long unbreakable heading word on a narrow phone regardless of how large the root font-size is set (see html{font-size} above, and .hero-grid > * {min-width:0} in pages.css for the grid-overflow half of this fix). */ @media (max-width: 480px) { :root { --text-display: 32px; } } /* ── Dark variant ── Applies automatically when the OS/browser prefers dark (unless the user has manually forced light via the toggle), and always when the user has manually forced dark via the toggle (`data-theme="dark"` on , set by the brightness button in the nav, see base.html/motion.js). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg-base: #0A0A0F; --bg-elevated: #12121C; --bg-overlay: #1A1A26; --border-subtle: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.12); --text-primary: #F5F5F7; --text-secondary: #A0A0B0; --text-muted: #6B6B7D; --accent: #7C6FF0; --accent-hover: #9285F5; --accent-glow: rgba(124, 111, 240, 0.15); --accent-rgb: 124, 111, 240; --success: #4ADE80; --warning: #FBBF24; --danger: #F87171; --shadow-glow: 0 0 0 1px var(--border-strong), 0 8px 24px -4px rgba(124, 111, 240, 0.12); --nav-glass: rgba(10, 10, 15, 0.75); } } :root[data-theme="dark"] { color-scheme: dark; --bg-base: #0A0A0F; --bg-elevated: #12121C; --bg-overlay: #1A1A26; --border-subtle: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.12); --text-primary: #F5F5F7; --text-secondary: #A0A0B0; --text-muted: #6B6B7D; --accent: #7C6FF0; --accent-hover: #9285F5; --accent-glow: rgba(124, 111, 240, 0.15); --accent-rgb: 124, 111, 240; --success: #4ADE80; --warning: #FBBF24; --danger: #F87171; --shadow-glow: 0 0 0 1px var(--border-strong), 0 8px 24px -4px rgba(124, 111, 240, 0.12); --nav-glass: rgba(10, 10, 15, 0.75); } /* User manually forced light while the OS/browser prefers dark — without this, :root's default `color-scheme: light dark` still lets the browser lean on its dark native rendering in places, which is the exact mismatch that causes the stale-dark-compositing glitch described above. */ :root[data-theme="light"] { color-scheme: light; } html { scroll-behavior: smooth; font-size: 100%; } body { background: var(--bg-base); color: var(--text-primary); font-family: 'Inter', 'Noto Sans JP', 'Noto Sans Devanagari', sans-serif; font-feature-settings: 'ss01', 'cv11', 'kern'; min-height: 100vh; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-weight: 600; color: var(--text-primary); } .text-display, .text-h1 { font-family: var(--font-heading); letter-spacing: -0.04em; } .text-display { font-size: var(--text-display); font-weight: 600; line-height: 1.1; } .text-h1 { font-size: var(--text-h1); font-weight: 600; line-height: 1.1; } .text-h2 { font-size: var(--text-h2); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } .text-h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.25; } .text-lead { font-size: var(--text-lead); color: var(--text-secondary); line-height: 1.6; } .text-small { font-size: var(--text-small); } .text-caption { font-size: var(--text-caption); } code, pre, .mono { font-family: 'JetBrains Mono', monospace; } .handwritten { font-family: var(--font-hand); } ::selection { background: var(--accent-glow); color: var(--text-primary); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }