/* Scoped theme — generated by `faqir theme bundle`. Do not edit; re-run the command. Every `:root` block of the 'midnight' theme below declares on [data-skin="midnight"] instead, and every `[data-theme]` block is scoped to that subtree. Link it AFTER the page's own theme; the scope selector is (0,1,0) and wins for its subtree either way. */ /* @ui:theme midnight — dark-first theme with deep navy/purple tones and vibrant cyan accents */ /* ── Light Mode Overrides ── */ /* Cool-shifted surfaces with deep blue-violet primary */ [data-skin="midnight"] { /* Restated from base/reset.css, which declares these on `:root`, `html` and `body` — elements a scoped subtree is not. Each resolves its var() at the element that declares it, so without this the island would inherit the host page's ink, ground, face and material. `color-scheme` is what light-dark() reads; a `data-theme` inside the island still overrides it. */ /* No color-scheme: a dual theme follows the page's, inherited like any element's — a data-theme on the island, or around it, picks the side. */ color: var(--color-fg); background-color: var(--color-bg); background-image: var(--texture-page); font-family: var(--font-body); /* The token layer's colour aliases, for the same reason: declared on `:root` they hold the host page's colours. The theme's own values below win. */ --focus-ring-color: var(--color-ring); --stripe-bg: var(--color-bg-subtle); --selection-bg: var(--color-primary-subtle); --selection-fg: var(--color-fg); --card-border: var(--color-surface-1-border); --card-bg: var(--color-surface-1); --input-border: var(--color-border); --input-bg: var(--color-bg); --input-bg-filled: var(--color-bg-subtle); --input-fill: var(--input-bg); --switch-bg: var(--color-bg-muted); --panel-bg: var(--color-bg); --doc-legal-color: var(--color-fg-muted); --kv-label-color: var(--doc-legal-color); --kv-value-color: var(--color-fg); --callout-bg: var(--color-bg-subtle); --callout-fg: var(--color-fg); --image-border: var(--color-border); --image-caption-color: var(--doc-legal-color); --field-label-color: var(--color-fg); --field-description-color: var(--color-fg-muted); --field-error-color: var(--color-destructive); --field-validating-color: var(--color-fg-muted); --field-required-color: var(--color-destructive); --page-break-screen-color: var(--color-border); --page-break-screen-label-color: var(--color-fg-muted); --stat-label-color: var(--color-fg-muted); --stat-change-positive: var(--color-success); --stat-change-negative: var(--color-destructive); /* ── Surfaces ── */ --color-bg: oklch(0.97 0.008 270); /* cool-tinted white */ --color-bg-subtle: oklch(0.94 0.012 270); /* subtle blue-gray */ --color-bg-muted: oklch(0.91 0.016 270); /* muted cool surface */ --color-surface-1: var(--color-bg-subtle); --color-surface-2: var(--color-bg-muted); --color-surface-1-border: var(--color-border); --color-surface-2-border: var(--color-border-strong); --color-fg: oklch(0.18 0.04 280); /* deep blue-black */ --color-fg-muted: oklch(0.45 0.03 270); /* muted blue-gray */ --color-fg-subtle: oklch(0.58 0.025 270); /* subtle blue-gray */ /* ── Interactive: Primary (blue-violet) ── */ --color-primary: oklch(0.50 0.24 280); /* deep blue-violet */ --color-primary-hover: oklch(0.45 0.26 280); --color-primary-active: oklch(0.40 0.24 280); --color-primary-fg: white; --color-primary-subtle: oklch(0.92 0.06 280); /* ── Interactive: Secondary ── */ --color-secondary: oklch(0.93 0.014 270); --color-secondary-hover: oklch(0.89 0.018 270); --color-secondary-fg: oklch(0.20 0.04 280); /* ── Interactive: Destructive ── */ --color-destructive: oklch(0.53 0.22 15); --color-destructive-hover: oklch(0.50 0.24 15); --color-destructive-fg: white; --color-destructive-subtle: oklch(0.94 0.04 15); /* ── Feedback ── */ --color-success: oklch(0.48 0.18 160); --color-success-subtle: oklch(0.94 0.04 160); --color-warning: oklch(0.51 0.15 75); --color-warning-subtle: oklch(0.94 0.04 75); --color-info: oklch(0.50 0.20 250); --color-info-subtle: oklch(0.94 0.04 250); /* ── Borders ── */ --color-border: oklch(0.88 0.014 270); --color-border-strong: oklch(0.80 0.02 270); --color-ring: oklch(0.50 0.24 280); /* ══════════════════════════════════════════════════════════════════════ The identity, in tokens. This theme's subject is a lit interface in a dark room; until 1.1A-15 it could only say so in colour. [1.1A-15] ══════════════════════════════════════════════════════════════════════ */ /* ── Type voice: one weight lighter than the registry's ── 700 blooms on a luminous accent against a near-black surface — the strokes thicken optically and a heading starts to smear. 600 is the weight a dark-first product sets its titles at, and stating it here is what makes `type.voice.weight` derive `semibold`. Light mode follows, because a theme has one voice. */ --heading-weight: var(--weight-semibold); /* ── Material: the grid behind the glass ── A faint rule grid on the PAGE (`--texture-page`), not on the things sitting on it: the subject is the instrument panel this UI is mounted in, and a grid behind every card would fight the data on it. `currentColor` at 12% alpha, so it tints itself from the page's own foreground and disappears entirely on paper (the print rule in `document.css` re-declares `background` as a shorthand). */ --texture-page: var(--texture-grid); /* ── Focus: a glow, not just a ring ── `--focus-shadow` is drawn BEHIND the outline by `base/reset.css` and by all thirteen controls that paint their own ring (1.1A-02), so this one declaration haloes every focusable surface. Mixed from `--color-ring` rather than named, so the halo is the accent in whichever scheme is on screen and can never drift from the ring it sits behind. */ --focus-shadow: 0 0 0 var(--space-1) color-mix(in oklch, var(--color-ring) 35%, transparent); /* ── Depth: layered, and tinted through the channel ── Every step is cast in `--shadow-color` (1.1A-04 — bare OKLCH channels, so each step keeps its own alpha), which replaces twenty literal navies with one declaration per scheme. The geometry is deliberately deeper than the base ramp's: the md step blurs past the `layered` band, which is what a lit panel floating over a dark room looks like, and it matches the dark ramp this theme was designed in rather than contradicting it. */ --shadow-color: 0.20 0.05 275; --shadow-xs: 0 1px 3px oklch(var(--shadow-color) / 0.08); --shadow-sm: 0 2px 6px oklch(var(--shadow-color) / 0.10), 0 1px 2px oklch(var(--shadow-color) / 0.06); --shadow-md: 0 6px 14px oklch(var(--shadow-color) / 0.10), 0 2px 4px oklch(var(--shadow-color) / 0.06); --shadow-lg: 0 14px 28px oklch(var(--shadow-color) / 0.12), 0 4px 8px oklch(var(--shadow-color) / 0.06); --shadow-xl: 0 28px 56px oklch(var(--shadow-color) / 0.14), 0 8px 16px oklch(var(--shadow-color) / 0.07); } /* A data-theme="light" on the scope root keeps the island light inside a dark page — reset.css has no light rule, so it would inherit the page's dark. */ [data-skin="midnight"][data-theme="light"] { color-scheme: light; } [data-skin="midnight"], [data-skin="midnight"][data-theme], [data-skin="midnight"] [data-theme], [data-theme] [data-skin="midnight"]:not([data-theme]) { /* ── Decoration: selection wears the accent ── Cyan in this theme's primary design target, blue-violet in light — one declaration, because `--color-primary` already follows the scheme. On `:root, [data-theme]`: the token layer re-resolves these aliases on every scheme island (tokens/aliases.css), so a `:root`-only override would fall back to the default inside a nested `data-theme` region. */ --selection-bg: var(--color-primary); --selection-fg: var(--color-primary-fg); } /* ── Dark Mode (primary design target) ── */ /* Deep navy backgrounds, vibrant cyan primary, purple-tinted shadows */ [data-skin="midnight"][data-theme="dark"], [data-skin="midnight"] [data-theme="dark"], [data-theme="dark"] [data-skin="midnight"]:not([data-theme]) { /* ── Surfaces (deep navy) ── */ --color-bg: oklch(0.12 0.04 275); /* very dark navy */ --color-bg-subtle: oklch(0.16 0.05 275); /* dark navy */ --color-bg-muted: oklch(0.21 0.05 275); /* muted navy */ --color-surface-1: var(--color-bg-subtle); --color-surface-2: var(--color-bg-muted); --color-surface-1-border: var(--color-border); --color-surface-2-border: var(--color-border-strong); --color-fg: oklch(0.95 0.01 260); /* near-white, cool tint */ --color-fg-muted: oklch(0.65 0.03 270); /* muted cool gray */ --color-fg-subtle: oklch(0.50 0.03 270); /* subtle cool gray */ /* ── Interactive: Primary (vibrant cyan) ── */ --color-primary: oklch(0.75 0.16 195); /* vibrant cyan */ --color-primary-hover: oklch(0.82 0.14 195); /* lighter cyan */ --color-primary-active: oklch(0.88 0.10 195); /* lightest cyan */ --color-primary-fg: oklch(0.12 0.04 275); /* dark navy for contrast */ --color-primary-subtle: oklch(0.21 0.048 195); /* ── Interactive: Secondary ── */ --color-secondary: oklch(0.24 0.05 275); --color-secondary-hover: oklch(0.30 0.05 275); --color-secondary-fg: oklch(0.90 0.01 260); /* ── Interactive: Destructive ── */ --color-destructive: oklch(0.66 0.22 15); --color-destructive-hover: oklch(0.72 0.20 15); --color-destructive-fg: oklch(0.12 0.04 275); --color-destructive-subtle: oklch(0.21 0.066 15); /* ── Feedback ── */ --color-success: oklch(0.72 0.18 160); --color-success-subtle: oklch(0.21 0.054 160); --color-warning: oklch(0.80 0.14 80); --color-warning-subtle: oklch(0.21 0.042 80); --color-info: oklch(0.70 0.16 250); --color-info-subtle: oklch(0.21 0.048 250); /* ── Borders ── */ --color-border: oklch(0.26 0.05 275); --color-border-strong: oklch(0.34 0.06 275); --color-ring: oklch(0.75 0.16 195); /* ── Shadows (deep, dramatic, purple-tinted — cast in the channel) ── */ --shadow-color: 0.08 0.06 285; --shadow-xs: 0 1px 3px oklch(var(--shadow-color) / 0.4); --shadow-sm: 0 2px 6px oklch(var(--shadow-color) / 0.5); --shadow-md: 0 6px 14px oklch(var(--shadow-color) / 0.5), 0 2px 4px oklch(var(--shadow-color) / 0.3); --shadow-lg: 0 14px 28px oklch(var(--shadow-color) / 0.6), 0 4px 8px oklch(var(--shadow-color) / 0.3); --shadow-xl: 0 28px 56px oklch(var(--shadow-color) / 0.7), 0 8px 16px oklch(var(--shadow-color) / 0.4); } /* ── Auto Dark Mode (system preference) ── */ @media (prefers-color-scheme: dark) { [data-skin="midnight"][data-theme="auto"], [data-skin="midnight"] [data-theme="auto"], [data-theme="auto"] [data-skin="midnight"]:not([data-theme]) { /* ── Surfaces (deep navy) ── */ --color-bg: oklch(0.12 0.04 275); --color-bg-subtle: oklch(0.16 0.05 275); --color-bg-muted: oklch(0.21 0.05 275); --color-surface-1: var(--color-bg-subtle); --color-surface-2: var(--color-bg-muted); --color-surface-1-border: var(--color-border); --color-surface-2-border: var(--color-border-strong); --color-fg: oklch(0.95 0.01 260); --color-fg-muted: oklch(0.65 0.03 270); --color-fg-subtle: oklch(0.50 0.03 270); /* ── Interactive: Primary (vibrant cyan) ── */ --color-primary: oklch(0.75 0.16 195); --color-primary-hover: oklch(0.82 0.14 195); --color-primary-active: oklch(0.88 0.10 195); --color-primary-fg: oklch(0.12 0.04 275); --color-primary-subtle: oklch(0.21 0.048 195); /* ── Interactive: Secondary ── */ --color-secondary: oklch(0.24 0.05 275); --color-secondary-hover: oklch(0.30 0.05 275); --color-secondary-fg: oklch(0.90 0.01 260); /* ── Interactive: Destructive ── */ --color-destructive: oklch(0.66 0.22 15); --color-destructive-hover: oklch(0.72 0.20 15); --color-destructive-fg: oklch(0.12 0.04 275); --color-destructive-subtle: oklch(0.21 0.066 15); /* ── Feedback ── */ --color-success: oklch(0.72 0.18 160); --color-success-subtle: oklch(0.21 0.054 160); --color-warning: oklch(0.80 0.14 80); --color-warning-subtle: oklch(0.21 0.042 80); --color-info: oklch(0.70 0.16 250); --color-info-subtle: oklch(0.21 0.048 250); /* ── Borders ── */ --color-border: oklch(0.26 0.05 275); --color-border-strong: oklch(0.34 0.06 275); --color-ring: oklch(0.75 0.16 195); /* ── Shadows (deep, dramatic, purple-tinted — cast in the channel) ── */ --shadow-color: 0.08 0.06 285; --shadow-xs: 0 1px 3px oklch(var(--shadow-color) / 0.4); --shadow-sm: 0 2px 6px oklch(var(--shadow-color) / 0.5); --shadow-md: 0 6px 14px oklch(var(--shadow-color) / 0.5), 0 2px 4px oklch(var(--shadow-color) / 0.3); --shadow-lg: 0 14px 28px oklch(var(--shadow-color) / 0.6), 0 4px 8px oklch(var(--shadow-color) / 0.3); --shadow-xl: 0 28px 56px oklch(var(--shadow-color) / 0.7), 0 8px 16px oklch(var(--shadow-color) / 0.4); } }