/* ============================================================================= tokens.css — ベースデザイン（デザイントークン＝単一真実源） ----------------------------------------------------------------------------- SyncToys（synctoys.net）正式トークン。2026-07-21 ベースデザイン確定版。 根拠: workspace/design-base.md ／ 実証: workspace/prototype/hero-demo.html v0.4s 世界観: 「冷たいデジタルの闇の中で、触れ合いだけが温かい」 - 背景 … 深い夜（ダーク単一テーマ。ライト版は提供しない＝ブランド判断） - YOU … ティール（あなた側の信号色） - PEER … マゼンタ（相手側の信号色） - TOUCH … 電球色（触れ合い・成果・温かさ。ここぞの強調のみ） - CTA … ブルー（行動ボタン。信号色と役割を分離） 構成は 02_conventions/css.md §1 の「2 段構成」: 1) 原始トークン … パレット（色見本）とスケール。生の値。 2) 意味トークン … 用途で名付けたトークン。部品 CSS はこちらだけを参照。 本文の文字色は背景に対しコントラスト比 4.5:1 以上（accessibility.md §1.1）。 ============================================================================= */ @layer tokens { :root { /* === 1) 原始トークン（パレット／スケール）=============================== */ /* --- 夜（背景の階調）--- */ --color-night-950: oklch(8% 0.01 265deg); /* 最深部 #030407 相当 */ --color-night-900: oklch(13% 0.02 265deg); /* 面のベース #0A0D18 相当 */ --color-night-800: oklch(17% 0.025 265deg); /* カード等の面 */ --color-night-700: oklch(21% 0.03 265deg); /* 一段浮いた面 */ /* --- ティール（YOU）--- */ --color-teal-300: oklch(87% 0.12 175deg); /* 明るめ（ホバー・リンク） */ --color-teal-400: oklch(80% 0.14 178deg); /* 主役 #2DD4BF 相当 */ --color-teal-600: oklch(58% 0.11 180deg); --color-teal-900: oklch(28% 0.05 185deg); /* 淡い面（暗色の下地） */ /* --- シアン（補助光・フォーカス）--- */ --color-cyan-300: oklch(88% 0.10 205deg); /* #6EE7F9 相当 */ /* --- マゼンタ（PEER）--- */ --color-mag-300: oklch(76% 0.19 338deg); /* 明るめ */ --color-mag-400: oklch(68% 0.23 335deg); /* 主役 #E64FCB 相当 */ --color-mag-900: oklch(28% 0.09 335deg); /* 淡い面 */ /* --- 電球色（TOUCH・温かさ）--- */ --color-bulb-200: oklch(93% 0.06 85deg); /* 白熱の芯 */ --color-bulb-300: oklch(88% 0.09 82deg); /* #FFD18C 相当 */ --color-amber-400: oklch(82% 0.13 80deg); /* #F5B84C 相当（注意にも使用） */ /* --- ブルー（CTA）--- */ --color-blue-400: oklch(70% 0.16 258deg); /* ホバー */ --color-blue-500: oklch(62% 0.19 260deg); /* #3B82F6 相当 */ --color-blue-600: oklch(55% 0.20 262deg); /* #2563EB 相当 */ /* --- クールグレー（文字）--- */ --color-gray-100: oklch(95% 0.008 260deg); /* 本文（暗背景に 15:1 前後） */ --color-gray-50: oklch(98% 0.004 260deg); /* 見出し・強調 */ --color-gray-400: oklch(68% 0.015 260deg); /* 補助テキスト #8A93A8 相当（4.5:1 以上） */ --color-line-8: oklch(100% 0 0deg / 8%); /* 罫線（薄） */ --color-line-14: oklch(100% 0 0deg / 14%); /* 罫線（標準） */ /* --- 状態色（暗背景で 4.5:1 以上）--- */ --color-green-400: oklch(76% 0.15 152deg); /* 成功 */ --color-red-400: oklch(70% 0.18 22deg); /* エラー／必須 */ /* --- スケール: 寸法（4px = 0.25rem 基準）--- */ --size-0: 0; --size-1: 0.25rem; /* 4px */ --size-2: 0.5rem; /* 8px */ --size-3: 0.75rem; /* 12px */ --size-4: 1rem; /* 16px */ --size-5: 1.5rem; /* 24px */ --size-6: 2rem; /* 32px */ --size-7: 3rem; /* 48px */ --size-8: 4rem; /* 64px */ --size-9: 6rem; /* 96px */ /* --- スケール: 角丸 --- */ --radius-1: 0.25rem; --radius-2: 0.5rem; --radius-3: 0.75rem; --radius-full: 9999px; /* === 2) 意味トークン（用途で名付ける）================================= */ /* --- 配色（ダーク単一テーマ）--- */ --color-bg: var(--color-night-950); /* ページ背景 */ --color-bg-2: var(--color-night-900); /* セクションの起伏 */ --color-surface: var(--color-night-800); /* カード等の面 */ --color-surface-2: var(--color-night-700); /* 一段浮いた面 */ --color-border: var(--color-line-14); /* 境界線 */ --color-border-weak: var(--color-line-8); --color-text: var(--color-gray-100); /* 本文 */ --color-text-strong: var(--color-gray-50); /* 見出し・強調 */ --color-text-muted: var(--color-gray-400); /* 補助テキスト */ --color-text-on-primary: var(--color-night-950); /* ティール面の上の文字 */ --color-text-on-cta: var(--color-gray-50); /* CTAボタンの上の文字 */ --color-primary: var(--color-teal-400); /* 主役＝YOU・ブランド */ --color-primary-strong: var(--color-teal-300); /* ホバー等 */ --color-primary-weak: var(--color-teal-900); /* 淡い下地面 */ --color-peer: var(--color-mag-400); /* 相手側の信号色 */ --color-peer-strong: var(--color-mag-300); --color-peer-weak: var(--color-mag-900); --color-accent: var(--color-cyan-300); /* 補助光（HUD・小さな輝き） */ --color-warm: var(--color-bulb-300); /* 触れ合い・成果の強調（乱用しない） */ --color-warm-core: var(--color-bulb-200); --color-cta: var(--color-blue-500); /* 行動ボタン */ --color-cta-strong: var(--color-blue-400); --color-link: var(--color-teal-300); /* 本文中リンク */ --color-link-hover: var(--color-cyan-300); --color-success: var(--color-green-400); --color-warning: var(--color-amber-400); --color-danger: var(--color-red-400); --color-focus: var(--color-cyan-300); /* フォーカスリング（暗背景に 3:1 以上） */ /* --- 物語のグラデーション --- */ --gradient-sync: linear-gradient( 95deg, var(--color-teal-400), var(--color-cyan-300) 45%, var(--color-mag-400) 105% ); /* 見出しの象徴語（例:「握手」）専用 */ --gradient-cta: linear-gradient( 120deg, var(--color-blue-600), var(--color-blue-500) 60%, oklch(75% 0.13 230deg) ); /* --- 余白（スペーシング）--- */ --space-3xs: var(--size-1); --space-2xs: var(--size-2); --space-xs: var(--size-3); --space-sm: var(--size-4); --space-md: var(--size-5); --space-lg: var(--size-6); --space-xl: var(--size-7); --space-2xl: var(--size-8); --space-3xl: var(--size-9); /* --- 角丸 --- */ --radius-sm: var(--radius-1); --radius-md: var(--radius-2); --radius-card: var(--radius-3); --radius-pill: var(--radius-full); /* --- 影・光（暗い世界では影でなく「光」で奥行きを作る）--- */ --shadow-1: 0 1px 2px oklch(0% 0 0deg / 40%), 0 1px 1px oklch(0% 0 0deg / 30%); --shadow-2: 0 4px 10px oklch(0% 0 0deg / 45%), 0 2px 4px oklch(0% 0 0deg / 35%); --glow-primary: 0 0 24px oklch(80% 0.14 178deg / 35%); --glow-peer: 0 0 24px oklch(68% 0.23 335deg / 35%); --glow-warm: 0 0 28px oklch(88% 0.09 82deg / 40%); --glow-cta: 0 8px 34px -10px oklch(62% 0.19 260deg / 90%); /* --- 重なり順（z-index）--- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 800; --z-modal: 1000; --z-toast: 1100; /* --- ブレークポイント --- */ --bp-sm: 36rem; --bp-md: 48rem; --bp-lg: 64rem; /* --- レイアウト --- */ --layout-max-inline: 72rem; --layout-gutter: var(--space-md); /* --- タイポグラフィ --- */ /* 追加接続なしのシステムフォント（性能規約準拠）。等幅は HUD/計器の声。 */ --font-sans: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Noto Sans Mono", monospace; /* 流体タイポ（clamp）。ヒーローは大胆に、本文は読みやすく。 */ --text-sm: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem); --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --text-md: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem); --text-lg: clamp(1.3rem, 1.2rem + 0.5vw, 1.5rem); --text-xl: clamp(1.6rem, 1.4rem + 1vw, 2rem); --text-2xl: clamp(2rem, 1.4rem + 3vw, 3.4rem); /* セクション見出し */ --text-hero: clamp(2rem, 1rem + 4.2vw, 4.1rem); /* ヒーロー見出し */ --leading-tight: 1.25; --leading-normal: 1.7; --tracking-hud: 0.34em; /* 計器/アイブロウの字間 */ /* --- モーション（reduced-motion で base.css が無効化する）--- */ --motion-fast: 120ms; --motion-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* ダーク単一テーマ（ブランド判断）。フォーム部品等の標準 UI もダークで描画。 */ color-scheme: dark; } }