/* Canonical sync: 06_outputs/web/studies/MK-WEB-20260527-003/tokens.css */ /* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */ /* MK-WEB-20260527-003 · 哲学 LP ×2 · DES 正本 */ /* WEB: life → [data-lane="life"] / corporate → [data-lane="corporate"] on */ /* ─── Lane A: life-philosophy (IM) ─── */ [data-lane='life'], .theme-life { --font-display: 'Shippori Mincho B1', 'Yu Mincho', serif; --font-body: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; --color-paper: #f3efe6; --color-paper-bright: #faf7f1; --color-paper-deep: #e8e2d6; --color-ink: #0f0e0d; --color-ink-soft: #2a2826; --color-muted: #6b6760; --color-accent: #9a8468; --color-accent-hover: #7d6a52; --color-accent-rose: #c3a8a6; --color-accent-slate: #7d8597; --color-rule: rgba(15, 14, 13, 0.1); --color-rule-strong: rgba(15, 14, 13, 0.16); --color-focus: #9a8468; --color-on-accent: #faf7f1; --motion-reveal-y: 12px; --motion-progress: 1; --motion-mesh: 0; --text-display: clamp(1.8rem, 4.5vw, 2.75rem); --text-body: 1rem; } /* ─── Lane B: corporate-philosophy (ARETHOS) ─── */ [data-lane='corporate'], .theme-corporate { --font-display: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', Meiryo, sans-serif; --color-paper: oklch(97% 0.01 85); --color-paper-bright: oklch(99% 0.005 90); --color-paper-deep: oklch(93% 0.02 80); --color-ink: oklch(22% 0.02 50); --color-ink-soft: oklch(38% 0.02 55); --color-muted: oklch(52% 0.02 60); --color-accent: oklch(42% 0.06 240); --color-accent-hover: oklch(36% 0.07 240); --color-accent-warm: oklch(62% 0.08 65); --color-accent-sky: oklch(94% 0.03 220); --color-rule: oklch(22% 0.02 50 / 0.08); --color-rule-strong: oklch(22% 0.02 50 / 0.14); --color-focus: oklch(42% 0.06 240); --color-on-accent: oklch(99% 0.005 90); --motion-mesh: 1; --motion-reveal-y: 16px; } /* ─── Shared (both lanes) ─── */ :root, [data-lane='life'], [data-lane='corporate'], .theme-life, .theme-corporate { --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --section-gap: clamp(4rem, 10vw, 7rem); --text-display: clamp(1.75rem, 4.2vw, 2.75rem); --text-display-s: clamp(1.35rem, 3vw, 1.9rem); --text-lead: clamp(1.05rem, 2vw, 1.2rem); --text-body: 1.0625rem; --text-small: 0.875rem; --text-caption: 0.8125rem; --max-site: min(94vw, 76rem); --max-text: 42rem; --pad: clamp(1.25rem, 4vw, 2rem); --header-h: 4.5rem; --hero-min-h: 50vh; --radius-sm: 4px; --radius-md: 12px; --radius-lg: 16px; --shadow-soft: 0 24px 48px rgba(15, 14, 13, 0.08); --shadow-lift: 0 32px 64px rgba(15, 14, 13, 0.1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-med: 480ms; --dur-slow: 720ms; color-scheme: light only; } [data-lane='corporate'] { --max-site: min(94vw, 1200px); --header-h: 4.25rem; --shadow-soft: 0 28px 56px oklch(22% 0.02 50 / 0.07); } @media (prefers-reduced-motion: reduce) { :root, [data-lane='life'], [data-lane='corporate'] { --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; --motion-mesh: 0; --motion-progress: 0; --motion-reveal-y: 0; } }