/** * ================================================================ * BREWING JAPAN — Design Tokens v1.0.0 * ================================================================ * * このファイルは Brewing Japan のすべての UI の設計トークンです。 * スタイルの実装はここに書かず、変数定義のみを行います。 * * 読み込み順: 必ず全 CSS の最初に読み込むこと * 使用方法 : var(--bj-*) で参照 * 更新日 : 2026-06-30 * 仕様書 : design-system.md * ================================================================ */ /* ================================================================ SECTION 1: COLOR TOKENS ================================================================ */ :root { /* ── ブランドカラー ─────────────────────────────────────── */ --bj-navy: #15223F; /* プライマリ: ヘッダー・CTA背景 */ --bj-navy2: #1B2C50; /* グラデーション終端 */ --bj-navy-dark: #0D1B35; /* 最深部: ニュースヒーロー等 */ --bj-amber: #C2811C; /* アクセント: CTA ボタン・アクセントライン */ --bj-amber-dark: #A86A12; /* amber ホバー状態 */ --bj-gold: #D29A33; /* knowledge カテゴリ・スター評価 */ --bj-gold-light: #E6B85C; /* ゴールド背景（薄） */ --bj-teal: #4AABAA; /* howtoenjoy カテゴリ */ --bj-teal-dark: #3A9190; /* teal ホバー */ --bj-cream: #FAF6EC; /* ページ背景・カード背景 */ --bj-cream-dark: #F0E8D5; /* セクション区切り背景 */ --bj-white: #FFFFFF; /* 純白 */ /* ── openingabeerpub カテゴリ専用（アンバーブラウン） ─── */ --bj-brown: #2A1608; --bj-brown2: #3D2010; /* ── テキストカラー ────────────────────────────────────── */ --bj-text: #1C1813; /* 本文（濃いウォームブラック） */ --bj-text-sub: #54514A; /* サブテキスト */ --bj-text-muted: #6E6A62; /* 日付・メタ情報 */ --bj-text-inverse: #FFFFFF; /* 暗い背景上のテキスト */ --bj-text-link: #A86A12; /* 本文中リンク（amber-dark） */ --bj-text-link-hover: #C2811C; /* リンクホバー */ /* ── ボーダーカラー ────────────────────────────────────── */ --bj-border: #ECE3D2; /* 標準枠線 */ --bj-border-strong: #D4C9B0; /* 強調区切り */ --bj-border-focus: #C2811C; /* フォーカスリング */ /* ── カテゴリカラー ────────────────────────────────────── */ --bj-cat-knowledge: var(--bj-gold); /* ビールの知識 */ --bj-cat-howtoenjoy: var(--bj-teal); /* ビールの楽しみ方 */ --bj-cat-opening: var(--bj-amber); /* ビアパブ開業 */ --bj-cat-news: var(--bj-navy); /* ニュース・トレンド */ /* 将来追加: --bj-cat-[slug]: [color]; */ /* ── セマンティックカラー ──────────────────────────────── */ --bj-success: #3A7D44; --bj-success-bg: #EBF5EE; --bj-warning: #C2811C; /* amber を流用 */ --bj-warning-bg: #FEF3E2; --bj-error: #C62828; --bj-error-bg: #FEEBEE; --bj-info: #1565C0; --bj-info-bg: #E8EEF9; /* ── 透明度バリアント ──────────────────────────────────── */ --bj-navy-10: rgba(21, 34, 63, 0.10); --bj-navy-20: rgba(21, 34, 63, 0.20); --bj-navy-40: rgba(21, 34, 63, 0.40); --bj-navy-60: rgba(21, 34, 63, 0.60); --bj-navy-80: rgba(21, 34, 63, 0.80); --bj-amber-10: rgba(194, 129, 28, 0.10); --bj-amber-20: rgba(194, 129, 28, 0.20); --bj-white-10: rgba(255, 255, 255, 0.10); --bj-white-20: rgba(255, 255, 255, 0.20); /* ================================================================ SECTION 2: TYPOGRAPHY TOKENS ================================================================ */ /* ── フォントファミリー ────────────────────────────────── */ --bj-font-serif: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', 'ヒラギノ明朝 ProN W3', serif; --bj-font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; --bj-font-display: 'Space Grotesk', 'Noto Sans JP', sans-serif; --bj-font-mono: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', monospace; /* ── フォントサイズスケール ────────────────────────────── */ --bj-text-display: clamp(40px, 5vw, 64px); /* ヒーロー大見出し */ --bj-text-h1: clamp(28px, 3.5vw, 40px); /* ページタイトル */ --bj-text-h2: clamp(22px, 2.8vw, 32px); /* セクション大見出し */ --bj-text-h3: clamp(18px, 2.2vw, 24px); /* セクション中見出し */ --bj-text-h4: clamp(16px, 1.8vw, 20px); /* カード・ウィジェットタイトル */ --bj-text-h5: 16px; /* 小見出し */ --bj-text-h6: 14px; /* ラベル見出し */ --bj-text-xl: 18px; /* リード文・強調本文 */ --bj-text-lg: 17px; /* 記事本文（デスクトップ）*/ --bj-text-base: 15px; /* 標準 UI テキスト */ --bj-text-sm: 14px; /* サブテキスト */ --bj-text-xs: 13px; /* サイドバー・コンパクト */ --bj-text-2xs: 12px; /* キャプション・日付 */ --bj-text-3xs: 11px; /* バッジ・マイクロラベル */ /* ── 行間 ───────────────────────────────────────────────── */ --bj-leading-display: 1.2; /* 大ディスプレイ */ --bj-leading-heading: 1.4; /* H1〜H3 */ --bj-leading-tight: 1.45; /* UIコンポーネント */ --bj-leading-snug: 1.6; /* カードタイトル */ --bj-leading-body: 1.85; /* 日本語本文（最重要）*/ --bj-leading-relaxed: 2.0; /* 説明文・リスト */ /* ── 字間 ───────────────────────────────────────────────── */ --bj-tracking-tight: -0.01em; /* 英字大見出し */ --bj-tracking-normal: 0.02em; /* 日本語本文 */ --bj-tracking-wide: 0.05em; /* 日本語見出し */ --bj-tracking-wider: 0.08em; /* 強調見出し */ --bj-tracking-widest: 0.15em; /* ALL CAPS ラベル */ /* ── フォントウェイト ──────────────────────────────────── */ --bj-weight-light: 300; --bj-weight-normal: 400; --bj-weight-medium: 500; --bj-weight-bold: 700; /* ================================================================ SECTION 3: SPACING TOKENS ================================================================ */ /* ── ベースユニット: 4px ───────────────────────────────── */ --bj-space-1: 4px; --bj-space-2: 8px; --bj-space-3: 12px; --bj-space-4: 16px; /* --bj-space-md */ --bj-space-5: 20px; --bj-space-6: 24px; /* --bj-space-lg */ --bj-space-8: 32px; /* --bj-space-xl */ --bj-space-10: 40px; --bj-space-12: 48px; /* --bj-space-2xl */ --bj-space-16: 64px; /* --bj-space-3xl */ --bj-space-20: 80px; --bj-space-24: 96px; /* --bj-space-4xl */ --bj-space-32: 128px; /* ── Named エイリアス ──────────────────────────────────── */ --bj-space-xs: var(--bj-space-1); --bj-space-sm: var(--bj-space-2); --bj-space-md: var(--bj-space-4); --bj-space-lg: var(--bj-space-6); --bj-space-xl: var(--bj-space-8); --bj-space-2xl: var(--bj-space-12); --bj-space-3xl: var(--bj-space-16); --bj-space-4xl: var(--bj-space-24); /* ================================================================ SECTION 4: BORDER TOKENS ================================================================ */ /* ── 線の太さ ───────────────────────────────────────────── */ --bj-border-thin: 1px; --bj-border-base: 1px; --bj-border-thick: 2px; --bj-border-accent: 3px; /* カテゴリアクセントライン */ --bj-border-heavy: 4px; /* ── 角丸 ───────────────────────────────────────────────── */ --bj-radius-xs: 2px; /* バッジ内 */ --bj-radius-sm: 3px; /* ラベル・タグ */ --bj-radius: 6px; /* カード・入力欄（標準）*/ --bj-radius-md: 8px; /* 大カード */ --bj-radius-lg: 12px; /* モーダル・フィーチャードカード */ --bj-radius-xl: 20px; /* ピル型 */ --bj-radius-full: 9999px; /* 円形・完全ピル */ /* ================================================================ SECTION 5: SHADOW (ELEVATION) TOKENS ================================================================ */ /* ネイビー系の影（ブランドカラーと馴染む）*/ --bj-shadow-xs: 0 1px 3px rgba(21, 34, 63, 0.08); --bj-shadow-sm: 0 2px 8px -4px rgba(21, 34, 63, 0.12); --bj-shadow: 0 4px 16px -8px rgba(21, 34, 63, 0.18); --bj-shadow-md: 0 8px 24px -12px rgba(21, 34, 63, 0.28); --bj-shadow-lg: 0 14px 30px -18px rgba(21, 34, 63, 0.38); --bj-shadow-xl: 0 20px 48px -24px rgba(21, 34, 63, 0.45); /* ヒーローセクション専用 */ --bj-shadow-hero: 0 8px 32px -12px rgba(21, 34, 63, 0.45); /* ================================================================ SECTION 6: ANIMATION TOKENS ================================================================ */ /* ── 時間スケール ───────────────────────────────────────── */ --bj-duration-fast: 150ms; /* ボタン押下・チェックボックス */ --bj-duration: 200ms; /* カードホバー・ドロップダウン */ --bj-duration-slow: 350ms; /* サムネイルズーム・スライドメニュー */ --bj-duration-slower: 500ms; /* スクロールアニメ（将来）*/ /* ── イージング ─────────────────────────────────────────── */ --bj-ease: cubic-bezier(0.4, 0, 0.2, 1); /* 標準 */ --bj-ease-in: cubic-bezier(0.4, 0, 1, 1); /* 退場 */ --bj-ease-out: cubic-bezier(0.0, 0, 0.2, 1); /* 登場 */ --bj-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* バウンス */ /* ================================================================ SECTION 7: LAYOUT TOKENS ================================================================ */ /* ── コンテナ幅 ─────────────────────────────────────────── */ --bj-container: 1200px; /* サイト最大幅 */ --bj-container-content: 800px; /* 記事本文 */ --bj-container-narrow: 640px; /* フォーム・CTA */ --bj-sidebar-width: 280px; /* サイドバー */ --bj-gutter: 24px; /* 左右余白 */ /* ── ブレークポイント（CSS では直接使用不可、参照値として）*/ /* SM: 480px / MD: 768px / LG: 1024px / XL: 1200px */ /* ── グリッド ───────────────────────────────────────────── */ --bj-grid-cols-2: repeat(2, 1fr); /* SPカードグリッド */ --bj-grid-cols-3: repeat(3, 1fr); /* PCカードグリッド */ --bj-grid-cols-4: repeat(4, 1fr); /* 図鑑グリッド（PC）*/ --bj-grid-gap: var(--bj-space-6); /* カード間余白 */ /* ================================================================ SECTION 8: Z-INDEX TOKENS ================================================================ */ --bj-z-below: -1; --bj-z-base: 0; --bj-z-raised: 1; /* カードホバー時 */ --bj-z-dropdown: 100; /* ドロップダウンメニュー */ --bj-z-sticky: 200; /* スティッキーCTA・ヘッダー */ --bj-z-overlay: 300; /* モーダルオーバーレイ */ --bj-z-modal: 400; /* モーダル本体 */ --bj-z-toast: 500; /* トースト通知 */ --bj-z-tooltip: 600; /* ツールチップ */ /* ================================================================ SECTION 9: ICON TOKENS ================================================================ */ --bj-icon-xs: 12px; --bj-icon-sm: 16px; --bj-icon-md: 20px; --bj-icon-lg: 24px; --bj-icon-xl: 32px; --bj-icon-2xl: 48px; --bj-icon-3xl: 64px; /* ================================================================ SECTION 10: COMPONENT TOKENS ================================================================ */ /* ── ボタン ─────────────────────────────────────────────── */ --bj-btn-height-sm: 32px; --bj-btn-height: 42px; --bj-btn-height-lg: 50px; --bj-btn-height-xl: 60px; --bj-btn-padding-x-sm: 14px; --bj-btn-padding-x: 24px; --bj-btn-padding-x-lg: 32px; --bj-btn-padding-x-xl: 40px; --bj-btn-font-sm: var(--bj-text-2xs); /* 12px */ --bj-btn-font: var(--bj-text-sm); /* 14px */ --bj-btn-font-lg: var(--bj-text-base); /* 15px */ --bj-btn-font-xl: var(--bj-text-h5); /* 16px */ --bj-btn-radius: var(--bj-radius); --bj-btn-weight: var(--bj-weight-bold); /* Primary ボタン */ --bj-btn-primary-bg: var(--bj-amber); --bj-btn-primary-bg-hover: var(--bj-amber-dark); --bj-btn-primary-text: var(--bj-white); /* Secondary ボタン */ --bj-btn-secondary-bg: var(--bj-navy); --bj-btn-secondary-bg-hover: var(--bj-navy2); --bj-btn-secondary-text: var(--bj-white); /* Ghost ボタン */ --bj-btn-ghost-border: var(--bj-navy); --bj-btn-ghost-text: var(--bj-navy); --bj-btn-ghost-bg-hover: var(--bj-navy); --bj-btn-ghost-text-hover: var(--bj-white); /* Ghost Amber */ --bj-btn-ghost-amber-border: var(--bj-amber); --bj-btn-ghost-amber-text: var(--bj-amber); --bj-btn-ghost-amber-bg-hover: var(--bj-amber); --bj-btn-ghost-amber-text-hover: var(--bj-white); /* ── カード ─────────────────────────────────────────────── */ --bj-card-bg: var(--bj-white); --bj-card-radius: var(--bj-radius); --bj-card-border: 1px solid var(--bj-border); --bj-card-shadow: var(--bj-shadow-sm); --bj-card-shadow-hover: var(--bj-shadow-lg); --bj-card-padding: var(--bj-space-5); /* 20px */ --bj-card-thumb-ratio: 56.25%; /* 16:9 */ --bj-card-translate-hover: translateY(-4px); /* ── フォーム ───────────────────────────────────────────── */ --bj-input-height: 44px; --bj-input-height-sm: 36px; --bj-input-padding-x: 14px; --bj-input-padding-y: 10px; --bj-input-bg: var(--bj-cream); --bj-input-border: 1px solid var(--bj-border); --bj-input-border-hover: 1px solid var(--bj-border-strong); --bj-input-border-focus: 2px solid var(--bj-amber); --bj-input-border-error: 1px solid var(--bj-error); --bj-input-border-success: 1px solid var(--bj-success); --bj-input-radius: var(--bj-radius); --bj-input-font: var(--bj-text-base); --bj-input-color: var(--bj-text); --bj-input-placeholder: var(--bj-text-muted); --bj-input-shadow-focus: 0 0 0 3px var(--bj-amber-10); /* ── ナビゲーション ─────────────────────────────────────── */ --bj-nav-height: 64px; --bj-nav-height-sp: 56px; --bj-nav-bg: var(--bj-navy); --bj-nav-text: var(--bj-white); --bj-nav-text-hover: var(--bj-amber); --bj-nav-font: var(--bj-font-sans); --bj-nav-font-size: var(--bj-text-sm); /* 14px */ --bj-nav-font-weight: var(--bj-weight-medium); --bj-nav-dropdown-bg: var(--bj-white); --bj-nav-dropdown-shadow: var(--bj-shadow-md); /* ── ウィジェットタイトル ──────────────────────────────── */ --bj-widget-title-font: var(--bj-font-serif); --bj-widget-title-size: var(--bj-text-sm); /* 14px */ --bj-widget-title-weight: var(--bj-weight-bold); --bj-widget-title-color: var(--bj-navy); --bj-widget-title-border: 2px solid var(--bj-amber); /* ── ページネーション ──────────────────────────────────── */ --bj-pagination-active-bg: var(--bj-navy); --bj-pagination-active-text: var(--bj-white); --bj-pagination-hover-border: var(--bj-amber); --bj-pagination-hover-text: var(--bj-amber); /* ── タグ・バッジ ───────────────────────────────────────── */ --bj-tag-bg: #F6EBD6; --bj-tag-color: var(--bj-amber-dark); --bj-tag-font: var(--bj-font-sans); --bj-tag-size: var(--bj-text-3xs); /* 11px */ --bj-tag-weight: var(--bj-weight-medium); --bj-tag-padding: 2px 9px; --bj-tag-radius: var(--bj-radius-sm); /* 3px */ --bj-tag-bg-hover: var(--bj-amber); --bj-tag-color-hover: var(--bj-white); /* ── アーカイブヒーロー ─────────────────────────────────── */ --bj-archive-hero-bg: linear-gradient(150deg, var(--bj-navy) 55%, var(--bj-navy2) 100%); --bj-archive-hero-text: var(--bj-white); --bj-archive-hero-font: var(--bj-font-serif); --bj-archive-hero-size: clamp(22px, 3.2vw, 32px); --bj-archive-hero-weight: var(--bj-weight-bold); --bj-archive-hero-padding: 44px 40px 40px; --bj-archive-hero-radius: var(--bj-radius); --bj-archive-hero-shadow: var(--bj-shadow-hero); --bj-archive-hero-accent-width: 36px; --bj-archive-hero-accent-height: 3px; --bj-archive-hero-accent-color: var(--bj-amber); --bj-archive-hero-accent-radius: 2px; /* ── 著者ボックス ───────────────────────────────────────── */ --bj-author-avatar-size: 72px; --bj-author-box-bg: var(--bj-cream-dark); --bj-author-box-radius: var(--bj-radius); --bj-author-box-padding: var(--bj-space-6); /* ── 図鑑コンポーネント（Phase 6 向け予約枠）────────────── */ --bj-figure-card-thumb-beer: 100%; /* 1:1 */ --bj-figure-card-thumb-brewery: 75%; /* 4:3 */ --bj-figure-card-thumb-hop: 100%; /* 1:1 */ --bj-figure-card-thumb-equip: 75%; /* 4:3 */ --bj-figure-cbc-badge-bg: var(--bj-amber); --bj-figure-cbc-badge-text: var(--bj-white); /* ── 検索コンポーネント ─────────────────────────────────── */ --bj-search-input-height: 48px; --bj-search-btn-bg: var(--bj-navy); --bj-search-btn-color: var(--bj-white); --bj-search-result-highlight: var(--bj-gold-light); /* マッチ語強調 */ } /* :root 終了 */ /* ================================================================ DARK MODE HOOK（将来対応 — 現在は未実装） 実装時は以下のブロックを有効化し、各カラートークンを上書きする ================================================================ */ /* @media (prefers-color-scheme: dark) { :root { --bj-cream: #1A1610; --bj-cream-dark: #211E18; --bj-white: #2A2520; --bj-text: #EDE8DF; --bj-text-sub: #B8B2A8; --bj-text-muted: #8A857D; --bj-border: #3A3428; --bj-border-strong: #4A4238; } } */ /* ================================================================ REDUCED MOTION HOOK アニメーションを無効化する OS 設定に対応 ================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --bj-duration-fast: 0ms; --bj-duration: 0ms; --bj-duration-slow: 0ms; --bj-duration-slower: 0ms; } } /* ================================================================ GOOGLE FONTS IMPORT ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600;700&family=Noto+Sans+JP:wght@300;400;500&family=Space+Grotesk:wght@500;600;700&display=swap');