/* ============================================================================ WEB先案内 — Brand Tokens (shared across .blog / .store / .com) v2 2026-05-28 設計原則: - !important は使わない - ハードコード色は :root 変数経由のみ - 暖色トーンを基準（紙的・誠実・しなやか） - ダーク対応は html[data-theme="dark"] と @media (prefers-color-scheme: dark) で二重対応 ============================================================================ */ :root { /* Color palette — light mode (warm, paper-like) */ --c-ink: #1B2547; /* primary navy — body text, dark CTAs */ --c-ink-soft: #283464; --c-ink-mute: #4A546A; --c-paper: #FFFFFF; --c-mist: #F6F9FE; /* cool blue-white — section background (ユーザー指定値) */ --c-mist-2: #E5E1D6; /* warm beige — borders, subtle dividers */ --c-mist-yellow: #FFF8E1; /* rare warm callout */ --c-border: #E5E1D6; --c-border-soft: #EDE9DD; --c-text: #1B2547; --c-text-mute: #4A5570; --c-text-dim: #8A93B1; /* Accent / Emphasis */ --c-accent: #FF6F3D; /* brand orange — actions, numbers */ --c-accent-soft: #FFE2D2; --c-accent-deep: #D45417; /* Auxiliary palette */ --c-highlight: #FBF3D8; /* yellow underline marker — never as fill */ --c-emergency: #DC2626; /* emergency LP only */ --c-emergency-bg: #FEE2E2; --c-sage: #5C7556; --c-sage-bg: #EAF0E5; --c-crimson: #9B2D2D; --c-crimson-bg: #FBEEEC; /* State colors (semantic aliases) */ --c-success: var(--c-sage); --c-success-bg: var(--c-sage-bg); --c-warning: #E5BC53; --c-warning-bg: #FFF8C2; --c-danger: var(--c-crimson); --c-danger-bg: var(--c-crimson-bg); --c-info: #3D5BBF; --c-info-bg: #DBE6FA; /* Motion */ --dur-instant: 60ms; --dur-fast: 150ms; --dur: 240ms; --dur-slow: 420ms; --dur-deliberate: 720ms; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out-expo: cubic-bezier(.19, 1, .22, 1); --ease-in-out-quad: cubic-bezier(.45, 0, .55, 1); --ease-bounce-soft: cubic-bezier(.34, 1.56, .64, 1); /* Focus ring */ --focus-ring-width: 2px; --focus-ring-color: var(--c-accent); --focus-ring-offset: 3px; /* Radius scale */ --r-xs: 4px; --r-sm: 8px; --r: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 9999px; /* Layout tokens (navigator 整合) — コンテナ最大幅 + 流動ガター */ --container: 1200px; --gutter: clamp(1rem, .6rem + 2vw, 2rem); /* Shadow scale (warm-tinted) */ --shadow-sm: 0 1px 2px rgba(27, 37, 71, .06); --shadow: 0 4px 14px rgba(27, 37, 71, .08); --shadow-md: 0 10px 28px rgba(27, 37, 71, .10); --shadow-lg: 0 22px 50px rgba(27, 37, 71, .14); --shadow-glow-accent: 0 14px 36px rgba(255, 111, 61, .12); /* Text width */ --measure-narrow: 52ch; --measure: 65ch; --measure-wide: 80ch; /* Section spacing (fluid) */ --section-y: clamp(3rem, 2rem + 4.5vw, 5.5rem); --section-y-tight: clamp(2rem, 1.5rem + 3vw, 3.5rem); /* Type scale (fluid) */ --fs-xs: 13px; --fs-sm: 15px; --fs-base: clamp(16px, 1rem + 0.2vw, 17px); --fs-lede: clamp(17px, 1.05rem + 0.4vw, 20px); --fs-h3: clamp(20px, 1.2rem + 0.6vw, 24px); --fs-h2: clamp(26px, 1.4rem + 1.4vw, 40px); --fs-h1: clamp(30px, 1.6rem + 2vw, 48px); /* Font family */ --ff-sans: "M PLUS 1", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ff-mono: "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Invariant brand colors — テーマ反転に影響されない固定色（CTA bg・ロゴ背景等用） */ --c-brand-navy: #1B2547; /* always-dark navy（テーマ問わず濃色のまま）*/ --c-brand-navy-soft: #243149; /* navy をやや明るくしたバリエーション */ --c-brand-navy-deep: #0F1626; /* navy をやや暗くしたバリエーション */ --c-on-brand-navy: #FFFFFF; /* navy 上の文字色（常に白）*/ --c-on-accent: #FFFFFF; /* accent 上の文字色（常に白）*/ /* .blog (navigator) のフッター見出しで使われている黄色アクセント */ --c-yellow: #FED800; } /* ---------------------------------------------------------------------------- Dark mode redefinitions ---------------------------------------------------------------------------- */ html[data-theme="dark"] { --c-ink: #E8EEF7; --c-ink-soft: #C9D2E3; --c-ink-mute: #95A0BA; --c-paper: #0F1626; --c-mist: #1F1B17; --c-mist-2: #2A2520; --c-mist-yellow: #2A2515; --c-border: #2A3550; --c-border-soft: #1F2940; --c-text: #E8EEF7; --c-text-mute: #9A8F7E; --c-text-dim: #6F7A93; --c-accent: #FF8A65; --c-accent-soft: #4A2814; --c-accent-deep: #FFB070; --c-highlight: #3A3318; --c-emergency: #F87171; --c-emergency-bg: #2C1A18; --c-shadow-glow-accent: 0 14px 36px rgba(255, 138, 101, .22); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --shadow: 0 4px 14px rgba(0, 0, 0, .35); --shadow-md: 0 10px 28px rgba(0, 0, 0, .42); --shadow-lg: 0 22px 50px rgba(0, 0, 0, .55); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --c-ink: #E8EEF7; --c-ink-soft: #C9D2E3; --c-ink-mute: #95A0BA; --c-paper: #0F1626; --c-mist: #1F1B17; --c-mist-2: #2A2520; --c-mist-yellow: #2A2515; --c-border: #2A3550; --c-border-soft: #1F2940; --c-text: #E8EEF7; --c-text-mute: #9A8F7E; --c-text-dim: #6F7A93; --c-accent: #FF8A65; --c-accent-soft: #4A2814; --c-accent-deep: #FFB070; --c-highlight: #3A3318; --c-emergency: #F87171; --c-emergency-bg: #2C1A18; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --shadow: 0 4px 14px rgba(0, 0, 0, .35); --shadow-md: 0 10px 28px rgba(0, 0, 0, .42); --shadow-lg: 0 22px 50px rgba(0, 0, 0, .55); } } /* ---------------------------------------------------------------------------- Motion safe defaults ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --dur-deliberate: 0ms; } *, *::before, *::after { animation-duration: 0ms; animation-iteration-count: 1; transition-duration: 0ms; scroll-behavior: auto; } } /* ---------------------------------------------------------------------------- Global focus visible ---------------------------------------------------------------------------- */ :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }