/* ========================================= Design Tokens ========================================= */ :root { /* ========================= * テーマ：デフォルトテーマ（デフォルト） * ========================= */ --primary-light: #66B3FF; --primary-main: #4785FF; --primary-dark: #4285FF; --secondary-light: #7B9BFF; --secondary-main: #6B8BFF; --secondary-dark: #5471D1; /* Neutral Colors */ --gray-light: #FFF7ED; --gray-dark: #78716C; --black: #292524; --white: #FFFFFF; /* Link Color */ --link-color: #EA580C; } /* ========================= * テーマ：ホワイト * 使用方法: * ========================= */ [data-theme="fmmie"] { /* Primary Colors */ --primary-light: #88fbff; --primary-dark: rgb(60, 133, 143); --primary-main: #00d0b0; --primary-title: #1497a8; --secondary-light: #4478e7; --secondary-main: #5471d1; --secondary-dark: #0e46af; /* Neutral Colors */ --gray-light: #FFF7ED; --gray-dark: #78716C; --black: #292524; --white: #FFFFFF; /* Link Color */ --link-color: #eb6016; } /* ========================= * テーマ：ホワイト * 使用方法: * ========================= */ [data-theme="white"] { /* Primary Colors */ --primary-main: #dadada; --primary-light: #f3f3f3; --primary-dark: #7c7c7c; /* Secondary Colors */ --secondary-main: #a8b3b6; --secondary-light: #c9d9db; --secondary-dark: #5d696d; /* Neutral Colors */ --gray-light: #FFF7ED; --gray-dark: #78716C; --black: #292524; --white: #FFFFFF; /* Link Color */ --link-color: #EA580C; } /* ========================= * テーマ：ダイナミックオレンジ * 使用方法: * ========================= */ [data-theme="orange"] { /* Primary Colors */ --primary-main: #d14c04; --primary-light: #FB923C; --primary-dark: #f36229; /* Secondary Colors */ --secondary-main: #0891B2; --secondary-light: #22D3EE; --secondary-dark: #0E7490; /* Neutral Colors */ --gray-light: #FFF7ED; --gray-dark: #78716C; --black: #292524; --white: #FFFFFF; /* Link Color */ --link-color: #EA580C; } /* ========================= * テーマ：モダンブルー * 使用方法: * ========================= */ [data-theme="blue"] { /* Primary Colors */ --primary-main: #2563EB; --primary-light: #60A5FA; --primary-dark: #1E40AF; /* Secondary Colors */ --secondary-main: #10B981; --secondary-light: #34D399; --secondary-dark: #059669; /* Neutral Colors */ --gray-light: #F3F4F6; --gray-dark: #6B7280; --black: #111827; --white: #FFFFFF; /* Link Color */ --link-color: #2563EB; } /* ========================= * テーマ：エレガントパープル * 使用方法: * ========================= */ [data-theme="purple"] { /* Primary Colors */ --primary-main: #7C3AED; --primary-light: #A78BFA; --primary-dark: #5B21B6; /* Secondary Colors */ --secondary-main: #EC4899; --secondary-light: #F472B6; --secondary-dark: #BE185D; /* Neutral Colors */ --gray-light: #F5F3FF; --gray-dark: #6B7280; --black: #1F2937; --white: #FFFFFF; /* Link Color */ --link-color: #7C3AED; } [data-theme="warm-orange"] { /* Primary Colors */ --primary-main: #F97316; --primary-light: #FB923C; --primary-dark: #C2410C; /* Secondary Colors */ --secondary-main: #F59E0B; --secondary-light: #FBBF24; --secondary-dark: #D97706; /* Neutral Colors */ --gray-light: #FEF3C7; --gray-dark: #92400E; --black: #451A03; --white: #FFFBEB; /* Link Color */ --link-color: #EA580C; } [data-theme="rose"] { /* Primary Colors */ --primary-main: #BE185D; --primary-light: #F472B6; --primary-dark: #9F1239; /* Secondary Colors */ --secondary-main: #B45309; --secondary-light: #F59E0B; --secondary-dark: #92400E; /* Neutral Colors */ --gray-light: #FEF3C7; --gray-dark: #78716C; --black: #57534E; --white: #FEF2F2; /* Link Color */ --link-color: #BE185D; } /* ========================= * 共通変数（全テーマ共通） * ========================= */ :root { /* ========================= * 固定カラー集 * ========================= */ /* Accent Palette (FM三重) - 廃止予定: --brand-xxx は --primary-main / --secondary-main に移行 */ /* --brand-blue: #4E7AFF; → --primary-main に統合 */ /* --brand-orange: #F8772E; → --secondary-main に統合 */ --brand-red: #E23C39; /* --color-danger で使用中 */ /* --brand-pink: #d13b81; → --primary-main に統合 */ /* --brand-cyan: #1ABBBB; → 未使用のため削除 */ /* 既存の色トークンとの紐付け例 */ --color-bg: #ffffff; --color-bg-elevated: #edeff1; --color-fg: #111111; --color-muted: #6b7280; --color-border: #e5e7eb; /* ========================= * Semantic tokens（UI用に意味付け） * ========================= */ /* 背景・面 */ --bg-body: var(--color-bg); --bg-surface: var(--color-bg-elevated); /* カード・パネル */ --bg-surface-sub: var(--color-bg); /* セクション背景など */ /* テキスト */ --text-main: var(--color-fg); /* 黒寄りで可読性優先 */ --text-muted: var(--color-muted); --text-on-accent: #ffffff; /* アクセント上の文字色 */ /* アクション / アクセント */ --accent-primary: var(--primary-main); /* ボタン・リンクなど */ --accent-secondary: var(--secondary-main); /* サブボタン・強調 */ /* 枠線・境界 */ --border-soft: rgba(0, 0, 0, 0.08); --border-strong: var(--color-border); /* 影（参考値） */ --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08); --color-accent: var(--primary-main); --color-accent-soft: rgba(255, 163, 71, 0.12); /* primary-mainベース（オレンジテーマ） */ --color-danger: var(--brand-red); /* ========================= * フォント * ========================= */ /* Typography — Google Fonts 最適化 */ /* --font-sans: "Poppins", "Times", sans-serif; */ --font-sans: "Oswald", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* --font-sans: "Poppins", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; */ /* --font-serif: "Noto Serif JP", serif; */ --font-serif: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Fluid font sizes */ /*small*/ --font-size-base: clamp(0.95rem, 0.9rem + 0.4vw, 1.1rem); /*normal*/ /* --font-size-base: clamp(1rem, 0.8rem + 0.8vw, 1.3rem); */ /* Smaller, more compact heading scale */ --font-size-h1: clamp(1.7rem, 1.5rem + 1.6vw, 2.5rem); --font-size-h2: clamp(1.35rem, 1.2rem + 1vw, 1.85rem); --font-size-h3: clamp(1.15rem, 1.05rem + 0.6vw, 1.45rem); /* H4 & H5 は H3 と同じサイズ */ --font-size-h4: var(--font-size-h3); --font-size-h5: var(--font-size-h3); /* H6 は H3 より一回り小さく = 段落サイズと同じ */ --font-size-h6: var(--font-size-base); /* Spacing */ --space-xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem); --space-sm: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem); --space-md: clamp(1rem, 0.8rem + 0.5vw, 1.5rem); --space-lg: clamp(1.5rem, 1.2rem + 0.8vw, 2.5rem); --space-xl: clamp(2rem, 1.6rem + 1vw, 3rem); /* Layout */ --layout-max-width: 1240px; --layout-inline-padding: clamp(1rem, 3vw, 2.5rem); /* Radius */ --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; /* Shadow */ --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.08); /* Transition */ --transition-fast: 150ms ease-out; --transition-normal: 200ms ease; /* UAへのヒント（フォーム系の見た目にも影響） */ color-scheme: light dark; } /* Dark mode overrides */ @media (prefers-color-scheme: dark) { :root { /* 背景・テキストなどのベース */ --color-bg: #020617; --color-bg-elevated: #020818; --color-fg: #f9fafb; --color-muted: #9ca3af; --color-border: #1f2933; /* Brandカラーをダークモード向けに「少しだけ」明るく・柔らかく調整 */ /* --brand-blue: #60A5FA; → --primary-main に統合（廃止） */ /* --brand-orange: #FDBA74; → --secondary-main に統合（廃止） */ --brand-red: #F97373; /* 元: #B91C1C → 血の色っぽさを少し緩和（--color-danger で使用中） */ /* --brand-yellow: #FDE68A; → 未使用のため削除 */ /* --brand-green: #4ADE80; → 未使用のため削除 */ /* 再マッピング（テーマシステムが動的に変更するため、ここではフォールバックのみ） */ --color-accent: var(--primary-main); --color-accent-soft: rgba(96, 165, 250, 0.22); --color-danger: var(--brand-red); --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.9); } }