/* * Shared color theme for mujou. * * Used by both the static landing page and the Dioxus app. * Supports system preference via prefers-color-scheme and * manual override via data-theme attribute on . */ :root { /* -- Title / wordmark typography -- Shared between the static landing page and the Dioxus app so the "mujou" wordmark and Japanese subtitle render identically in both contexts. Only *size* should differ (hero vs. in-app header). Font loaded from Google Fonts CDN; see follow-up issue to self-host the .woff2 files for offline/privacy. */ --title-font: 'Noto Sans', sans-serif; --title-font-jp: 'Noto Sans JP', 'Noto Sans', sans-serif; --title-weight: 400; --title-spacing: 0.2em; --title-spacing-jp: 0.1em; /* -- Shared sizing -- */ --btn-height: 2.5rem; --toggle-inset: 0.5rem; /* theme-toggle distance from viewport edge */ --toggle-clearance: calc(var(--btn-height) + var(--toggle-inset) * 2); /* -- Light palette (default) -- */ --bg: #fafafa; --text: #1a1a1a; --text-heading: #333; --text-secondary: #555; --text-placeholder: #6b6b6b; --muted: #666; --border: #ddd; --border-muted: #ccc; --border-accent: #3b82f6; --surface: #f0f0f0; --surface-active: #e5e5e5; --rule: #999; --link-border: #ccc; --link-hover: #1a1a1a; --btn-primary: #2563eb; --btn-primary-hover: #1d4ed8; --btn-disabled: #e5e5e5; --text-disabled: #999; --text-success: #16a34a; --text-error: #dc2626; --error-bg: rgba(220, 38, 38, 0.1); --error-border: #f87171; --preview-bg: #fafafa; --preview-stroke: #1a1a1a; --backdrop: rgba(0, 0, 0, 0.2); /* -- Diagnostic overlay -- */ --diag-stroke: #1a1a1a; --diag-mst: #cc0000; --diag-start: #009933; --diag-seg-1: #cc2222; --diag-seg-2: #cc6600; --diag-seg-3: #b8a000; --diag-seg-4: #228822; --diag-seg-5: #2266cc; } [data-theme="dark"] { --bg: #171717; --text: #fafafa; --text-heading: #d4d4d4; --text-secondary: #a3a3a3; --text-placeholder: #9a9a9a; --muted: #a0a0a0; --border: #262626; --border-muted: #525252; --border-accent: #60a5fa; --surface: #262626; --surface-active: #404040; --rule: #525252; --link-border: #525252; --link-hover: #fafafa; --btn-primary: #2563eb; --btn-primary-hover: #1d4ed8; --btn-disabled: #404040; --text-disabled: #737373; --text-success: #4ade80; --text-error: #f87171; --error-bg: rgba(127, 29, 29, 0.5); --error-border: #b91c1c; --preview-bg: #171717; --preview-stroke: #fafafa; --backdrop: rgba(255, 255, 255, 0.2); /* -- Diagnostic overlay -- */ --diag-stroke: #fafafa; --diag-mst: #ff0000; --diag-start: #00cc44; --diag-seg-1: #ff3333; --diag-seg-2: #ff8800; --diag-seg-3: #ffdd00; --diag-seg-4: #33cc33; --diag-seg-5: #3399ff; } @media (min-width: 1024px) { :root { --toggle-inset: 1rem; } } /* Theme toggle button — shared appearance and position */ .theme-toggle { position: fixed; top: var(--toggle-inset); right: var(--toggle-inset); z-index: 50; -webkit-appearance: none; appearance: none; padding: 0; margin: 0; background: none; border: 1px solid var(--link-border); border-radius: 50%; width: var(--btn-height); height: var(--btn-height); cursor: pointer; color: var(--muted); display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, color 0.2s; } .theme-toggle svg { width: 1.1rem; height: 1.1rem; } .theme-toggle:hover { border-color: var(--link-hover); color: var(--text); } /* Global focus indicator for keyboard navigation (WCAG 2.4.7). Uses the theme accent color so it adapts to light/dark mode. */ :focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; } /* Respect users who prefer reduced motion (WCAG 2.2.2 / best practice). Disables animations and transitions globally so vestibular- sensitive users are not exposed to continuous motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Title wordmark — reusable classes for the "mujou" brand text. Size is intentionally omitted so each context can set its own. */ .title-brand { font-family: var(--title-font); font-weight: var(--title-weight); letter-spacing: var(--title-spacing); } .title-brand-jp { font-family: var(--title-font-jp); font-weight: var(--title-weight); letter-spacing: var(--title-spacing-jp); }