:root { --background: oklch(0.10 0.012 25); --foreground: oklch(0.96 0.012 80); --card: oklch(0.14 0.014 25); --card-foreground: oklch(0.96 0.012 80); --popover: oklch(0.14 0.014 25); --popover-foreground: oklch(0.96 0.012 80); --primary: oklch(0.58 0.21 25); --primary-foreground: oklch(0.98 0.012 80); --secondary: oklch(0.20 0.014 25); --secondary-foreground: oklch(0.96 0.012 80); --muted: oklch(0.18 0.012 25); --muted-foreground: oklch(0.74 0.018 60); --accent: oklch(0.78 0.14 80); --accent-foreground: oklch(0.16 0.02 80); --destructive: oklch(0.55 0.22 28); --border: oklch(0.78 0.14 80 / 18%); --input: oklch(1 0 0 / 12%); --ring: oklch(0.78 0.14 80); --chart-1: oklch(0.58 0.21 25); --chart-2: oklch(0.78 0.14 80); --chart-3: oklch(0.55 0.10 165); --chart-4: oklch(0.50 0.16 350); --chart-5: oklch(0.32 0.04 30); --radius: 0.125rem; --font-display: var(--font-noto-serif-jp); --font-sans: var(--font-inter); --brand: var(--primary); --brand-foreground: var(--primary-foreground); } .dark { --background: oklch(0.10 0.012 25); --foreground: oklch(0.96 0.012 80); --card: oklch(0.14 0.014 25); --card-foreground: oklch(0.96 0.012 80); --popover: oklch(0.14 0.014 25); --popover-foreground: oklch(0.96 0.012 80); --primary: oklch(0.58 0.21 25); --primary-foreground: oklch(0.98 0.012 80); --secondary: oklch(0.20 0.014 25); --secondary-foreground: oklch(0.96 0.012 80); --muted: oklch(0.18 0.012 25); --muted-foreground: oklch(0.74 0.018 60); --accent: oklch(0.78 0.14 80); --accent-foreground: oklch(0.16 0.02 80); --destructive: oklch(0.55 0.22 28); --border: oklch(0.78 0.14 80 / 18%); --input: oklch(1 0 0 / 12%); --ring: oklch(0.78 0.14 80); --chart-1: oklch(0.58 0.21 25); --chart-2: oklch(0.78 0.14 80); --chart-3: oklch(0.55 0.10 165); --chart-4: oklch(0.50 0.16 350); --chart-5: oklch(0.32 0.04 30); --radius: 0.125rem; --font-display: var(--font-noto-serif-jp); --font-sans: var(--font-inter); --brand: var(--primary); --brand-foreground: var(--primary-foreground); } /* ─── Ink-wash body — paper grain + dual radial glows ─────────────── */ /* Background-attachment: fixed anchors the gold/vermilion glows to the * viewport so long pages don't stretch them. Paper grain is local-tiled. */ body { background-color: var(--background); background-image: url("data:image/svg+xml;utf8,"), radial-gradient(at 18% 12%, color-mix(in oklab, var(--accent) 14%, transparent) 0, transparent 60%), radial-gradient(at 82% 88%, color-mix(in oklab, var(--brand) 16%, transparent) 0, transparent 65%); background-attachment: local, fixed, fixed; background-blend-mode: overlay, normal, normal; } /* ─── Cards — gold-leaf rim, deepens on hover ─────────────────────── */ .bg-card { border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--accent) 18%, transparent), 0 1px 0 rgba(0, 0, 0, 0.6), 0 16px 32px -22px rgba(0, 0, 0, 0.7); transition: border-color 200ms ease, transform 200ms ease, box-shadow 240ms ease; } .bg-card:hover { border-color: color-mix(in oklab, var(--accent) 55%, transparent); transform: translateY(-1px); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--accent) 28%, transparent), 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent), 0 22px 44px -22px color-mix(in oklab, var(--brand) 55%, transparent); } /* ─── Buttons — lacquer cinnabar with thin gold rim and bevel ─────── */ button.bg-primary, a.bg-primary, button.bg-\[var\(--brand\)\], a.bg-\[var\(--brand\)\] { background-image: linear-gradient(180deg, color-mix(in oklab, var(--brand) 100%, white 14%) 0%, var(--brand) 50%, color-mix(in oklab, var(--brand) 100%, black 18%) 100%); border: 1px solid color-mix(in oklab, var(--accent) 60%, black 30%); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--accent) 45%, transparent), 0 2px 0 rgba(0, 0, 0, 0.5); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); transition: filter 160ms ease, box-shadow 220ms ease, transform 120ms ease; } button.bg-primary:hover, a.bg-primary:hover, button.bg-\[var\(--brand\)\]:hover, a.bg-\[var\(--brand\)\]:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--accent) 55%, transparent), 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 22px color-mix(in oklab, var(--accent) 55%, transparent); } button.bg-primary:active, a.bg-primary:active, button.bg-\[var\(--brand\)\]:active, a.bg-\[var\(--brand\)\]:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45); } /* ─── Display headings — sumi-e brushstroke underline ─────────────── */ main h1, main h2 { font-family: var(--font-display); letter-spacing: -0.005em; } main h2 { position: relative; padding-bottom: 0.5em; } main h2::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.05em; width: 4rem; height: 6px; /* SVG mask: irregular brushstroke that tapers and varies in opacity. */ background: linear-gradient(90deg, var(--accent) 0%, var(--brand) 100%); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 35%, transparent)); } /* ─── Reduced motion — kill transitions, keep static look ─────────── */ @media (prefers-reduced-motion: reduce) { .bg-card { transition: none; transform: none; } button.bg-primary, a.bg-primary, button.bg-\[var\(--brand\)\], a.bg-\[var\(--brand\)\] { transition: none; } } :root { --primary: #89130b; --primary-foreground: #ffffff; --accent: #c8921e; --accent-foreground: #ffffff; --tertiary: #0a1566; --tertiary-foreground: #ffffff; --brand: #89130b; --brand-foreground: #ffffff; --brand-tertiary: #0a1566; --brand-tertiary-foreground: #ffffff; --ring: #89130b; --chart-1: #89130b; --chart-2: #c8921e; --chart-3: #0a1566; } .dark { --primary: #89130b; --primary-foreground: #ffffff; --accent: #c8921e; --accent-foreground: #ffffff; --tertiary: #0a1566; --tertiary-foreground: #ffffff; --brand: #89130b; --brand-foreground: #ffffff; --brand-tertiary: #0a1566; --brand-tertiary-foreground: #ffffff; --ring: #89130b; --chart-1: #89130b; --chart-2: #c8921e; --chart-3: #0a1566; } :root { --font-display: var(--font-cinzel); --font-sans: var(--font-cinzel); } .dark { --font-display: var(--font-cinzel); --font-sans: var(--font-cinzel); }