/* ============================================================
BJG DESIGN SYSTEM — KURO & KIN TOKENS
Single source of truth for all BJG surfaces.
DO NOT edit hex values here without updating the canon in
Design System.html. inari/inari.css @imports this file;
os/ and PORTFOLIO_DASHBOARD link to it via .
============================================================
GOOGLE FONTS
Each consuming page must carry these tags in
(CSS @import of external URLs is blocked by some browsers
when the sheet is served cross-origin). The canonical set:
OS/dashboard pages currently request a narrower weight subset
(400;600 for Fraunces, 400;500 for IBM Plex Mono, 400 for
Noto Serif JP) — acceptable, but the full set above is canon.
============================================================ */
:root {
/* ── KURO — black/dark scale ─────────────────────────────── */
--kuro-0: #050505; /* absolute black — footer bg */
--kuro-1: #0a0a0a; /* page background */
--kuro-2: #111111; /* card / panel surface */
--kuro-3: #161613; /* hover surface / featured */
--kuro-4: #1d1d18; /* deep panel (rare) */
--kuro-line: #262620; /* border / divider */
--kuro-rule: #33332b; /* subtle rule (form inputs) */
/* ── KIN — gold accent ───────────────────────────────────── */
--kin: #c8a96a; /* primary accent */
--kin-dim: #8a7849; /* muted gold (borders, hover) */
--kin-soft: rgba(200,169,106,0.10); /* tinted bg wash */
/* ── SHU — vermilion alert / emphasis ───────────────────── */
--shu: #b34a3a; /* error / alert / mark */
/* ── PAPER — light type scale ───────────────────────────── */
--paper: #f0ede4; /* primary text */
--paper-dim: #a8a298; /* secondary text */
--paper-faint: #6b675e; /* tertiary / placeholder */
--paper-ghost: #3f3c36; /* decorative / watermark text */
/* ── TYPE STACKS ─────────────────────────────────────────── */
--serif: 'Fraunces', 'Noto Serif JP', Georgia, serif;
--jp: 'Noto Serif JP', 'Fraunces', serif;
--mono: 'IBM Plex Mono', ui-monospace, monospace;
/* ── LAYOUT ──────────────────────────────────────────────── */
--maxw: 1240px;
--gutter: 56px;
/* ── SHORTHAND ───────────────────────────────────────────── */
--rule: 1px solid var(--kuro-line);
/* ── COLOR SCHEME ────────────────────────────────────────── */
color-scheme: dark;
}