/* ============================================================ BELLA TECH — Design Tokens 全ページ共通のデザイン変数（色 / タイポ / スペース / 影 / 角丸） .theme-dark を body に付けるとダーク版に切替（トップページ用） ============================================================ */ :root { /* === Brand / Accent === */ --accent: #c4a35a; --accent-hover: #b79247; --accent-dark: #8b6914; --accent-soft: rgba(196,163,90,0.10); /* === Light theme (サブページ・ブログ・実績) === */ --bg: #fafafa; --bg-panel: #f5f5f7; --bg-card: #ffffff; --text: #0d0b09; --text-muted: #5a5a5f; --text-inverse: #fafafa; --border: #e5e5e7; --border-strong: #d2d2d7; --link: var(--accent-dark); --link-hover: var(--accent); /* === Typography === */ --font-display: 'Cormorant Garamond', 'Noto Serif JP', serif; --font-sans: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, sans-serif; --font-ui: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif; --fs-h1: clamp(36px, 5vw, 64px); --fs-h2: clamp(28px, 3.5vw, 44px); --fs-h3: clamp(20px, 2.5vw, 28px); --fs-h4: clamp(17px, 2vw, 20px); --fs-body: 16px; --fs-small: 15px; --fs-ui: 13px; --fs-label: 12px; --lh-tight: 1.1; --lh-heading: 1.25; --lh-body: 1.85; --lh-small: 1.7; --ls-label: 0.12em; --ls-ui: 0.08em; --ls-heading: -0.01em; /* === Spacing === */ --sp-section-y: clamp(72px, 10vw, 128px); --sp-block-y: clamp(40px, 6vw, 72px); --sp-card-pad: clamp(24px, 3vw, 40px); --sp-gutter: clamp(16px, 5vw, 40px); --max-width: 1120px; --max-width-narrow: 720px; /* === Radius === */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px; /* === Shadow (Apple/Stripe風の繊細なシャドウ) === */ --shadow-sm: 0 1px 2px rgba(13,11,9,0.04), 0 1px 3px rgba(13,11,9,0.03); --shadow-md: 0 4px 12px rgba(13,11,9,0.06), 0 2px 4px rgba(13,11,9,0.04); --shadow-lg: 0 16px 48px rgba(13,11,9,0.08), 0 4px 12px rgba(13,11,9,0.06); --shadow-accent: 0 6px 20px rgba(196,163,90,0.18); /* === Motion === */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 520ms; } /* === Dark theme (トップページ用) ==================================== を付けると色だけダーク版に置き換わる。タイポ・スペース・角丸は共通。 ================================================================= */ .theme-dark { --bg: #0d0b09; --bg-panel: #1a1714; --bg-card: #1a1714; --text: #f0ebe3; --text-muted: #a39e94; --text-inverse: #0d0b09; --border: #262220; --border-strong: #3a3530; --link: var(--accent); --link-hover: #e6c07d; /* ダーク背景では accent-dark は沈むので明るい方に寄せる */ --accent-dark: var(--accent); } /* ============================================================ Backward-compatible aliases 既存CSS（blog.css / services.css / about.css / style.css）が使っている旧変数名を新トークンに繋ぐ。Phase B 以降で各CSSを書き換える際に徐々に除去する。 ============================================================ */ :root, .theme-dark { --bg2: var(--bg-panel); --muted: var(--text-muted); --accent2: var(--accent-dark); --card: var(--bg-card); --light: var(--border-strong); --dark: var(--text); }