/* ===================================================================== ProAttend Design System — tokens.css デザイントークン（CSS カスタムプロパティ） トーン: 端正・信頼重視（保守的・上質・余白広め） 読み込み順: tokens.css → base.css → components.css ===================================================================== */ :root { /* ------------------------------------------------------------------- 1. COLOR — ベースパレット（§2・このHEXは厳守） ------------------------------------------------------------------- */ --c-navy: #16263F; /* 主役：見出し・ヘッダー/フッター・主要ボタン */ --c-ink: #1F2937; /* 本文テキスト */ --c-slate: #4A6985; /* 補助：リンク・図版・データ表現 */ --c-paper: #F7F6F2; /* 背景の主役・セクション交互の下地 */ --c-lightgray: #ECEAE4; /* カード・区切り・罫線 */ --c-accent: #EE9E1E; /* 差し色（アクセント・ロゴ）。原則1画面1か所 */ --c-white: #FFFFFF; /* ------------------------------------------------------------------- 派生色（ベースHEXから論理的に導出） 中間グレーは無彩色ではなくネイビー寄りに振り「選んだ色」にする ------------------------------------------------------------------- */ /* ネイビー濃淡：hover は少し沈め、soft は背景帯用に薄く */ --c-navy-hover: #0F1B2D; /* navy をさらに暗く（ボタン hover） */ --c-navy-soft: #24364F; /* navy のやや明るい面（境界・図） */ --c-navy-line: #2C405B; /* ネイビー地の上の罫線 */ /* スレート濃淡：リンク・データ */ --c-slate-hover: #38516A; /* link hover（より濃く＝コントラスト確保） */ --c-slate-soft: #6E89A3; /* 図版の補助線・控えめなアイコン */ /* グレー系（ネイビー寄りの寒色グレー＝無彩色を避ける） */ --c-border: #DCD9D1; /* lightgray を一段締めた罫線色（ペーパー上で視認可） */ --c-border-strong:#C9C5BB; /* hover やフォーカスの強めの境界（装飾用・非テキストUI 3:1 は満たさない） */ --c-field-border: #6B7C8C; /* 入力欄の既定枠：白上 4.3:1（非テキストUI基準 3:1 を確実に満たす寒色グレー） */ --c-muted-text: #5C6B7A; /* 補足テキスト（ink より淡いが AA を満たす寒色グレー） */ --c-placeholder: #5C6B7A; /* プレースホルダ：白上 5.47:1（AA達成・パレット内ミュート色を流用） */ --c-muted-on-navy:#B7C2D0; /* ネイビー地の上の補足テキスト（白の一段下） */ /* 無効状態（opacity を避け専用色。淡グレー地＋muted文字で AA を確保） */ --c-disabled-bg: #EFEDE8; /* ペーパー寄りの淡グレー面 */ --c-disabled-text: var(--c-muted-text); /* #5C6B7A on #EFEDE8 ≈ 4.7:1 ✅AA */ --c-disabled-border: var(--c-border); /* アクセント派生：面・帯・ごく薄い下地に限定（小テキスト色には使わない） */ --c-accent-hover: #D98A12; /* accent ボタンの hover */ --c-accent-soft: #FBEFD6; /* アクセントのごく薄い面（要点マークの下地等） */ --c-accent-line: #EE9E1E; /* 強調の下線（太め・面として使う） */ /* セマンティック別名（用途で参照しやすく） */ --color-bg: var(--c-white); /* 既定の地（広い白面） */ --color-ground: var(--c-paper); /* 交互セクションの下地 */ --color-surface: var(--c-white); /* カード等の面 */ --color-text: var(--c-ink); /* 本文 */ --color-heading: var(--c-navy); /* 見出し */ --color-muted: var(--c-muted-text); --color-link: var(--c-slate); --color-link-hover: var(--c-slate-hover); --color-border: var(--c-border); --color-accent: var(--c-accent); /* フォーム状態色（赤も寒色トーンに馴染ませた落ち着いた色） */ --c-error: #B3261E; /* エラー（白背景で AA 達成） */ --c-error-soft: #FBEAE8; /* エラーの薄い下地 */ --c-success: #2F6B4F; /* 任意：成功 */ /* フォーカスリング（視認性を確保したスレート/ネイビー） */ --focus-ring: 0 0 0 3px rgba(74, 105, 133, 0.45); --focus-ring-onnavy: 0 0 0 3px rgba(238, 158, 30, 0.55); /* 暗地ではアクセントで可視化 */ /* ------------------------------------------------------------------- 2. TYPOGRAPHY 本文 16px 基準。clamp() で流体。和文ゴシック（Noto Sans JP）。 ------------------------------------------------------------------- */ --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, -apple-system, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* 流体タイプスケール（min / preferred / max） */ --fs-eyebrow: 0.8125rem; /* 13px・英字ラベル */ --fs-small: 0.8125rem; /* 13px・注記 */ --fs-caption: 0.875rem; /* 14px */ --fs-body: 1rem; /* 16px・本文基準 */ --fs-body-lg: 1.0625rem; /* 17px */ --fs-lead: clamp(1.0625rem, 0.95rem + 0.55vw, 1.3125rem); /* 17→21px リード */ --fs-h6: 1rem; /* 16px */ --fs-h5: 1.125rem; /* 18px */ --fs-h4: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem); /* 19→23px */ --fs-h3: clamp(1.375rem, 1.15rem + 1.0vw, 1.875rem); /* 22→30px */ --fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem); /* 28→42px */ --fs-h1: clamp(2.125rem, 1.55rem + 2.7vw, 3.5rem); /* 34→56px */ /* 行間（和文は広めに） */ --lh-tight: 1.25; /* 大見出し */ --lh-snug: 1.4; /* 中見出し */ --lh-normal: 1.8; /* 本文（和文は1.8前後が読みやすい） */ --lh-relaxed: 2.0; /* ゆったり */ /* 字間（和文は詰めすぎない。英字ラベルのみ広げる） */ --ls-tight: -0.01em; /* 大見出し */ --ls-normal: 0.01em; /* 本文 */ --ls-wide: 0.12em; /* eyebrow・英字ラベル */ /* ------------------------------------------------------------------- 3. SPACING スケール（4の倍数を基本に） ------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ------------------------------------------------------------------- 4. RADIUS（控えめ） ------------------------------------------------------------------- */ /* 【2026-08-28】クライアント指示「過剰な角丸の多用は避ける」→ 全体をシャープ寄りに調整 */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-pill: 999px; /* チップ・バッジ・バー形状は意匠として維持 */ /* ------------------------------------------------------------------- 5. SHADOW（淡く上品に・2段階） ------------------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(22, 38, 63, 0.05), 0 2px 8px rgba(22, 38, 63, 0.06); --shadow-2: 0 4px 12px rgba(22, 38, 63, 0.08), 0 12px 28px rgba(22, 38, 63, 0.10); /* ------------------------------------------------------------------- 6. LAYOUT ------------------------------------------------------------------- */ --container-max: 1120px; --container-pad: var(--space-5); /* モバイルの左右余白（24px） */ --section-py: clamp(44px, 3vw + 30px, 76px); /* セクション縦パディング（流体・密度up） */ --header-h: 72px; /* Breakpoints（参考用・CSS変数はメディアクエリで直接使えないためコメント） --bp-sm: 480px; --bp-md: 768px; タブレット境界（グリッド段組崩し） --bp-lg: 1024px; PC ナビ表示境界 --bp-xl: 1120px; コンテナ最大幅 */ /* ------------------------------------------------------------------- 7. MOTION ------------------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur: 200ms; /* ------------------------------------------------------------------- 8. Z-INDEX ------------------------------------------------------------------- */ --z-header: 100; --z-overlay: 200; }