/* ============================================================ * MoAI ブランド CSS カスタムプロパティ（生成物・手で編集しない） * 生成元: projects/moai-soumu/brand/build-brand-tokens.py * version 2.0.0 / 2026-07-29 / 版管理: コーポレート本部 * * 使い方: 各プロダクトはこのファイルを読み込み、独自の色を直書きせず * var(--moai-*) を参照する。事業部の個性は accent と明度で出す。 * ============================================================ */ :root { /* --- brand green scale (公式ロゴ色相 160.6° を固定) --- */ --moai-green-50: #f2fbf8; --moai-green-100: #e2f6ef; --moai-green-200: #c6eee1; --moai-green-300: #a9e2d0; --moai-green-400: #8fd3bd; --moai-green-500: #5bb89a; /* ★公式ロゴ色 */ --moai-green-600: #41a786; --moai-green-700: #308f71; --moai-green-800: #23745a; --moai-green-900: #1a5341; --moai-green-950: #13372b; /* --- ink scale --- */ --moai-ink-50: #f5f8f7; --moai-ink-100: #e1eae8; --moai-ink-200: #bdd0cc; --moai-ink-300: #88aaa3; --moai-ink-400: #618980; --moai-ink-500: #4f7069; --moai-ink-600: #405954; --moai-ink-700: #2e403c; --moai-ink-800: #22302d; --moai-ink-900: #17211f; /* --- cream (paper) --- */ --moai-cream-50: #fffdfb; --moai-cream-100: #fcf2eb; --moai-cream-200: #f5e6da; --moai-cream-300: #ecd8c8; /* --- accent (base=装飾 / strong=文字にも使える) --- */ --moai-lavender: #c9b8f0; --moai-lavender-strong: #6d47c2; --moai-rose: #f5b8c8; --moai-rose-strong: #b83d5d; --moai-gold: #f5d76e; --moai-gold-strong: #7a6829; --moai-blue: #5ba4d9; --moai-blue-strong: #336e99; --moai-peach: #ffe5d4; --moai-peach-strong: #995b33; --moai-coral: #e8896b; --moai-coral-strong: #a85338; /* --- semantic --- */ --moai-success: #5bb89a; --moai-success-strong: #23745a; --moai-info: #5ba4d9; --moai-info-strong: #336e99; --moai-warning: #f5d76e; --moai-warning-strong: #7a6829; --moai-danger: #f5b8c8; --moai-danger-strong: #b83d5d; /* --- role (light) --- */ --moai-brand: #5bb89a; --moai-action: #23745a; --moai-action-hover: #1a5341; --moai-action-subtle: #e2f6ef; --moai-bg: #fcf2eb; --moai-bg-raised: #ffffff; --moai-bg-sunken: #f5e6da; --moai-text: #22302d; --moai-text-strong: #17211f; --moai-text-muted: #4f7069; --moai-text-on-action: #ffffff; --moai-border: #bdd0cc; --moai-border-strong: #618980; --moai-focus: #23745a; --moai-accent: #5bb89a; --moai-accent-strong: #23745a; /* --- typography --- */ --moai-font-display: 'Nunito', 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif; --moai-font-body: 'Noto Sans JP', 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif; --moai-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --moai-text-display: clamp(2.2rem, 5vw, 3.2rem); --moai-text-h1: 2.25rem; --moai-text-h2: 1.75rem; --moai-text-h3: 1.375rem; --moai-text-body: 1rem; --moai-text-small: 0.875rem; --moai-text-caption: 0.8125rem; --moai-leading-tight: 1.25; --moai-leading-heading: 1.4; --moai-leading-body: 1.8; /* --- shape --- */ --moai-radius-sm: 8px; --moai-radius-md: 14px; --moai-radius-lg: 20px; --moai-radius-pill: 999px; --moai-shadow-sm: 0 1px 2px rgba(44,62,58,.06); --moai-shadow-md: 0 4px 16px rgba(44,62,58,.08); --moai-shadow-lg: 0 12px 32px rgba(44,62,58,.10); /* --- space --- */ --moai-space-1: 4px; --moai-space-2: 8px; --moai-space-3: 12px; --moai-space-4: 16px; --moai-space-6: 24px; --moai-space-8: 32px; --moai-space-12: 48px; --moai-space-16: 64px; --moai-space-20: 80px; --moai-space-24: 96px; /* --- motion --- */ --moai-duration-fast: 0.15s; --moai-duration-base: 0.3s; --moai-duration-slow: 0.4s; --moai-easing: cubic-bezier(.4,0,.2,1); } /* ── テーマ契約 ────────────────────────────────────────── * 既定は【ライト】。MoAI は明色基調のブランドで、ダークは既定ではない。 * ダークにするには、そのプロダクトが明示的に宣言する: * … 常にダーク * … OS 設定に追従（オプトイン） * 何も書かなければライト。以前は OS 追従を既定にしていたため、 * ガイドライン（明色基調）と CSS の挙動が矛盾していた。 * ------------------------------------------------------- */ [data-theme="dark"] { --moai-brand: #8fd3bd; --moai-action: #8fd3bd; --moai-action-hover: #a9e2d0; --moai-action-subtle: #13372b; --moai-bg: #0f1714; --moai-bg-raised: #16211d; --moai-bg-sunken: #0a100e; --moai-text: #e6efec; --moai-text-strong: #ffffff; --moai-text-muted: #88aaa3; --moai-text-on-action: #13372b; --moai-border: #243530; --moai-border-strong: #334a43; --moai-focus: #8fd3bd; --moai-accent: #8fd3bd; --moai-accent-strong: #a9e2d0; } @media (prefers-color-scheme: dark) { [data-theme="auto"] { --moai-brand: #8fd3bd; --moai-action: #8fd3bd; --moai-action-hover: #a9e2d0; --moai-action-subtle: #13372b; --moai-bg: #0f1714; --moai-bg-raised: #16211d; --moai-bg-sunken: #0a100e; --moai-text: #e6efec; --moai-text-strong: #ffffff; --moai-text-muted: #88aaa3; --moai-text-on-action: #13372b; --moai-border: #243530; --moai-border-strong: #334a43; --moai-focus: #8fd3bd; --moai-accent: #8fd3bd; --moai-accent-strong: #a9e2d0; } } /* ネイティブ部品（フォーム・スクロールバー）も同じ明暗に揃える */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } [data-theme="auto"] { color-scheme: light dark; } /* a11y: 動きを減らす設定を必ず尊重する（ブランド規範の必須項目） */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }