/* ============================================================ SEIRAIYU DESIGN SYSTEM — TOKENS Semantic, themed. Components reference only --sy-* tokens, never raw hex. Switch themes via [data-theme] on . ============================================================ */ :root{ /* ---- brand primitives (theme-independent) ---- */ --sy-periwinkle-200:#c3c1f0; --sy-periwinkle-300:#a8a5ec; --sy-periwinkle-400:#8f8ce0; /* signature */ --sy-periwinkle-500:#6e6acb; --sy-periwinkle-600:#544fb0; --sy-periwinkle-800:#363070; /* warm neutrals */ --sy-ink:#1c1a17; --sy-graphite:#3b3630; --sy-stone:#8d8576; --sy-hairline:#dcd6ca; --sy-bone:#ece6da; --sy-paper:#f3efe7; --sy-card:#faf8f3; --sy-white:#ffffff; /* status hues (muted to fit the warm palette) */ --sy-pos:#5b7a52; --sy-pos-bg:#e7ecdf; --sy-warn:#b07d36; --sy-warn-bg:#f1e7d4; --sy-neg:#a8503f; --sy-neg-bg:#f1ddd6; /* ---- type ---- */ --sy-font-sans:"Hanken Grotesk",-apple-system,system-ui,sans-serif; --sy-font-mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace; --sy-font-jp:"Zen Kaku Gothic New",var(--sy-font-sans); /* fluid-ish scale (editorial density) */ --sy-text-xs:11px; --sy-text-sm:13px; --sy-text-base:15px; --sy-text-md:17px; --sy-text-lg:22px; --sy-text-xl:30px; --sy-text-2xl:40px; --sy-text-3xl:56px; --sy-leading-tight:1.15; --sy-leading-snug:1.35; --sy-leading-normal:1.6; --sy-track-tight:-0.02em; --sy-track-wordmark:-0.01em; --sy-track-label:0.16em; /* ---- 8-pt space ---- */ --sy-1:4px; --sy-2:8px; --sy-3:12px; --sy-4:16px; --sy-5:24px; --sy-6:32px; --sy-7:48px; --sy-8:64px; --sy-9:96px; --sy-10:128px; /* ---- radii ---- */ --sy-radius-sm:3px; --sy-radius-md:6px; --sy-radius-lg:10px; --sy-radius-tile:22%; --sy-radius-pill:999px; /* ---- layout ---- */ --sy-maxw:1180px; --sy-gutter:40px; /* ---- motion ---- */ --sy-ease:cubic-bezier(.2,.6,.2,1); --sy-dur:.18s; } /* ============================================================ LIGHT THEME (default) — warm paper ============================================================ */ :root, [data-theme="light"]{ --sy-bg:var(--sy-paper); --sy-bg-sunken:var(--sy-bone); --sy-surface:var(--sy-card); --sy-elevated:var(--sy-white); --sy-overlay:rgba(28,26,23,.34); --sy-text:var(--sy-ink); --sy-text-secondary:var(--sy-graphite); --sy-text-muted:var(--sy-stone); --sy-text-inverse:var(--sy-paper); --sy-border:var(--sy-hairline); --sy-border-strong:#cfc8ba; --sy-border-focus:var(--sy-periwinkle-400); --sy-accent:var(--sy-periwinkle-400); --sy-accent-hover:var(--sy-periwinkle-500); --sy-accent-text:var(--sy-periwinkle-600); /* accent legible on light for text */ --sy-accent-contrast:#ffffff; /* text on an accent fill */ --sy-accent-soft:#ecebfa; /* tinted fill */ --sy-glyph:var(--sy-periwinkle-400); --sy-pos-fg:#425b3a; --sy-pos-soft:var(--sy-pos-bg); --sy-warn-fg:#8a611f; --sy-warn-soft:var(--sy-warn-bg); --sy-neg-fg:#8c3e2e; --sy-neg-soft:var(--sy-neg-bg); --sy-shadow-sm:0 1px 2px rgba(28,26,23,.06); --sy-shadow-md:0 4px 16px rgba(28,26,23,.10); --sy-shadow-lg:0 18px 50px rgba(28,26,23,.18); --sy-code-bg:#211f1b; --sy-code-text:#e9e4d8; --sy-code-dim:#9c948440; } /* ============================================================ DARK THEME — warm ink ============================================================ */ [data-theme="dark"]{ --sy-bg:#171511; --sy-bg-sunken:#121009; --sy-surface:#201d18; --sy-elevated:#272218; --sy-overlay:rgba(0,0,0,.55); --sy-text:#f3efe7; --sy-text-secondary:#cdc6b8; --sy-text-muted:#938b7b; --sy-text-inverse:#1c1a17; --sy-border:#33302a; --sy-border-strong:#423d35; --sy-border-focus:var(--sy-periwinkle-300); --sy-accent:var(--sy-periwinkle-300); --sy-accent-hover:var(--sy-periwinkle-200); --sy-accent-text:var(--sy-periwinkle-300); --sy-accent-contrast:#1c1a17; --sy-accent-soft:#2a2740; --sy-glyph:var(--sy-periwinkle-300); --sy-pos-fg:#9cb88f; --sy-pos-soft:#27301f; --sy-warn-fg:#d6ab68; --sy-warn-soft:#332a18; --sy-neg-fg:#d68f7e; --sy-neg-soft:#341f18; --sy-shadow-sm:0 1px 2px rgba(0,0,0,.4); --sy-shadow-md:0 4px 18px rgba(0,0,0,.5); --sy-shadow-lg:0 20px 56px rgba(0,0,0,.62); --sy-code-bg:#0f0d09; --sy-code-text:#e9e4d8; --sy-code-dim:#6b645440; }