/* ============================================================ QuickCMS デザイントークン ------------------------------------------------------------ 全製品共通。パネル (cms_panels.css) とレイアウトプリセット (css/layouts/presets/*.css) はここで定義したトークンだけを参照する。 【設計方針】 1. 既存のテーマ変数 (--primary-color / --bg-color / ...) は cms_design/utils.py の generate_theme_css() が出力する。 それらは QuickGamesArena の全テーマ CSS が依存しているため 名前も意味も変更しない。ここでは「読むだけ」。 2. 派生色は color-mix() で自動生成する。前景色 (--qc-fg) を 背景に混ぜる方式なので、ライトテーマでは暗く、ダークテーマでは 明るくなり、どちらでも破綻しない。 3. base.html ではテーマ CSS より「前」に読み込む。 テーマ側や custom/ 側が上書きできる順序を保つため。 【読み込み順】 cms_tokens.css → cms_panels.css → テーマCSS → ページ固有 custom_css ============================================================ */ :root { /* -------------------------------------------------------- 1. 基底色 — テーマ変数を読む。テーマ未適用でも成立するよう フォールバック値を持たせる。 -------------------------------------------------------- */ --qc-primary: var(--primary-color, #0d6efd); --qc-secondary: var(--secondary-color, #6c757d); --qc-accent: var(--accent-color, #0dcaf0); --qc-bg: var(--bg-color, #ffffff); --qc-fg: var(--font-color, #212529); --qc-success: var(--success-color, #198754); --qc-info: var(--info-color, #0dcaf0); --qc-warning: var(--warning-color, #ffc107); --qc-danger: var(--danger-color, #dc3545); /* -------------------------------------------------------- 2. 面 (surface) — 背景に前景色を少しずつ混ぜて段階を作る。 ライト/ダークどちらのテーマでも自動的に正しい向きに動く。 -------------------------------------------------------- */ --qc-surface: var(--qc-bg); --qc-surface-alt: color-mix(in srgb, var(--qc-fg) 4%, var(--qc-bg)); --qc-surface-sunken: color-mix(in srgb, var(--qc-fg) 7%, var(--qc-bg)); --qc-surface-raised: var(--qc-bg); --qc-surface-invert: color-mix(in srgb, var(--qc-fg) 92%, var(--qc-bg)); --qc-fg-on-invert: color-mix(in srgb, var(--qc-bg) 92%, var(--qc-fg)); /* -------------------------------------------------------- 3. 文字と境界 -------------------------------------------------------- */ /* 混色比は AA から逆算している。62% では、よくある文字色（#212529 など）が 白背景に対して 3.9:1 にしかならなかった。75% で 7:1 前後、淡いグレー面 （--qc-surface-alt）に載せても 5:1 を切らない。暗いテーマでは逆に明るい方へ 寄るので、どちらの向きでも改善する。 --qc-fg-subtle は「本文より一段落とす」用途だが、45% だと 2:1 台まで 落ちて本文に使えなかったので 58% にした（白背景で 4.6:1）。 */ --qc-fg-muted: color-mix(in srgb, var(--qc-fg) 75%, var(--qc-bg)); --qc-fg-subtle: color-mix(in srgb, var(--qc-fg) 58%, var(--qc-bg)); --qc-border: color-mix(in srgb, var(--qc-fg) 14%, var(--qc-bg)); --qc-border-strong: color-mix(in srgb, var(--qc-fg) 26%, var(--qc-bg)); /* -------------------------------------------------------- 4. ブランド色の派生 -hover : 押せることが分かる程度に沈める -soft : 背景に敷ける淡い面 -on : その色の上に載せる文字色。 正確な明度判定は Python 側 (generate_theme_css) が --qc-primary-on 等を出力して上書きする。 ここでは白を既定にしておく。 -------------------------------------------------------- */ --qc-primary-hover: color-mix(in srgb, var(--qc-primary) 85%, var(--qc-fg)); --qc-primary-soft: color-mix(in srgb, var(--qc-primary) 12%, var(--qc-bg)); --qc-primary-softer: color-mix(in srgb, var(--qc-primary) 6%, var(--qc-bg)); --qc-primary-on: #ffffff; --qc-secondary-hover: color-mix(in srgb, var(--qc-secondary) 85%, var(--qc-fg)); --qc-secondary-soft: color-mix(in srgb, var(--qc-secondary) 12%, var(--qc-bg)); --qc-secondary-on: #ffffff; --qc-accent-hover: color-mix(in srgb, var(--qc-accent) 85%, var(--qc-fg)); --qc-accent-soft: color-mix(in srgb, var(--qc-accent) 14%, var(--qc-bg)); --qc-accent-on: #ffffff; /* -------------------------------------------------------- 5. 影 — 無彩色ではなくブランド色を薄く混ぜると馴染む。 モックアップ (work/mockup/*/css/style.css) の rgba(28,47,80,0.06) 系の質感に合わせている。 -------------------------------------------------------- */ --qc-shadow-color: color-mix(in srgb, var(--qc-primary) 30%, #0b1220); --qc-shadow-xs: 0 1px 2px color-mix(in srgb, var(--qc-shadow-color) 6%, transparent); --qc-shadow-sm: 0 1px 3px color-mix(in srgb, var(--qc-shadow-color) 8%, transparent); --qc-shadow-md: 0 4px 16px color-mix(in srgb, var(--qc-shadow-color) 10%, transparent); --qc-shadow-lg: 0 10px 40px color-mix(in srgb, var(--qc-shadow-color) 14%, transparent); --qc-shadow-xl: 0 20px 60px color-mix(in srgb, var(--qc-shadow-color) 18%, transparent); /* フォーカスリング — キーボード操作時に必ず見えること */ --qc-focus-ring: 0 0 0 3px color-mix(in srgb, var(--qc-primary) 40%, transparent); /* -------------------------------------------------------- 6. 角丸 -------------------------------------------------------- */ --qc-radius-xs: 4px; --qc-radius-sm: 6px; --qc-radius-md: 10px; --qc-radius-lg: 16px; --qc-radius-xl: 24px; --qc-radius-pill: 999px; /* -------------------------------------------------------- 7. 余白 — 4px グリッド -------------------------------------------------------- */ --qc-space-1: 4px; --qc-space-2: 8px; --qc-space-3: 12px; --qc-space-4: 16px; --qc-space-5: 24px; --qc-space-6: 32px; --qc-space-7: 48px; --qc-space-8: 64px; --qc-space-9: 96px; /* セクションの上下余白。モックアップの .section-pad = 80px 相当。 狭い画面では詰める（下部のメディアクエリで上書き）。 */ --qc-section-pad: 80px; --qc-section-pad-sm: 56px; --qc-gap: var(--qc-space-5); /* -------------------------------------------------------- 8. タイポグラフィ -------------------------------------------------------- */ --qc-font-base: var(--font-family-base, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif); --qc-font-head: var(--font-family-headings, var(--qc-font-base)); --qc-text-xs: 0.75rem; --qc-text-sm: 0.875rem; --qc-text-base: 1rem; --qc-text-lg: 1.125rem; --qc-text-xl: 1.375rem; --qc-text-2xl: 1.75rem; --qc-text-3xl: 2.25rem; --qc-text-4xl: 3rem; --qc-leading-tight: 1.25; --qc-leading-normal: 1.7; --qc-leading-loose: 1.9; --qc-tracking: 0.02em; /* -------------------------------------------------------- 9. モーション prefers-reduced-motion では下で無効化する。 -------------------------------------------------------- */ --qc-transition-fast: 120ms ease; --qc-transition: 200ms ease; --qc-transition-slow: 400ms ease; /* -------------------------------------------------------- 10. レイアウト -------------------------------------------------------- */ --qc-container-max: 1180px; --qc-container-narrow: 760px; --qc-z-sticky: 100; --qc-z-overlay: 1000; } /* ------------------------------------------------------------ color-mix() 非対応ブラウザ向けフォールバック。 対応ブラウザでは上の :root が勝つ（後勝ちではなく、@supports not の中でしか適用されないため）。 ------------------------------------------------------------ */ @supports not (color: color-mix(in srgb, red 50%, blue)) { :root { --qc-surface-alt: #f7f9fc; --qc-surface-sunken: #eef2f7; --qc-surface-invert: #1c2430; --qc-fg-on-invert: #f1f5f9; --qc-fg-muted: #6c757d; --qc-fg-subtle: #94a3b8; --qc-border: #e1e6ee; --qc-border-strong: #c7cfdb; --qc-primary-hover: var(--qc-primary); --qc-primary-soft: #eef4ff; --qc-primary-softer: #f6f9ff; --qc-secondary-hover: var(--qc-secondary); --qc-secondary-soft: #f1f3f5; --qc-accent-hover: var(--qc-accent); --qc-accent-soft: #e8f7fb; --qc-shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.06); --qc-shadow-sm: 0 1px 3px rgba(11, 18, 32, 0.08); --qc-shadow-md: 0 4px 16px rgba(11, 18, 32, 0.10); --qc-shadow-lg: 0 10px 40px rgba(11, 18, 32, 0.14); --qc-shadow-xl: 0 20px 60px rgba(11, 18, 32, 0.18); --qc-focus-ring: 0 0 0 3px rgba(13, 110, 253, 0.4); } } /* ------------------------------------------------------------ 狭い画面ではセクション余白を詰める ------------------------------------------------------------ */ @media (max-width: 767.98px) { :root { --qc-section-pad: 48px; --qc-section-pad-sm: 32px; --qc-gap: var(--qc-space-4); --qc-text-3xl: 1.875rem; --qc-text-4xl: 2.25rem; } } /* ------------------------------------------------------------ モーションを減らす設定を尊重する。 カウントアップやスクロール連動演出もここで止まる。 ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --qc-transition-fast: 0ms; --qc-transition: 0ms; --qc-transition-slow: 0ms; } }