/* * テーマ（dark / light / oled）と Motion profile（lite / normal / rich）、アクセシビリティ上書き。 * / data-motion-profile / data-reduced-motion / data-reduced-transparency を * ThemeEngine と App が設定する。 * ThemeEngine.THEME_BG の値はここの --theme-bg と一致させること（コントラスト補正の基準色）。 */ :root, [data-theme='dark'] { --theme-bg: #0c201c; --theme-surface: #0c201c; --theme-surface-elevated: rgb(20 48 42 / 0.78); --theme-border: rgb(227 252 239 / 0.1); --theme-text: #e3fcef; --theme-text-muted: #87a79c; color-scheme: dark; } [data-theme='light'] { --theme-bg: #f6fffb; --theme-surface: #ffffff; --theme-surface-elevated: rgb(255 255 255 / 0.82); --theme-border: rgb(11 36 32 / 0.12); --theme-text: #0b2420; --theme-text-muted: #4f6b64; --shadow-sm: 0 2px 8px rgb(11 36 32 / 0.12); --shadow-md: 0 8px 24px rgb(11 36 32 / 0.16); --shadow-lg: 0 18px 48px rgb(11 36 32 / 0.2); color-scheme: light; } [data-theme='oled'] { --theme-bg: #000000; --theme-surface: #000000; --theme-surface-elevated: rgb(14 22 20 / 0.86); --theme-border: rgb(255 255 255 / 0.09); --theme-text: #e3fcef; --theme-text-muted: #87a79c; color-scheme: dark; } /* ---------- Motion profile（仕様 §34, §136）---------- */ [data-motion-profile='lite'] { --glass-blur: 0px; --glass-saturation: 1; --motion-scale: 1.1; } [data-motion-profile='lite'] .mh-tabbar, [data-motion-profile='lite'] .mh-island { /* blur を使わず不透明寄りにして可読性を保つ */ background: color-mix(in srgb, var(--theme-surface) 94%, transparent); } [data-motion-profile='normal'] { --glass-blur: 16px; --glass-saturation: 1.3; --motion-scale: 1; } [data-motion-profile='rich'] { --glass-blur: 26px; --glass-saturation: 1.7; --motion-scale: 1; } /* ---------- Accessibility 上書き（仕様 §38, §141）---------- */ /* Reduced Transparency: blur を切り、面を不透明に近づける */ [data-reduced-transparency='true'] { --glass-blur: 0px; --glass-saturation: 1; } [data-reduced-transparency='true'] .mh-tabbar, [data-reduced-transparency='true'] .mh-island { background: color-mix(in srgb, var(--theme-surface) 96%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; } /* * Reduced Motion: 動きを消すが「状態の意味」は失わない（仕様 §141）。 * transform/spring は使わず、短い opacity フェードだけ残す。 */ [data-reduced-motion='true'] { --motion-duration-fast: 60ms; --motion-duration-normal: 90ms; --motion-duration-slow: 120ms; --motion-spring: linear; --motion-ease-emphasized: linear; } [data-reduced-motion='true'] *, [data-reduced-motion='true'] *::before, [data-reduced-motion='true'] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }