/* ============================================================
水面クロストーク / SHIMANE SEA TALK — Design Tokens
colors_and_type.css
Dark-mode base. Red/Blue/White tricolor.
Cold Japan Sea · Raw Harbor · Above / Below Surface.
Fonts (Google Fonts CDN — load in ):
Brand stack substitutions:
- Oswald ← condensed industrial label face (brief: Oswald / Bebas Neue / Archivo)
- Archivo ← English UI / body (brief: Inter / Archivo)
- Noto Sans JP← Japanese gothic (brief: Hiragino Sans / Yu Gothic → web-safe equivalent)
============================================================ */
:root {
/* ---------- COLOR · Background (dark, deep-sea) ---------- */
--deep-ocean-black: #020914; /* base canvas — near-black navy */
--abyss-blue: #06172A; /* large fields, section shifts, gradients */
--cold-sea-navy: #071D35; /* panels, cards, thumbnail beds, UI surfaces */
--harbor-panel: #0A223C; /* stronger card / form / info-block surface */
/* ---------- COLOR · Accent ---------- */
--signal-red: #E7192D; /* CTA, play, important — the ONE eye-magnet */
--dark-signal-red: #9D1020; /* hover / shadow / depth on red */
--japan-sea-blue: #0A65B7; /* sub-accent — underwater, depth, technical */
/* ---------- COLOR · Text / Line ---------- */
--wave-white: #F4F8FB; /* primary text, logo, rules, icons */
--muted-foam: #A9BBCA; /* body / meta / sub-copy */
--thin-line: rgba(244, 248, 251, 0.16); /* hairline rules, card borders */
--thin-line-strong: rgba(244, 248, 251, 0.28); /* hover / active hairline */
--red-line: rgba(231, 25, 45, 0.85); /* accent rule on hover */
/* ---------- SEMANTIC · surfaces ---------- */
--bg-canvas: var(--deep-ocean-black);
--bg-section: var(--abyss-blue);
--bg-panel: var(--cold-sea-navy);
--bg-panel-strong: var(--harbor-panel);
/* ---------- SEMANTIC · text ---------- */
--fg-1: var(--wave-white); /* headings, key text */
--fg-2: var(--muted-foam); /* body, secondary */
--fg-on-red: var(--wave-white); /* text sitting on Signal Red */
/* ---------- SEMANTIC · interaction / state ---------- */
--accent: var(--signal-red);
--accent-hover: var(--dark-signal-red);
--accent-2: var(--japan-sea-blue);
--focus-ring: var(--japan-sea-blue);
--border: var(--thin-line);
--border-strong: var(--thin-line-strong);
--hazard: var(--signal-red); /* warning / live / hazard labels */
/* ---------- TYPE · families ---------- */
--font-label: "Oswald", "Archivo", system-ui, sans-serif; /* uppercase gear labels */
--font-en: "Archivo", system-ui, sans-serif; /* english UI / body */
--font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
--font-display: "Oswald", "Archivo", "Noto Sans JP", system-ui, sans-serif; /* big heads */
/* ---------- TYPE · weights ---------- */
--w-regular: 400;
--w-medium: 500;
--w-bold: 700;
--w-black: 900;
/* ---------- TYPE · tracking ---------- */
--track-label: 0.14em; /* uppercase EN labels — wide */
--track-head: -0.01em; /* display heads — slightly tight */
--track-body: 0;
/* ---------- SHAPE · radius (硬い / sharp) ---------- */
--r-0: 0px; /* default — square */
--r-sm: 2px; /* buttons, thumbnails, forms */
--r-md: 4px; /* cards */
--r-lg: 6px; /* max — large cards only */
/* NOTE: full-pill radii are forbidden. Badges use --r-0 / --r-sm. */
/* ---------- SPACING · 4px base step ---------- */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
/* ---------- ELEVATION · blocky, low-blur shadows ---------- */
--shadow-card: 0 1px 0 rgba(0,0,0,0.6), 0 12px 28px rgba(0,0,0,0.45);
--shadow-block: 6px 6px 0 rgba(2,9,20,0.9); /* hard offset block */
--shadow-red: 4px 4px 0 var(--dark-signal-red); /* hard red drop */
--glow-red: 0 0 0 1px rgba(231,25,45,0.5), 0 8px 24px rgba(231,25,45,0.25);
/* ---------- MOTION ---------- */
--ease-sharp: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
/* ---------- TEXTURE · sea-chart grid overlay (use sparingly) ---------- */
--chart-grid:
linear-gradient(var(--thin-line) 1px, transparent 1px),
linear-gradient(90deg, var(--thin-line) 1px, transparent 1px);
--chart-grid-size: 40px 40px;
/* ---------- MOTIF · diver-down diagonal (red field + white slash) ---------- */
--diver-down: repeating-linear-gradient(
-45deg,
var(--signal-red) 0, var(--signal-red) 14px,
var(--wave-white) 14px, var(--wave-white) 18px,
var(--signal-red) 18px, var(--signal-red) 32px);
}
/* ============================================================
SEMANTIC TYPE RAMP
Heads default to display (Oswald). Mixed JP heads add --font-jp.
============================================================ */
.st-display { /* hero label / oversized EN */
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: clamp(40px, 7vw, 96px);
line-height: 0.95;
letter-spacing: var(--track-head);
text-transform: uppercase;
color: var(--fg-1);
}
.st-h1 { /* primary JP headline — short, declarative */
font-family: var(--font-jp);
font-weight: var(--w-black);
font-size: clamp(28px, 4.4vw, 56px);
line-height: 1.12;
letter-spacing: -0.015em;
color: var(--fg-1);
}
.st-h2 {
font-family: var(--font-jp);
font-weight: var(--w-bold);
font-size: clamp(22px, 3vw, 36px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--fg-1);
}
.st-h3 {
font-family: var(--font-jp);
font-weight: var(--w-bold);
font-size: 20px;
line-height: 1.3;
color: var(--fg-1);
}
.st-label { /* gear / harbor label — uppercase EN, tracked */
font-family: var(--font-label);
font-weight: var(--w-bold);
font-size: 13px;
line-height: 1;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--fg-1);
}
.st-eyebrow { /* small kicker above a head */
font-family: var(--font-label);
font-weight: var(--w-medium);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.st-body {
font-family: var(--font-jp);
font-weight: var(--w-regular);
font-size: 16px;
line-height: 1.75;
color: var(--fg-2);
}
.st-body-en {
font-family: var(--font-en);
font-weight: var(--w-regular);
font-size: 16px;
line-height: 1.6;
color: var(--fg-2);
}
.st-caption { /* meta · episode no · timecode */
font-family: var(--font-label);
font-weight: var(--w-medium);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-2);
}
/* ============================================================
PRIMITIVE HELPERS
============================================================ */
.st-on-dark { background: var(--bg-canvas); color: var(--fg-1); }
.st-rule { border: none; border-top: 1px solid var(--border); }
.st-rule-red{ border: none; border-top: 2px solid var(--accent); }