/* ============================================================
tokens.css v2 — 台風くじレーダー
方向：ダーク・ハイテク（Linear / Vercel / Stripe / Berkshire HQ 系譜）。
95% 無彩色、jade と amber をアクセント、rose は不成立のみ。
生 hex 直書き禁止。本ファイルの custom property のみを使う。
値の正＝foundation.md / 見せ方＝design-system.md
フォント読込（）:
============================================================ */
:root{
/* === 色（design-system v2 §1） === */
--c-ink: #0A0B0D; /* 地（純黒ではない） */
--c-coal: #14171B; /* パネル背景 */
--c-slate: #1E232A; /* 段帯・ホバー */
--c-line: rgba(255,255,255,0.06); /* 極淡罫線 */
--c-line-2: rgba(255,255,255,0.12); /* 強調罫線 */
--c-bone: #E8E6E0; /* 主要テキスト（純白でなく紙色寄り） */
--c-ash: #8A8F98; /* 副テキスト */
--c-dust: #5A5F68; /* 補助・補足 */
--c-jade: #6FE3A0; /* アクセント1：チャンス・改善方向・中止確定の面 */
--c-amber: #E8B440; /* アクセント2：注意・締切・中止見込みの面 */
--c-gold: #E8C76B; /* v3：CO（お金）・購入導線 CTA の面 */
--c-rose: #FF6E5C; /* 限定使用：不成立・取り消しのみ */
/* v3：「面」として使う tint（背景に薄く敷く用） */
--tint-jade: rgba(111,227,160,0.07);
--tint-amber: rgba(232,180,64,0.07);
--tint-gold: rgba(232,199,107,0.08);
/* === 書体（3 役） === */
--f-display: "Oswald", "Inter", system-ui, sans-serif; /* 数字・大見出し */
--f-body: "Inter", "Noto Sans JP", system-ui, sans-serif; /* 本文 */
--f-mono: "JetBrains Mono", ui-monospace, monospace; /* タブラー数字 */
/* === 文字スケール === */
--fs-hero: clamp(48px, 12vw, 88px); /* CO ／ 締切 ／ オッズ */
--fs-display: clamp(28px, 7vw, 40px); /* 副次の大数字 */
--fs-h1: 18px; /* セクション見出し */
--fs-h2: 14px; /* サブ見出し */
--fs-body: 14px;
--fs-small: 12px;
--fs-micro: 10.5px; /* ラベル・キャプション uppercase */
--lh-tight: 1.1;
--lh-body: 1.55;
/* === 余白（8px ベース） === */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
/* === 角丸（控えめ） === */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
/* === モーション === */
--motion-fast: 120ms;
--motion: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce){
:root{ --motion-fast: 0ms; --motion: 0ms; }
}
/* ============================================================
primitives
============================================================ */
*{ box-sizing: border-box; }
html, body{ background: var(--c-ink); }
body{
margin: 0; color: var(--c-bone);
font-family: var(--f-body);
font-size: var(--fs-body); line-height: var(--lh-body);
font-feature-settings: "cv11" 1, "ss01" 1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3{
font-family: var(--f-display); font-weight: 500;
line-height: var(--lh-tight); margin: 0;
letter-spacing: 0.02em; color: var(--c-bone);
}
p{ margin: 0; }
/* タブラー数字を確実に適用 */
.num, .mono{
font-family: var(--f-mono);
font-feature-settings: "tnum" 1, "zero" 1;
}
/* uppercase + tracking のマイクロラベル（速報盤の語彙） */
.label-micro{
font-family: var(--f-body); font-weight: 500;
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--c-ash);
}
/* 罫線ユーティリティ */
hr{ border: 0; border-top: 1px solid var(--c-line); margin: 0; }
hr.hr-2{ border-top: 1px solid var(--c-line-2); }
/* リンク */
a{
color: var(--c-bone);
text-decoration: none;
border-bottom: 1px solid var(--c-line-2);
transition: filter var(--motion-fast);
}
a:hover{ filter: brightness(1.25); }
/* フォーカス */
:focus-visible{ outline: 1px solid var(--c-jade); outline-offset: 3px; }
/* セレクション */
::selection{ background: var(--c-jade); color: var(--c-ink); }
/* 角丸の保険 */
button, input, .panel{ border-radius: var(--radius-sm); }