/* ========================================= variables.css - グローバルデザイントークン Persona Finder 全体で使用する共通変数 使用方法: 1. このファイルを の最初に読み込む 2. 各CSSファイルから :root ブロックを削除 3. var(--variable-name) で参照 ========================================= */ :root { /* ========================================== カラーシステム - インディゴ × コーラル ========================================== */ /* プライマリカラー */ --color-primary: #4a5568; --color-secondary: #ff6b6b; --accent-primary: #4a5568; --accent-secondary: #ff6b6b; /* グラデーション */ --gradient-accent: linear-gradient(135deg, #4a5568, #ff6b6b); --accent-gradient: linear-gradient(135deg, #4a5568, #ff6b6b); /* 背景色 */ --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: rgba(15, 20, 32, 0.96); /* テキストカラー */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-inverse: #e4f1ff; /* ボーダー */ --border: rgba(0, 0, 0, 0.08); --border-light: rgba(0, 0, 0, 0.08); --border-medium: rgba(0, 0, 0, 0.12); --border-hover: rgba(255, 107, 107, 0.4); --border-inverse: rgba(255, 255, 255, 0.08); /* アクセントカラー (透過) */ --accent-bg-subtle: rgba(74, 85, 104, 0.05); --accent-bg-light: rgba(74, 85, 104, 0.05); --accent-bg-medium: rgba(74, 85, 104, 0.1); --accent-border: rgba(74, 85, 104, 0.2); --accent-glow: rgba(255, 107, 107, 0.25); /* カードスタイル */ --card-bg: #ffffff; --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12); /* ========================================== スペーシングシステム (8px base) ========================================== */ --space-1: 0.5rem; /* 8px */ --space-2: 0.75rem; /* 12px */ --space-3: 1rem; /* 16px */ --space-4: 1.5rem; /* 24px */ --space-5: 2rem; /* 32px */ --space-6: 3rem; /* 48px */ --space-7: 4rem; /* 64px */ --space-8: 6rem; /* 96px */ /* エイリアス (既存コードとの互換性) */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-3); --space-lg: var(--space-4); --space-xl: var(--space-5); --space-2xl: var(--space-6); --space-3xl: var(--space-7); --space-4xl: var(--space-8); /* ========================================== タイポグラフィ ========================================== */ /* フォントファミリー */ --font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace; --font-ui: Inter, "Noto Sans JP", sans-serif; /* フォントサイズ */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ /* フォントウェイト */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* 行高 */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.8; /* ========================================== ボーダー半径 ========================================== */ --radius-sm: 0.5rem; /* 8px */ --radius-md: 0.75rem; /* 12px */ --radius-lg: 1rem; /* 16px */ --radius-xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* ========================================== トランジション ========================================== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slower: 600ms cubic-bezier(0.4, 0, 0.2, 1); /* ========================================== シャドウ ========================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1); --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15); --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.2); /* アクセント付きシャドウ */ --shadow-accent-sm: 0 2px 8px rgba(255, 107, 107, 0.15); --shadow-accent-md: 0 4px 16px rgba(255, 107, 107, 0.25); --shadow-accent-lg: 0 8px 24px rgba(255, 107, 107, 0.35); /* ========================================== Z-index スケール ========================================== */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-notification: 800; --z-header: 1000; /* ========================================== レイアウト ========================================== */ --container-max-width: 1200px; --container-padding: var(--space-4); --header-height: 72px; --footer-padding-y: 80px; --footer-padding-x: 24px; --footer-gap: 60px; /* ========================================== ヘッダー専用 ========================================== */ --header-bg: rgba(20, 28, 42, 0.85); --header-bg-transparent: rgba(20, 28, 42, 0); --header-border: rgba(255, 255, 255, 0.08); --header-text-main: #e4f1ff; --header-text-sub: #a7b6d4; /* ========================================== フッター専用 ========================================== */ --footer-bg: rgba(15, 20, 32, 0.96); --footer-bg-solid: #0f1420; --footer-border: rgba(255, 255, 255, 0.08); --footer-text-primary: #e4f1ff; --footer-text-secondary: #a7b6d4; --footer-text-muted: #6b7a99; } /* ========================================== ダークモード対応 (将来の拡張用) ========================================== */ @media (prefers-color-scheme: dark) { :root { --bg-primary: #0f1420; --bg-secondary: #1a1f2e; --text-primary: #e4f1ff; --text-secondary: #a7b6d4; --text-muted: #7b8aa8; --card-bg: #1a1f2e; --border: rgba(255, 255, 255, 0.08); --border-light: rgba(255, 255, 255, 0.08); --border-medium: rgba(255, 255, 255, 0.12); } } /* ========================================== ハイコントラストモード対応 ========================================== */ @media (prefers-contrast: high) { :root { --border: rgba(0, 0, 0, 0.3); --border-light: rgba(0, 0, 0, 0.3); --border-medium: rgba(0, 0, 0, 0.5); --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); --card-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.3); } } /* ========================================== モーション削減モード対応 ========================================== */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 1ms; --transition-base: 1ms; --transition-slow: 1ms; --transition-slower: 1ms; } } /* ========================================== レスポンシブ調整 ========================================== */ /* タブレット (1024px以下) */ @media (max-width: 1024px) { :root { --container-padding: var(--space-3); } } /* モバイル (768px以下) */ @media (max-width: 768px) { :root { --space-lg: var(--space-3); --space-xl: var(--space-4); --space-2xl: var(--space-5); --space-3xl: var(--space-6); --space-4xl: var(--space-7); --footer-padding-y: 60px; --footer-padding-x: 20px; --footer-gap: 40px; --container-padding: var(--space-3); } } /* 小型モバイル (480px以下) */ @media (max-width: 480px) { :root { --space-md: var(--space-2); --space-lg: var(--space-3); --space-xl: var(--space-4); --space-2xl: var(--space-5); --space-3xl: var(--space-6); --footer-padding-y: 48px; --footer-padding-x: 16px; --container-padding: var(--space-2); } } /* 超小型モバイル (375px以下) */ @media (max-width: 375px) { :root { --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-3); --space-lg: var(--space-4); --space-xl: var(--space-4); --space-2xl: var(--space-5); --space-3xl: var(--space-6); } }