/* ===================================================== tokens.css — 魔法のアトリエNAGI デザイントークン ルール：このファイルにはスタイル記述を一切書かない。 変数定義のみ。必ず base.css より前に読み込むこと。 ===================================================== */ :root { /* ───────────────────────────── 🎨 Color — Brand（サンセットオレンジ基調） ───────────────────────────── */ --color-brand-primary: #e85d1a; /* メインオレンジ（見出し・アクティブ） */ --color-brand-deep: #d2440f; /* 濃いオレンジ／バーント（ホバー・CTA）*/ --color-brand-light: #ff9a4d; /* 明るいオレンジ（アクセント・ボーダー）*/ --color-brand-pale: #ffd6ad; /* 極薄オレンジ（背景・グラデ起点） */ --color-brand-bg: rgba(232, 93, 26, 0.06); /* 背景用薄オレンジ */ --color-brand-border: rgba(232, 93, 26, 0.18); /* ボーダー用 */ /* ───────────────────────────── 🕯️ Color — Atmosphere（夕暮れの魔法アトリエ世界観） オレンジ基調に温かみと深みを加える補助カラー（金・夜紫の差し色は廃し、 全てサンセット〜燠火のオレンジ／ウォームブラウン系へ集約） ───────────────────────────── */ --color-warm-gold: #f59a3c; /* 灯りのアンバー・燠火（差し色） */ --color-warm-gold-soft: #ffcf9a; /* ふんわり暖色（ハイライト） */ --color-warm-gold-glow: rgba(245, 154, 60, 0.45); /* 光のオーラ */ --color-cream: #fdf3e6; /* 古紙の余白・羊皮紙感 */ --color-cream-soft: #fef8f0; /* ごく淡いウォームクリーム */ --color-night-deep: #3a1c0e; /* 暮れの深いウォームブラウン（フッター・モーダル背景）*/ --color-night-mid: #5e2f14; /* 中間の燠火ブラウン */ --color-mist-lavender: #e8b48a; /* 霞むウォームピーチ（夢っぽい補助）*/ --color-twilight-pink: #c87848; /* トワイライトオレンジ（落ち着いた強調）*/ --color-stardust: rgba(255, 240, 220, 0.85); /* 星屑の白金 */ --color-magic-glow: rgba(232, 120, 40, 0.35); /* 魔法のグロウ */ /* ───────────────────────────── 🎨 Color — Background Gradient ベースは紫寄り、時間帯で背景グラデ自体を切替（atmosphere.js） ───────────────────────────── */ /* デフォルト：淡いオレンジベースのクリーム1色（サイト全体共通・時間帯演出は無効化） ※ 時間帯バリアントは現在 JS から未適用のため、全てクリームへ統一して保持 */ --gradient-body: linear-gradient( 165deg, #fef8f0 0%, #fdefdd 55%, #fbe7cf 100% ); /* 以下バリアントは未使用（クリームへ統一） */ --gradient-body-morning: var(--gradient-body); --gradient-body-day: var(--gradient-body); --gradient-body-evening: var(--gradient-body); --gradient-body-night: var(--gradient-body); --gradient-brand: linear-gradient(135deg, #f57e30, #ff9a4d); --gradient-dark: linear-gradient( 135deg, rgba(14, 7, 3, 0.78) 0%, rgba(40, 18, 8, 0.72) 40%, rgba(58, 26, 12, 0.72) 70%, rgba(14, 7, 3, 0.78) 100% ); /* ───────────────────────────── 🎨 Color — Text ───────────────────────────── */ --color-text-primary: #333333; /* 本文メイン */ --color-text-secondary: #555555; /* 補助テキスト */ --color-text-muted: #888888; /* 日付・注釈 */ --color-text-disabled: #bbbbbb; /* 非活性テキスト */ --color-text-inverse: #ffffff; /* 暗背景上の文字 */ /* ───────────────────────────── 🎨 Color — Surface ───────────────────────────── */ --color-surface-white: #ffffff; --color-surface-card: #fff8f1; /* カード背景（ごく薄オレンジ白） */ --color-surface-overlay: rgba(255, 255, 255, 0.88); /* ヘッダー帯 */ --color-surface-dark: rgba(0, 0, 0, 0.6); /* 暗背景カード */ /* ───────────────────────────── ✍️ Typography — Font Family ───────────────────────────── */ --font-display: 'Zen Maru Gothic', 'Cinzel', 'Noto Serif JP', sans-serif; --font-ui: 'Montserrat', 'Zen Kaku Gothic New', sans-serif; --font-body: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; /* ───────────────────────────── ✍️ Typography — Font Size Scale ───────────────────────────── */ --text-2xs: 11px; /* バッジ・キャプション */ --text-xs: 12px; /* 日付・ラベル */ --text-sm: 13px; /* 補助テキスト・注釈 */ --text-base: 15px; /* 本文（基準） */ --text-md: 17px; /* リード文 */ --text-lg: 20px; /* 小見出し */ --text-xl: 24px; /* 中見出し */ --text-2xl: 32px; /* ページタイトル */ --text-3xl: 42px; /* セクションタイトル */ /* ───────────────────────────── 📐 Spacing Scale（余白） ───────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-30: 120px; /* ───────────────────────────── 📐 Layout ───────────────────────────── */ --max-width: 1920px; --section-pad-y: var(--space-20); --section-pad-x: 250px; --section-gap: var(--space-30); --inner-pad: var(--space-20); /* ───────────────────────────── 🔘 Border Radius ───────────────────────────── */ --radius-sm: 6px; --radius: 12px; /* 汎用（カード・ボックス） */ --radius-lg: 16px; --radius-xl: 20px; --radius-full: 999px; /* ピル型 */ --inner-radius: var(--radius-lg); /* base.css 互換 */ /* ───────────────────────────── 💫 Shadow ───────────────────────────── */ --shadow-sm: 0 2px 8px rgba(180, 80, 30, 0.10); --shadow-md: 0 6px 24px rgba(180, 80, 30, 0.16); --shadow-lg: 0 16px 56px rgba(180, 80, 30, 0.22); --shadow-card: 0 16px 56px rgba(180, 80, 30, 0.22), 0 4px 12px rgba(180, 80, 30, 0.14); /* ───────────────────────────── ⚡ Transition ───────────────────────────── */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.35s ease; /* ───────────────────────────── ✨ Easing — 世界観のための気持ちいい動き ───────────────────────────── */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* 弾性のあるホバー */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* やわらかフェード */ --ease-magic: cubic-bezier(0.65, 0, 0.35, 1); /* 魔法っぽい滑らか */ --ease-breathe: cubic-bezier(0.45, 0, 0.55, 1); /* 呼吸の往復 */ /* ───────────────────────────── 🌙 Time-of-day Tints（時間帯フィルタ） body.atmosphere--{morning|day|evening|night} で切替 ───────────────────────────── */ --tint-morning: rgba(255, 235, 220, 0.06); /* 薄い朝焼け */ --tint-day: rgba(255, 255, 255, 0.0); /* 透明（無干渉） */ --tint-evening: rgba(255, 180, 130, 0.10); /* オレンジの夕焼け */ --tint-night: rgba(50, 25, 10, 0.10); /* 夜の燠火ブラウンを薄く重ねる */ /* ───────────────────────────── 🌸 Layer (z-index) ───────────────────────────── */ --z-particles: 1; /* 環境エフェクト（最背面寄り） */ --z-content: 10; /* 通常コンテンツ */ --z-header: 50; /* ヘッダー */ --z-modal: 100; /* モーダル */ --z-tooltip: 200; /* ツールチップ */ /* ───────────────────────────── 📱 Responsive Breakpoints ※ CSS カスタムメディアは build ツール不要のコメント管理方式を採用。 @media ブロックには必ず /* bp-xxx */ コメントを付けること。 ───────────────────────────── */ /* --bp-tablet-landscape : 1024px タブレット横置き / 2カラム→1カラム --bp-tablet : 900px タブレット縦置き / グリッド縮小 --bp-phone-lg : 680px 大型スマホ / 1カラム化 --bp-phone : 520px 標準スマホ / 余白・文字縮小 --bp-phone-sm : 480px 小型スマホ / モーダル全画面など */ /* ───────────────────────────── 🔗 互換エイリアス（既存コードとの後方互換） ───────────────────────────── */ --brand: var(--color-brand-primary); --brand2: var(--color-brand-deep); --link-color: var(--color-brand-primary); --link-hover: var(--color-brand-deep); --link-hover-soft: var(--color-brand-light); --muted: var(--color-text-muted); }