/* Okikaze FORCE skin — injected first into every hosted page's , but unlike * okikaze-base.css this WINS over the page's own CSS (via !important) so all pages * share one identity. Only THEME-level properties are forced (canvas, text/heading * colours, fonts, accents, chrome backgrounds); the page keeps its own LAYOUT * (spacing, widths, structure). System fonts only — no external requests. */ :root { color-scheme: light dark; --okz-bg: oklch(0.960 0.022 66); --okz-surface: oklch(0.990 0.012 72); --okz-surface-2: oklch(0.970 0.018 68); --okz-ink: oklch(0.28 0.02 50); --okz-ink-soft: oklch(0.45 0.02 52); --okz-muted: oklch(0.58 0.018 55); --okz-line: oklch(0.89 0.016 66); --okz-accent: oklch(0.63 0.17 42); --okz-accent-strong: oklch(0.57 0.17 40); --okz-accent-ink: oklch(0.50 0.16 40); --okz-on-accent: oklch(0.99 0.01 80); --okz-font-brand: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, sans-serif; --okz-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", sans-serif; --okz-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --okz-r-sm: 9px; --okz-r-md: 14px; } @media (prefers-color-scheme: dark) { :root { --okz-bg: oklch(0.30 0.014 255); --okz-surface: oklch(0.355 0.014 255); --okz-surface-2: oklch(0.40 0.014 255); --okz-ink: oklch(0.94 0.008 250); --okz-ink-soft: oklch(0.82 0.010 250); --okz-muted: oklch(0.70 0.010 255); --okz-line: oklch(0.46 0.014 255); --okz-accent: oklch(0.70 0.16 46); --okz-accent-strong: oklch(0.76 0.14 47); --okz-accent-ink: oklch(0.84 0.13 52); --okz-on-accent: oklch(0.20 0.02 50); } } /* ---- forced theme skin (wins over the page) ---- */ html, body { background: var(--okz-bg) !important; background-image: none !important; color: var(--okz-ink) !important; font-family: var(--okz-font-body) !important; } /* Structural chrome + common container wrappers give up their own bands and inherit the Okikaze canvas — this is what keeps dark mode coherent. Their padding/margins (the layout) are untouched. */ header, footer, main, article, section, aside, nav, figure, [class*="container"], [class*="wrapper"], [class*="card"], [class*="hero"], [class*="banner"] { background: transparent !important; background-image: none !important; } h1, h2, h3, h4, h5, h6 { font-family: var(--okz-font-brand) !important; color: var(--okz-ink) !important; } p, li, dd, dt, figcaption, td, th, blockquote, .subtitle, small { color: var(--okz-ink) !important; } .subtitle, small, figcaption { color: var(--okz-ink-soft) !important; } a { color: var(--okz-accent-ink) !important; } a:hover { color: var(--okz-accent-strong) !important; } blockquote { border-inline-start: 3px solid var(--okz-accent) !important; color: var(--okz-ink-soft) !important; } hr { border-color: var(--okz-line) !important; } :not(pre) > code, pre { background: var(--okz-surface-2) !important; border: 1px solid var(--okz-line) !important; color: var(--okz-ink) !important; } table th, table td { border-color: var(--okz-line) !important; } table th { background: var(--okz-surface-2) !important; } button, .button, [role="button"], input[type="submit"] { background: var(--okz-accent) !important; color: var(--okz-on-accent) !important; border-color: transparent !important; } input, select, textarea { background: var(--okz-surface) !important; color: var(--okz-ink) !important; border-color: var(--okz-line) !important; } img, video, svg { max-width: 100%; height: auto; }