@layer colors, tokens, ui; /* ================================================================ nonoun-css Design Tokens — Color System Naming convention: --{family}-* color primitives (elevation, ramp steps, scrims) --n-C-*, --n-L-* intermediate color math (chroma, lightness) 11-step scale: 050 100 200 300 400 500 600 700 800 900 950 Anchor at 500 (peak chroma). Symmetric about anchor. Lightness uses an internal 13-step ramp, skipping steps 1 and 13, so 050 never reaches pure white and 950 never reaches pure black. ================================================================ */ @layer colors { :root { color-scheme: light dark; /* ── Environment parameters (9 knobs) ── Global tuning for the OKLCH color engine. These control the lightness range of the 11-step ramp, the chroma ceiling and its muted/vivid/edge multipliers, and the base alpha + delta used for scrim overlays. Changing these reshapes every derived color in the system. */ --n-env-lightness-min: 0.1500; --n-env-lightness-max: 1.0000; --n-env-lightness-delta: 0.0150; --n-env-chroma: 0.2000; --n-env-chroma-k-muted: 0.1250; --n-env-chroma-k-vivid: 1.0000; --n-env-chroma-k-edge: 0.0500; --n-env-alpha: 0.2500; --n-env-alpha-delta: 0.0025; /* ── Family definitions ── Each color family (neutral, accent, info, success, warning, danger) is defined by three values: hue (OKLCH angle), chroma multiplier (0–1 scaling env-chroma), and lightness anchor (where step 500 sits). The 11-step ramp + scrims are computed per-family from these. */ --n-env-hue-neutral: 230; --n-env-chroma-neutral: 0.125; --n-env-lightness-neutral: 0.50; --n-env-hue-accent: 230; --n-env-chroma-accent: 1.0; --n-env-lightness-accent: 0.60; --n-env-hue-info: 250; --n-env-chroma-info: 0.60; --n-env-lightness-info: 0.60; --n-env-hue-success: 150; --n-env-chroma-success: 0.75; --n-env-lightness-success: 0.55; --n-env-hue-warning: 80; --n-env-chroma-warning: 0.95; --n-env-lightness-warning: 0.75; --n-env-hue-danger: 20; --n-env-chroma-danger: 0.85; --n-env-lightness-danger: 0.50; /* ── Chroma interpolation coefficients (env-C baked in) ── 6 coefficients: t-0 (edge) → t-5 (vivid), linear lerp. Symmetric mapping: 050,950 = t-0 100,900 = t-1 200,800 = t-2 300,700 = t-3 400,600 = t-4 500 = t-5 */ --n-C-t-0: calc(var(--n-env-chroma) * var(--n-env-chroma-k-edge)); --n-C-t-1: calc(var(--n-env-chroma) * (4 / 5 * var(--n-env-chroma-k-edge) + 1 / 5 * var(--n-env-chroma-k-vivid))); --n-C-t-2: calc(var(--n-env-chroma) * (3 / 5 * var(--n-env-chroma-k-edge) + 2 / 5 * var(--n-env-chroma-k-vivid))); --n-C-t-3: calc(var(--n-env-chroma) * (2 / 5 * var(--n-env-chroma-k-edge) + 3 / 5 * var(--n-env-chroma-k-vivid))); --n-C-t-4: calc(var(--n-env-chroma) * (1 / 5 * var(--n-env-chroma-k-edge) + 4 / 5 * var(--n-env-chroma-k-vivid))); --n-C-t-5: calc(var(--n-env-chroma) * var(--n-env-chroma-k-vivid)); /* ── Computed chroma: muted (flat, for backgrounds) ── */ --n-C-muted: calc(var(--n-env-chroma) * var(--n-env-chroma-k-muted)); --n-C-neutral-muted: calc(var(--n-C-muted) * var(--n-env-chroma-neutral)); --n-C-accent-muted: calc(var(--n-C-muted) * var(--n-env-chroma-accent)); --n-C-info-muted: calc(var(--n-C-muted) * var(--n-env-chroma-info)); --n-C-success-muted: calc(var(--n-C-muted) * var(--n-env-chroma-success)); --n-C-warning-muted: calc(var(--n-C-muted) * var(--n-env-chroma-warning)); --n-C-danger-muted: calc(var(--n-C-muted) * var(--n-env-chroma-danger)); /* ── Per-step chroma for solids (11 steps per family) ── C(n) = C-t-{i} × {family}-chroma Symmetric: 050,950=t-0 100,900=t-1 200,800=t-2 300,700=t-3 400,600=t-4 500=t-5 */ --n-C-neutral-1: calc(var(--n-C-t-0) * var(--n-env-chroma-neutral)); --n-C-neutral-2: calc(var(--n-C-t-1) * var(--n-env-chroma-neutral)); --n-C-neutral-3: calc(var(--n-C-t-2) * var(--n-env-chroma-neutral)); --n-C-neutral-4: calc(var(--n-C-t-3) * var(--n-env-chroma-neutral)); --n-C-neutral-5: calc(var(--n-C-t-4) * var(--n-env-chroma-neutral)); --n-C-neutral-6: calc(var(--n-C-t-5) * var(--n-env-chroma-neutral)); --n-C-neutral-7: calc(var(--n-C-t-4) * var(--n-env-chroma-neutral)); --n-C-neutral-8: calc(var(--n-C-t-3) * var(--n-env-chroma-neutral)); --n-C-neutral-9: calc(var(--n-C-t-2) * var(--n-env-chroma-neutral)); --n-C-neutral-10: calc(var(--n-C-t-1) * var(--n-env-chroma-neutral)); --n-C-neutral-11: calc(var(--n-C-t-0) * var(--n-env-chroma-neutral)); --n-C-accent-1: calc(var(--n-C-t-0) * var(--n-env-chroma-accent)); --n-C-accent-2: calc(var(--n-C-t-1) * var(--n-env-chroma-accent)); --n-C-accent-3: calc(var(--n-C-t-2) * var(--n-env-chroma-accent)); --n-C-accent-4: calc(var(--n-C-t-3) * var(--n-env-chroma-accent)); --n-C-accent-5: calc(var(--n-C-t-4) * var(--n-env-chroma-accent)); --n-C-accent-6: calc(var(--n-C-t-5) * var(--n-env-chroma-accent)); --n-C-accent-7: calc(var(--n-C-t-4) * var(--n-env-chroma-accent)); --n-C-accent-8: calc(var(--n-C-t-3) * var(--n-env-chroma-accent)); --n-C-accent-9: calc(var(--n-C-t-2) * var(--n-env-chroma-accent)); --n-C-accent-10: calc(var(--n-C-t-1) * var(--n-env-chroma-accent)); --n-C-accent-11: calc(var(--n-C-t-0) * var(--n-env-chroma-accent)); --n-C-info-1: calc(var(--n-C-t-0) * var(--n-env-chroma-info)); --n-C-info-2: calc(var(--n-C-t-1) * var(--n-env-chroma-info)); --n-C-info-3: calc(var(--n-C-t-2) * var(--n-env-chroma-info)); --n-C-info-4: calc(var(--n-C-t-3) * var(--n-env-chroma-info)); --n-C-info-5: calc(var(--n-C-t-4) * var(--n-env-chroma-info)); --n-C-info-6: calc(var(--n-C-t-5) * var(--n-env-chroma-info)); --n-C-info-7: calc(var(--n-C-t-4) * var(--n-env-chroma-info)); --n-C-info-8: calc(var(--n-C-t-3) * var(--n-env-chroma-info)); --n-C-info-9: calc(var(--n-C-t-2) * var(--n-env-chroma-info)); --n-C-info-10: calc(var(--n-C-t-1) * var(--n-env-chroma-info)); --n-C-info-11: calc(var(--n-C-t-0) * var(--n-env-chroma-info)); --n-C-success-1: calc(var(--n-C-t-0) * var(--n-env-chroma-success)); --n-C-success-2: calc(var(--n-C-t-1) * var(--n-env-chroma-success)); --n-C-success-3: calc(var(--n-C-t-2) * var(--n-env-chroma-success)); --n-C-success-4: calc(var(--n-C-t-3) * var(--n-env-chroma-success)); --n-C-success-5: calc(var(--n-C-t-4) * var(--n-env-chroma-success)); --n-C-success-6: calc(var(--n-C-t-5) * var(--n-env-chroma-success)); --n-C-success-7: calc(var(--n-C-t-4) * var(--n-env-chroma-success)); --n-C-success-8: calc(var(--n-C-t-3) * var(--n-env-chroma-success)); --n-C-success-9: calc(var(--n-C-t-2) * var(--n-env-chroma-success)); --n-C-success-10: calc(var(--n-C-t-1) * var(--n-env-chroma-success)); --n-C-success-11: calc(var(--n-C-t-0) * var(--n-env-chroma-success)); --n-C-warning-1: calc(var(--n-C-t-0) * var(--n-env-chroma-warning)); --n-C-warning-2: calc(var(--n-C-t-1) * var(--n-env-chroma-warning)); --n-C-warning-3: calc(var(--n-C-t-2) * var(--n-env-chroma-warning)); --n-C-warning-4: calc(var(--n-C-t-3) * var(--n-env-chroma-warning)); --n-C-warning-5: calc(var(--n-C-t-4) * var(--n-env-chroma-warning)); --n-C-warning-6: calc(var(--n-C-t-5) * var(--n-env-chroma-warning)); --n-C-warning-7: calc(var(--n-C-t-4) * var(--n-env-chroma-warning)); --n-C-warning-8: calc(var(--n-C-t-3) * var(--n-env-chroma-warning)); --n-C-warning-9: calc(var(--n-C-t-2) * var(--n-env-chroma-warning)); --n-C-warning-10: calc(var(--n-C-t-1) * var(--n-env-chroma-warning)); --n-C-warning-11: calc(var(--n-C-t-0) * var(--n-env-chroma-warning)); --n-C-danger-1: calc(var(--n-C-t-0) * var(--n-env-chroma-danger)); --n-C-danger-2: calc(var(--n-C-t-1) * var(--n-env-chroma-danger)); --n-C-danger-3: calc(var(--n-C-t-2) * var(--n-env-chroma-danger)); --n-C-danger-4: calc(var(--n-C-t-3) * var(--n-env-chroma-danger)); --n-C-danger-5: calc(var(--n-C-t-4) * var(--n-env-chroma-danger)); --n-C-danger-6: calc(var(--n-C-t-5) * var(--n-env-chroma-danger)); --n-C-danger-7: calc(var(--n-C-t-4) * var(--n-env-chroma-danger)); --n-C-danger-8: calc(var(--n-C-t-3) * var(--n-env-chroma-danger)); --n-C-danger-9: calc(var(--n-C-t-2) * var(--n-env-chroma-danger)); --n-C-danger-10: calc(var(--n-C-t-1) * var(--n-env-chroma-danger)); --n-C-danger-11: calc(var(--n-C-t-0) * var(--n-env-chroma-danger)); /* ── Solid lightness ramps (11 steps per family) ── Internal 13-step ramp from L-max → lightness → L-min in 6 intervals per half. 11 public steps map to internal steps 2–12 (skipping 1 and 13), so 050 never reaches pure white and 950 never reaches pure black. 050=step2 100=step3 200=step4 300=step5 400=step6 500=step7(anchor) 600=step8 700=step9 800=step10 900=step11 950=step12 */ --n-L-neutral-1: calc(var(--n-env-lightness-max) - 1 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-neutral))); --n-L-neutral-2: calc(var(--n-env-lightness-max) - 2 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-neutral))); --n-L-neutral-3: calc(var(--n-env-lightness-max) - 3 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-neutral))); --n-L-neutral-4: calc(var(--n-env-lightness-max) - 4 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-neutral))); --n-L-neutral-5: calc(var(--n-env-lightness-max) - 5 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-neutral))); --n-L-neutral-6: var(--n-env-lightness-neutral); --n-L-neutral-7: calc(var(--n-env-lightness-neutral) - 1 / 6 * (var(--n-env-lightness-neutral) - var(--n-env-lightness-min))); --n-L-neutral-8: calc(var(--n-env-lightness-neutral) - 2 / 6 * (var(--n-env-lightness-neutral) - var(--n-env-lightness-min))); --n-L-neutral-9: calc(var(--n-env-lightness-neutral) - 3 / 6 * (var(--n-env-lightness-neutral) - var(--n-env-lightness-min))); --n-L-neutral-10: calc(var(--n-env-lightness-neutral) - 4 / 6 * (var(--n-env-lightness-neutral) - var(--n-env-lightness-min))); --n-L-neutral-11: calc(var(--n-env-lightness-neutral) - 5 / 6 * (var(--n-env-lightness-neutral) - var(--n-env-lightness-min))); --n-L-accent-1: calc(var(--n-env-lightness-max) - 1 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-accent))); --n-L-accent-2: calc(var(--n-env-lightness-max) - 2 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-accent))); --n-L-accent-3: calc(var(--n-env-lightness-max) - 3 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-accent))); --n-L-accent-4: calc(var(--n-env-lightness-max) - 4 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-accent))); --n-L-accent-5: calc(var(--n-env-lightness-max) - 5 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-accent))); --n-L-accent-6: var(--n-env-lightness-accent); --n-L-accent-7: calc(var(--n-env-lightness-accent) - 1 / 6 * (var(--n-env-lightness-accent) - var(--n-env-lightness-min))); --n-L-accent-8: calc(var(--n-env-lightness-accent) - 2 / 6 * (var(--n-env-lightness-accent) - var(--n-env-lightness-min))); --n-L-accent-9: calc(var(--n-env-lightness-accent) - 3 / 6 * (var(--n-env-lightness-accent) - var(--n-env-lightness-min))); --n-L-accent-10: calc(var(--n-env-lightness-accent) - 4 / 6 * (var(--n-env-lightness-accent) - var(--n-env-lightness-min))); --n-L-accent-11: calc(var(--n-env-lightness-accent) - 5 / 6 * (var(--n-env-lightness-accent) - var(--n-env-lightness-min))); --n-L-info-1: calc(var(--n-env-lightness-max) - 1 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-info))); --n-L-info-2: calc(var(--n-env-lightness-max) - 2 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-info))); --n-L-info-3: calc(var(--n-env-lightness-max) - 3 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-info))); --n-L-info-4: calc(var(--n-env-lightness-max) - 4 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-info))); --n-L-info-5: calc(var(--n-env-lightness-max) - 5 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-info))); --n-L-info-6: var(--n-env-lightness-info); --n-L-info-7: calc(var(--n-env-lightness-info) - 1 / 6 * (var(--n-env-lightness-info) - var(--n-env-lightness-min))); --n-L-info-8: calc(var(--n-env-lightness-info) - 2 / 6 * (var(--n-env-lightness-info) - var(--n-env-lightness-min))); --n-L-info-9: calc(var(--n-env-lightness-info) - 3 / 6 * (var(--n-env-lightness-info) - var(--n-env-lightness-min))); --n-L-info-10: calc(var(--n-env-lightness-info) - 4 / 6 * (var(--n-env-lightness-info) - var(--n-env-lightness-min))); --n-L-info-11: calc(var(--n-env-lightness-info) - 5 / 6 * (var(--n-env-lightness-info) - var(--n-env-lightness-min))); --n-L-success-1: calc(var(--n-env-lightness-max) - 1 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-success))); --n-L-success-2: calc(var(--n-env-lightness-max) - 2 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-success))); --n-L-success-3: calc(var(--n-env-lightness-max) - 3 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-success))); --n-L-success-4: calc(var(--n-env-lightness-max) - 4 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-success))); --n-L-success-5: calc(var(--n-env-lightness-max) - 5 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-success))); --n-L-success-6: var(--n-env-lightness-success); --n-L-success-7: calc(var(--n-env-lightness-success) - 1 / 6 * (var(--n-env-lightness-success) - var(--n-env-lightness-min))); --n-L-success-8: calc(var(--n-env-lightness-success) - 2 / 6 * (var(--n-env-lightness-success) - var(--n-env-lightness-min))); --n-L-success-9: calc(var(--n-env-lightness-success) - 3 / 6 * (var(--n-env-lightness-success) - var(--n-env-lightness-min))); --n-L-success-10: calc(var(--n-env-lightness-success) - 4 / 6 * (var(--n-env-lightness-success) - var(--n-env-lightness-min))); --n-L-success-11: calc(var(--n-env-lightness-success) - 5 / 6 * (var(--n-env-lightness-success) - var(--n-env-lightness-min))); --n-L-warning-1: calc(var(--n-env-lightness-max) - 1 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-warning))); --n-L-warning-2: calc(var(--n-env-lightness-max) - 2 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-warning))); --n-L-warning-3: calc(var(--n-env-lightness-max) - 3 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-warning))); --n-L-warning-4: calc(var(--n-env-lightness-max) - 4 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-warning))); --n-L-warning-5: calc(var(--n-env-lightness-max) - 5 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-warning))); --n-L-warning-6: var(--n-env-lightness-warning); --n-L-warning-7: calc(var(--n-env-lightness-warning) - 1 / 6 * (var(--n-env-lightness-warning) - var(--n-env-lightness-min))); --n-L-warning-8: calc(var(--n-env-lightness-warning) - 2 / 6 * (var(--n-env-lightness-warning) - var(--n-env-lightness-min))); --n-L-warning-9: calc(var(--n-env-lightness-warning) - 3 / 6 * (var(--n-env-lightness-warning) - var(--n-env-lightness-min))); --n-L-warning-10: calc(var(--n-env-lightness-warning) - 4 / 6 * (var(--n-env-lightness-warning) - var(--n-env-lightness-min))); --n-L-warning-11: calc(var(--n-env-lightness-warning) - 5 / 6 * (var(--n-env-lightness-warning) - var(--n-env-lightness-min))); --n-L-danger-1: calc(var(--n-env-lightness-max) - 1 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-danger))); --n-L-danger-2: calc(var(--n-env-lightness-max) - 2 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-danger))); --n-L-danger-3: calc(var(--n-env-lightness-max) - 3 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-danger))); --n-L-danger-4: calc(var(--n-env-lightness-max) - 4 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-danger))); --n-L-danger-5: calc(var(--n-env-lightness-max) - 5 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-danger))); --n-L-danger-6: var(--n-env-lightness-danger); --n-L-danger-7: calc(var(--n-env-lightness-danger) - 1 / 6 * (var(--n-env-lightness-danger) - var(--n-env-lightness-min))); --n-L-danger-8: calc(var(--n-env-lightness-danger) - 2 / 6 * (var(--n-env-lightness-danger) - var(--n-env-lightness-min))); --n-L-danger-9: calc(var(--n-env-lightness-danger) - 3 / 6 * (var(--n-env-lightness-danger) - var(--n-env-lightness-min))); --n-L-danger-10: calc(var(--n-env-lightness-danger) - 4 / 6 * (var(--n-env-lightness-danger) - var(--n-env-lightness-min))); --n-L-danger-11: calc(var(--n-env-lightness-danger) - 5 / 6 * (var(--n-env-lightness-danger) - var(--n-env-lightness-min))); /* ── Background lightness ramps (shared across families) ── */ --n-L-light-1: var(--n-env-lightness-max); --n-L-light-2: calc(var(--n-env-lightness-max) - 1 * var(--n-env-lightness-delta)); --n-L-light-3: calc(var(--n-env-lightness-max) - 2 * var(--n-env-lightness-delta)); --n-L-light-4: calc(var(--n-env-lightness-max) - 3 * var(--n-env-lightness-delta)); --n-L-light-5: calc(var(--n-env-lightness-max) - 4 * var(--n-env-lightness-delta)); --n-L-light-6: calc(var(--n-env-lightness-max) - 5 * var(--n-env-lightness-delta)); --n-L-light-7: calc(var(--n-env-lightness-max) - 6 * var(--n-env-lightness-delta)); --n-L-dark-1: var(--n-env-lightness-min); --n-L-dark-2: calc(var(--n-env-lightness-min) + 1 * var(--n-env-lightness-delta)); --n-L-dark-3: calc(var(--n-env-lightness-min) + 2 * var(--n-env-lightness-delta)); --n-L-dark-4: calc(var(--n-env-lightness-min) + 3 * var(--n-env-lightness-delta)); --n-L-dark-5: calc(var(--n-env-lightness-min) + 4 * var(--n-env-lightness-delta)); --n-L-dark-6: calc(var(--n-env-lightness-min) + 5 * var(--n-env-lightness-delta)); --n-L-dark-7: calc(var(--n-env-lightness-min) + 6 * var(--n-env-lightness-delta)); /* ── Color ramp — Raw (1–11, mode-independent) ── 1 = L-max (lightest), 6 = anchor (peak chroma), 11 = L-min (darkest). Chroma lerps C-k-edge → C-k-vivid → C-k-edge (peak at anchor). These are the raw oklch values; use the semantic 050–950 tokens below for light-dark awareness. */ --n-color-neutral-1: oklch(var(--n-L-neutral-1) var(--n-C-neutral-1) var(--n-env-hue-neutral)); --n-color-neutral-2: oklch(var(--n-L-neutral-2) var(--n-C-neutral-2) var(--n-env-hue-neutral)); --n-color-neutral-3: oklch(var(--n-L-neutral-3) var(--n-C-neutral-3) var(--n-env-hue-neutral)); --n-color-neutral-4: oklch(var(--n-L-neutral-4) var(--n-C-neutral-4) var(--n-env-hue-neutral)); --n-color-neutral-5: oklch(var(--n-L-neutral-5) var(--n-C-neutral-5) var(--n-env-hue-neutral)); --n-color-neutral-6: oklch(var(--n-L-neutral-6) var(--n-C-neutral-6) var(--n-env-hue-neutral)); --n-color-neutral-7: oklch(var(--n-L-neutral-7) var(--n-C-neutral-7) var(--n-env-hue-neutral)); --n-color-neutral-8: oklch(var(--n-L-neutral-8) var(--n-C-neutral-8) var(--n-env-hue-neutral)); --n-color-neutral-9: oklch(var(--n-L-neutral-9) var(--n-C-neutral-9) var(--n-env-hue-neutral)); --n-color-neutral-10: oklch(var(--n-L-neutral-10) var(--n-C-neutral-10) var(--n-env-hue-neutral)); --n-color-neutral-11: oklch(var(--n-L-neutral-11) var(--n-C-neutral-11) var(--n-env-hue-neutral)); --n-color-accent-1: oklch(var(--n-L-accent-1) var(--n-C-accent-1) var(--n-env-hue-accent)); --n-color-accent-2: oklch(var(--n-L-accent-2) var(--n-C-accent-2) var(--n-env-hue-accent)); --n-color-accent-3: oklch(var(--n-L-accent-3) var(--n-C-accent-3) var(--n-env-hue-accent)); --n-color-accent-4: oklch(var(--n-L-accent-4) var(--n-C-accent-4) var(--n-env-hue-accent)); --n-color-accent-5: oklch(var(--n-L-accent-5) var(--n-C-accent-5) var(--n-env-hue-accent)); --n-color-accent-6: oklch(var(--n-L-accent-6) var(--n-C-accent-6) var(--n-env-hue-accent)); --n-color-accent-7: oklch(var(--n-L-accent-7) var(--n-C-accent-7) var(--n-env-hue-accent)); --n-color-accent-8: oklch(var(--n-L-accent-8) var(--n-C-accent-8) var(--n-env-hue-accent)); --n-color-accent-9: oklch(var(--n-L-accent-9) var(--n-C-accent-9) var(--n-env-hue-accent)); --n-color-accent-10: oklch(var(--n-L-accent-10) var(--n-C-accent-10) var(--n-env-hue-accent)); --n-color-accent-11: oklch(var(--n-L-accent-11) var(--n-C-accent-11) var(--n-env-hue-accent)); --n-color-info-1: oklch(var(--n-L-info-1) var(--n-C-info-1) var(--n-env-hue-info)); --n-color-info-2: oklch(var(--n-L-info-2) var(--n-C-info-2) var(--n-env-hue-info)); --n-color-info-3: oklch(var(--n-L-info-3) var(--n-C-info-3) var(--n-env-hue-info)); --n-color-info-4: oklch(var(--n-L-info-4) var(--n-C-info-4) var(--n-env-hue-info)); --n-color-info-5: oklch(var(--n-L-info-5) var(--n-C-info-5) var(--n-env-hue-info)); --n-color-info-6: oklch(var(--n-L-info-6) var(--n-C-info-6) var(--n-env-hue-info)); --n-color-info-7: oklch(var(--n-L-info-7) var(--n-C-info-7) var(--n-env-hue-info)); --n-color-info-8: oklch(var(--n-L-info-8) var(--n-C-info-8) var(--n-env-hue-info)); --n-color-info-9: oklch(var(--n-L-info-9) var(--n-C-info-9) var(--n-env-hue-info)); --n-color-info-10: oklch(var(--n-L-info-10) var(--n-C-info-10) var(--n-env-hue-info)); --n-color-info-11: oklch(var(--n-L-info-11) var(--n-C-info-11) var(--n-env-hue-info)); --n-color-success-1: oklch(var(--n-L-success-1) var(--n-C-success-1) var(--n-env-hue-success)); --n-color-success-2: oklch(var(--n-L-success-2) var(--n-C-success-2) var(--n-env-hue-success)); --n-color-success-3: oklch(var(--n-L-success-3) var(--n-C-success-3) var(--n-env-hue-success)); --n-color-success-4: oklch(var(--n-L-success-4) var(--n-C-success-4) var(--n-env-hue-success)); --n-color-success-5: oklch(var(--n-L-success-5) var(--n-C-success-5) var(--n-env-hue-success)); --n-color-success-6: oklch(var(--n-L-success-6) var(--n-C-success-6) var(--n-env-hue-success)); --n-color-success-7: oklch(var(--n-L-success-7) var(--n-C-success-7) var(--n-env-hue-success)); --n-color-success-8: oklch(var(--n-L-success-8) var(--n-C-success-8) var(--n-env-hue-success)); --n-color-success-9: oklch(var(--n-L-success-9) var(--n-C-success-9) var(--n-env-hue-success)); --n-color-success-10: oklch(var(--n-L-success-10) var(--n-C-success-10) var(--n-env-hue-success)); --n-color-success-11: oklch(var(--n-L-success-11) var(--n-C-success-11) var(--n-env-hue-success)); --n-color-warning-1: oklch(var(--n-L-warning-1) var(--n-C-warning-1) var(--n-env-hue-warning)); --n-color-warning-2: oklch(var(--n-L-warning-2) var(--n-C-warning-2) var(--n-env-hue-warning)); --n-color-warning-3: oklch(var(--n-L-warning-3) var(--n-C-warning-3) var(--n-env-hue-warning)); --n-color-warning-4: oklch(var(--n-L-warning-4) var(--n-C-warning-4) var(--n-env-hue-warning)); --n-color-warning-5: oklch(var(--n-L-warning-5) var(--n-C-warning-5) var(--n-env-hue-warning)); --n-color-warning-6: oklch(var(--n-L-warning-6) var(--n-C-warning-6) var(--n-env-hue-warning)); --n-color-warning-7: oklch(var(--n-L-warning-7) var(--n-C-warning-7) var(--n-env-hue-warning)); --n-color-warning-8: oklch(var(--n-L-warning-8) var(--n-C-warning-8) var(--n-env-hue-warning)); --n-color-warning-9: oklch(var(--n-L-warning-9) var(--n-C-warning-9) var(--n-env-hue-warning)); --n-color-warning-10: oklch(var(--n-L-warning-10) var(--n-C-warning-10) var(--n-env-hue-warning)); --n-color-warning-11: oklch(var(--n-L-warning-11) var(--n-C-warning-11) var(--n-env-hue-warning)); --n-color-danger-1: oklch(var(--n-L-danger-1) var(--n-C-danger-1) var(--n-env-hue-danger)); --n-color-danger-2: oklch(var(--n-L-danger-2) var(--n-C-danger-2) var(--n-env-hue-danger)); --n-color-danger-3: oklch(var(--n-L-danger-3) var(--n-C-danger-3) var(--n-env-hue-danger)); --n-color-danger-4: oklch(var(--n-L-danger-4) var(--n-C-danger-4) var(--n-env-hue-danger)); --n-color-danger-5: oklch(var(--n-L-danger-5) var(--n-C-danger-5) var(--n-env-hue-danger)); --n-color-danger-6: oklch(var(--n-L-danger-6) var(--n-C-danger-6) var(--n-env-hue-danger)); --n-color-danger-7: oklch(var(--n-L-danger-7) var(--n-C-danger-7) var(--n-env-hue-danger)); --n-color-danger-8: oklch(var(--n-L-danger-8) var(--n-C-danger-8) var(--n-env-hue-danger)); --n-color-danger-9: oklch(var(--n-L-danger-9) var(--n-C-danger-9) var(--n-env-hue-danger)); --n-color-danger-10: oklch(var(--n-L-danger-10) var(--n-C-danger-10) var(--n-env-hue-danger)); --n-color-danger-11: oklch(var(--n-L-danger-11) var(--n-C-danger-11) var(--n-env-hue-danger)); /* ── Color ramp — Semantic (light-dark aware) ── 050 = lightest in light mode / darkest in dark mode. 950 = darkest in light mode / lightest in dark mode. 500 = anchor (same raw tone in both modes). */ --n-color-neutral-050: light-dark(var(--n-color-neutral-1), var(--n-color-neutral-11)); --n-color-neutral-100: light-dark(var(--n-color-neutral-2), var(--n-color-neutral-10)); --n-color-neutral-200: light-dark(var(--n-color-neutral-3), var(--n-color-neutral-9)); --n-color-neutral-300: light-dark(var(--n-color-neutral-4), var(--n-color-neutral-8)); --n-color-neutral-400: light-dark(var(--n-color-neutral-5), var(--n-color-neutral-7)); --n-color-neutral-500: light-dark(var(--n-color-neutral-6), var(--n-color-neutral-6)); --n-color-neutral-600: light-dark(var(--n-color-neutral-7), var(--n-color-neutral-5)); --n-color-neutral-700: light-dark(var(--n-color-neutral-8), var(--n-color-neutral-4)); --n-color-neutral-800: light-dark(var(--n-color-neutral-9), var(--n-color-neutral-3)); --n-color-neutral-900: light-dark(var(--n-color-neutral-10), var(--n-color-neutral-2)); --n-color-neutral-950: light-dark(var(--n-color-neutral-11), var(--n-color-neutral-1)); --n-color-accent-050: light-dark(var(--n-color-accent-1), var(--n-color-accent-11)); --n-color-accent-100: light-dark(var(--n-color-accent-2), var(--n-color-accent-10)); --n-color-accent-200: light-dark(var(--n-color-accent-3), var(--n-color-accent-9)); --n-color-accent-300: light-dark(var(--n-color-accent-4), var(--n-color-accent-8)); --n-color-accent-400: light-dark(var(--n-color-accent-5), var(--n-color-accent-7)); --n-color-accent-500: light-dark(var(--n-color-accent-6), var(--n-color-accent-6)); --n-color-accent-600: light-dark(var(--n-color-accent-7), var(--n-color-accent-5)); --n-color-accent-700: light-dark(var(--n-color-accent-8), var(--n-color-accent-4)); --n-color-accent-800: light-dark(var(--n-color-accent-9), var(--n-color-accent-3)); --n-color-accent-900: light-dark(var(--n-color-accent-10), var(--n-color-accent-2)); --n-color-accent-950: light-dark(var(--n-color-accent-11), var(--n-color-accent-1)); --n-color-info-050: light-dark(var(--n-color-info-1), var(--n-color-info-11)); --n-color-info-100: light-dark(var(--n-color-info-2), var(--n-color-info-10)); --n-color-info-200: light-dark(var(--n-color-info-3), var(--n-color-info-9)); --n-color-info-300: light-dark(var(--n-color-info-4), var(--n-color-info-8)); --n-color-info-400: light-dark(var(--n-color-info-5), var(--n-color-info-7)); --n-color-info-500: light-dark(var(--n-color-info-6), var(--n-color-info-6)); --n-color-info-600: light-dark(var(--n-color-info-7), var(--n-color-info-5)); --n-color-info-700: light-dark(var(--n-color-info-8), var(--n-color-info-4)); --n-color-info-800: light-dark(var(--n-color-info-9), var(--n-color-info-3)); --n-color-info-900: light-dark(var(--n-color-info-10), var(--n-color-info-2)); --n-color-info-950: light-dark(var(--n-color-info-11), var(--n-color-info-1)); --n-color-success-050: light-dark(var(--n-color-success-1), var(--n-color-success-11)); --n-color-success-100: light-dark(var(--n-color-success-2), var(--n-color-success-10)); --n-color-success-200: light-dark(var(--n-color-success-3), var(--n-color-success-9)); --n-color-success-300: light-dark(var(--n-color-success-4), var(--n-color-success-8)); --n-color-success-400: light-dark(var(--n-color-success-5), var(--n-color-success-7)); --n-color-success-500: light-dark(var(--n-color-success-6), var(--n-color-success-6)); --n-color-success-600: light-dark(var(--n-color-success-7), var(--n-color-success-5)); --n-color-success-700: light-dark(var(--n-color-success-8), var(--n-color-success-4)); --n-color-success-800: light-dark(var(--n-color-success-9), var(--n-color-success-3)); --n-color-success-900: light-dark(var(--n-color-success-10), var(--n-color-success-2)); --n-color-success-950: light-dark(var(--n-color-success-11), var(--n-color-success-1)); --n-color-warning-050: light-dark(var(--n-color-warning-1), var(--n-color-warning-11)); --n-color-warning-100: light-dark(var(--n-color-warning-2), var(--n-color-warning-10)); --n-color-warning-200: light-dark(var(--n-color-warning-3), var(--n-color-warning-9)); --n-color-warning-300: light-dark(var(--n-color-warning-4), var(--n-color-warning-8)); --n-color-warning-400: light-dark(var(--n-color-warning-5), var(--n-color-warning-7)); --n-color-warning-500: light-dark(var(--n-color-warning-6), var(--n-color-warning-6)); --n-color-warning-600: light-dark(var(--n-color-warning-7), var(--n-color-warning-5)); --n-color-warning-700: light-dark(var(--n-color-warning-8), var(--n-color-warning-4)); --n-color-warning-800: light-dark(var(--n-color-warning-9), var(--n-color-warning-3)); --n-color-warning-900: light-dark(var(--n-color-warning-10), var(--n-color-warning-2)); --n-color-warning-950: light-dark(var(--n-color-warning-11), var(--n-color-warning-1)); --n-color-danger-050: light-dark(var(--n-color-danger-1), var(--n-color-danger-11)); --n-color-danger-100: light-dark(var(--n-color-danger-2), var(--n-color-danger-10)); --n-color-danger-200: light-dark(var(--n-color-danger-3), var(--n-color-danger-9)); --n-color-danger-300: light-dark(var(--n-color-danger-4), var(--n-color-danger-8)); --n-color-danger-400: light-dark(var(--n-color-danger-5), var(--n-color-danger-7)); --n-color-danger-500: light-dark(var(--n-color-danger-6), var(--n-color-danger-6)); --n-color-danger-600: light-dark(var(--n-color-danger-7), var(--n-color-danger-5)); --n-color-danger-700: light-dark(var(--n-color-danger-8), var(--n-color-danger-4)); --n-color-danger-800: light-dark(var(--n-color-danger-9), var(--n-color-danger-3)); --n-color-danger-900: light-dark(var(--n-color-danger-10), var(--n-color-danger-2)); --n-color-danger-950: light-dark(var(--n-color-danger-11), var(--n-color-danger-1)); /* ── Anchor aliases (bare name = step 500) ── */ --n-color-neutral: var(--n-color-neutral-500); --n-color-accent: var(--n-color-accent-500); --n-color-info: var(--n-color-info-500); --n-color-success: var(--n-color-success-500); --n-color-warning: var(--n-color-warning-500); --n-color-danger: var(--n-color-danger-500); /* ── Scrim ramp — Raw (1–11, mode-independent, alpha = env-A) ── Same L/C/H as solid raw ramp, at env-A opacity. */ --n-color-neutral-1-scrim: oklch(var(--n-L-neutral-1) var(--n-C-neutral-1) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-neutral-2-scrim: oklch(var(--n-L-neutral-2) var(--n-C-neutral-2) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-neutral-3-scrim: oklch(var(--n-L-neutral-3) var(--n-C-neutral-3) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-neutral-4-scrim: oklch(var(--n-L-neutral-4) var(--n-C-neutral-4) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-neutral-5-scrim: oklch(var(--n-L-neutral-5) var(--n-C-neutral-5) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-neutral-6-scrim: oklch(var(--n-L-neutral-6) var(--n-C-neutral-6) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-neutral-7-scrim: oklch(var(--n-L-neutral-7) var(--n-C-neutral-7) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-neutral-8-scrim: oklch(var(--n-L-neutral-8) var(--n-C-neutral-8) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-neutral-9-scrim: oklch(var(--n-L-neutral-9) var(--n-C-neutral-9) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-neutral-10-scrim: oklch(var(--n-L-neutral-10) var(--n-C-neutral-10) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-neutral-11-scrim: oklch(var(--n-L-neutral-11) var(--n-C-neutral-11) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-accent-1-scrim: oklch(var(--n-L-accent-1) var(--n-C-accent-1) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-accent-2-scrim: oklch(var(--n-L-accent-2) var(--n-C-accent-2) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-accent-3-scrim: oklch(var(--n-L-accent-3) var(--n-C-accent-3) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-accent-4-scrim: oklch(var(--n-L-accent-4) var(--n-C-accent-4) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-accent-5-scrim: oklch(var(--n-L-accent-5) var(--n-C-accent-5) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-accent-6-scrim: oklch(var(--n-L-accent-6) var(--n-C-accent-6) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-accent-7-scrim: oklch(var(--n-L-accent-7) var(--n-C-accent-7) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-accent-8-scrim: oklch(var(--n-L-accent-8) var(--n-C-accent-8) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-accent-9-scrim: oklch(var(--n-L-accent-9) var(--n-C-accent-9) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-accent-10-scrim: oklch(var(--n-L-accent-10) var(--n-C-accent-10) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-accent-11-scrim: oklch(var(--n-L-accent-11) var(--n-C-accent-11) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-info-1-scrim: oklch(var(--n-L-info-1) var(--n-C-info-1) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-info-2-scrim: oklch(var(--n-L-info-2) var(--n-C-info-2) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-info-3-scrim: oklch(var(--n-L-info-3) var(--n-C-info-3) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-info-4-scrim: oklch(var(--n-L-info-4) var(--n-C-info-4) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-info-5-scrim: oklch(var(--n-L-info-5) var(--n-C-info-5) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-info-6-scrim: oklch(var(--n-L-info-6) var(--n-C-info-6) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-info-7-scrim: oklch(var(--n-L-info-7) var(--n-C-info-7) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-info-8-scrim: oklch(var(--n-L-info-8) var(--n-C-info-8) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-info-9-scrim: oklch(var(--n-L-info-9) var(--n-C-info-9) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-info-10-scrim: oklch(var(--n-L-info-10) var(--n-C-info-10) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-info-11-scrim: oklch(var(--n-L-info-11) var(--n-C-info-11) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-success-1-scrim: oklch(var(--n-L-success-1) var(--n-C-success-1) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-success-2-scrim: oklch(var(--n-L-success-2) var(--n-C-success-2) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-success-3-scrim: oklch(var(--n-L-success-3) var(--n-C-success-3) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-success-4-scrim: oklch(var(--n-L-success-4) var(--n-C-success-4) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-success-5-scrim: oklch(var(--n-L-success-5) var(--n-C-success-5) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-success-6-scrim: oklch(var(--n-L-success-6) var(--n-C-success-6) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-success-7-scrim: oklch(var(--n-L-success-7) var(--n-C-success-7) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-success-8-scrim: oklch(var(--n-L-success-8) var(--n-C-success-8) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-success-9-scrim: oklch(var(--n-L-success-9) var(--n-C-success-9) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-success-10-scrim: oklch(var(--n-L-success-10) var(--n-C-success-10) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-success-11-scrim: oklch(var(--n-L-success-11) var(--n-C-success-11) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-warning-1-scrim: oklch(var(--n-L-warning-1) var(--n-C-warning-1) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-warning-2-scrim: oklch(var(--n-L-warning-2) var(--n-C-warning-2) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-warning-3-scrim: oklch(var(--n-L-warning-3) var(--n-C-warning-3) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-warning-4-scrim: oklch(var(--n-L-warning-4) var(--n-C-warning-4) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-warning-5-scrim: oklch(var(--n-L-warning-5) var(--n-C-warning-5) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-warning-6-scrim: oklch(var(--n-L-warning-6) var(--n-C-warning-6) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-warning-7-scrim: oklch(var(--n-L-warning-7) var(--n-C-warning-7) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-warning-8-scrim: oklch(var(--n-L-warning-8) var(--n-C-warning-8) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-warning-9-scrim: oklch(var(--n-L-warning-9) var(--n-C-warning-9) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-warning-10-scrim: oklch(var(--n-L-warning-10) var(--n-C-warning-10) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-warning-11-scrim: oklch(var(--n-L-warning-11) var(--n-C-warning-11) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-danger-1-scrim: oklch(var(--n-L-danger-1) var(--n-C-danger-1) var(--n-env-hue-danger) / var(--n-env-alpha)); --n-color-danger-2-scrim: oklch(var(--n-L-danger-2) var(--n-C-danger-2) var(--n-env-hue-danger) / var(--n-env-alpha)); --n-color-danger-3-scrim: oklch(var(--n-L-danger-3) var(--n-C-danger-3) var(--n-env-hue-danger) / var(--n-env-alpha)); --n-color-danger-4-scrim: oklch(var(--n-L-danger-4) var(--n-C-danger-4) var(--n-env-hue-danger) / var(--n-env-alpha)); --n-color-danger-5-scrim: oklch(var(--n-L-danger-5) var(--n-C-danger-5) var(--n-env-hue-danger) / var(--n-env-alpha)); --n-color-danger-6-scrim: oklch(var(--n-L-danger-6) var(--n-C-danger-6) var(--n-env-hue-danger) / var(--n-env-alpha)); --n-color-danger-7-scrim: oklch(var(--n-L-danger-7) var(--n-C-danger-7) var(--n-env-hue-danger) / var(--n-env-alpha)); --n-color-danger-8-scrim: oklch(var(--n-L-danger-8) var(--n-C-danger-8) var(--n-env-hue-danger) / var(--n-env-alpha)); --n-color-danger-9-scrim: oklch(var(--n-L-danger-9) var(--n-C-danger-9) var(--n-env-hue-danger) / var(--n-env-alpha)); --n-color-danger-10-scrim: oklch(var(--n-L-danger-10) var(--n-C-danger-10) var(--n-env-hue-danger) / var(--n-env-alpha)); --n-color-danger-11-scrim: oklch(var(--n-L-danger-11) var(--n-C-danger-11) var(--n-env-hue-danger) / var(--n-env-alpha)); /* ── Scrim ramp — Semantic (light-dark aware) ── */ --n-color-neutral-050-scrim: light-dark(var(--n-color-neutral-1-scrim), var(--n-color-neutral-11-scrim)); --n-color-neutral-100-scrim: light-dark(var(--n-color-neutral-2-scrim), var(--n-color-neutral-10-scrim)); --n-color-neutral-200-scrim: light-dark(var(--n-color-neutral-3-scrim), var(--n-color-neutral-9-scrim)); --n-color-neutral-300-scrim: light-dark(var(--n-color-neutral-4-scrim), var(--n-color-neutral-8-scrim)); --n-color-neutral-400-scrim: light-dark(var(--n-color-neutral-5-scrim), var(--n-color-neutral-7-scrim)); --n-color-neutral-500-scrim: light-dark(var(--n-color-neutral-6-scrim), var(--n-color-neutral-6-scrim)); --n-color-neutral-600-scrim: light-dark(var(--n-color-neutral-7-scrim), var(--n-color-neutral-5-scrim)); --n-color-neutral-700-scrim: light-dark(var(--n-color-neutral-8-scrim), var(--n-color-neutral-4-scrim)); --n-color-neutral-800-scrim: light-dark(var(--n-color-neutral-9-scrim), var(--n-color-neutral-3-scrim)); --n-color-neutral-900-scrim: light-dark(var(--n-color-neutral-10-scrim), var(--n-color-neutral-2-scrim)); --n-color-neutral-950-scrim: light-dark(var(--n-color-neutral-11-scrim), var(--n-color-neutral-1-scrim)); --n-color-accent-050-scrim: light-dark(var(--n-color-accent-1-scrim), var(--n-color-accent-11-scrim)); --n-color-accent-100-scrim: light-dark(var(--n-color-accent-2-scrim), var(--n-color-accent-10-scrim)); --n-color-accent-200-scrim: light-dark(var(--n-color-accent-3-scrim), var(--n-color-accent-9-scrim)); --n-color-accent-300-scrim: light-dark(var(--n-color-accent-4-scrim), var(--n-color-accent-8-scrim)); --n-color-accent-400-scrim: light-dark(var(--n-color-accent-5-scrim), var(--n-color-accent-7-scrim)); --n-color-accent-500-scrim: light-dark(var(--n-color-accent-6-scrim), var(--n-color-accent-6-scrim)); --n-color-accent-600-scrim: light-dark(var(--n-color-accent-7-scrim), var(--n-color-accent-5-scrim)); --n-color-accent-700-scrim: light-dark(var(--n-color-accent-8-scrim), var(--n-color-accent-4-scrim)); --n-color-accent-800-scrim: light-dark(var(--n-color-accent-9-scrim), var(--n-color-accent-3-scrim)); --n-color-accent-900-scrim: light-dark(var(--n-color-accent-10-scrim), var(--n-color-accent-2-scrim)); --n-color-accent-950-scrim: light-dark(var(--n-color-accent-11-scrim), var(--n-color-accent-1-scrim)); --n-color-info-050-scrim: light-dark(var(--n-color-info-1-scrim), var(--n-color-info-11-scrim)); --n-color-info-100-scrim: light-dark(var(--n-color-info-2-scrim), var(--n-color-info-10-scrim)); --n-color-info-200-scrim: light-dark(var(--n-color-info-3-scrim), var(--n-color-info-9-scrim)); --n-color-info-300-scrim: light-dark(var(--n-color-info-4-scrim), var(--n-color-info-8-scrim)); --n-color-info-400-scrim: light-dark(var(--n-color-info-5-scrim), var(--n-color-info-7-scrim)); --n-color-info-500-scrim: light-dark(var(--n-color-info-6-scrim), var(--n-color-info-6-scrim)); --n-color-info-600-scrim: light-dark(var(--n-color-info-7-scrim), var(--n-color-info-5-scrim)); --n-color-info-700-scrim: light-dark(var(--n-color-info-8-scrim), var(--n-color-info-4-scrim)); --n-color-info-800-scrim: light-dark(var(--n-color-info-9-scrim), var(--n-color-info-3-scrim)); --n-color-info-900-scrim: light-dark(var(--n-color-info-10-scrim), var(--n-color-info-2-scrim)); --n-color-info-950-scrim: light-dark(var(--n-color-info-11-scrim), var(--n-color-info-1-scrim)); --n-color-success-050-scrim: light-dark(var(--n-color-success-1-scrim), var(--n-color-success-11-scrim)); --n-color-success-100-scrim: light-dark(var(--n-color-success-2-scrim), var(--n-color-success-10-scrim)); --n-color-success-200-scrim: light-dark(var(--n-color-success-3-scrim), var(--n-color-success-9-scrim)); --n-color-success-300-scrim: light-dark(var(--n-color-success-4-scrim), var(--n-color-success-8-scrim)); --n-color-success-400-scrim: light-dark(var(--n-color-success-5-scrim), var(--n-color-success-7-scrim)); --n-color-success-500-scrim: light-dark(var(--n-color-success-6-scrim), var(--n-color-success-6-scrim)); --n-color-success-600-scrim: light-dark(var(--n-color-success-7-scrim), var(--n-color-success-5-scrim)); --n-color-success-700-scrim: light-dark(var(--n-color-success-8-scrim), var(--n-color-success-4-scrim)); --n-color-success-800-scrim: light-dark(var(--n-color-success-9-scrim), var(--n-color-success-3-scrim)); --n-color-success-900-scrim: light-dark(var(--n-color-success-10-scrim), var(--n-color-success-2-scrim)); --n-color-success-950-scrim: light-dark(var(--n-color-success-11-scrim), var(--n-color-success-1-scrim)); --n-color-warning-050-scrim: light-dark(var(--n-color-warning-1-scrim), var(--n-color-warning-11-scrim)); --n-color-warning-100-scrim: light-dark(var(--n-color-warning-2-scrim), var(--n-color-warning-10-scrim)); --n-color-warning-200-scrim: light-dark(var(--n-color-warning-3-scrim), var(--n-color-warning-9-scrim)); --n-color-warning-300-scrim: light-dark(var(--n-color-warning-4-scrim), var(--n-color-warning-8-scrim)); --n-color-warning-400-scrim: light-dark(var(--n-color-warning-5-scrim), var(--n-color-warning-7-scrim)); --n-color-warning-500-scrim: light-dark(var(--n-color-warning-6-scrim), var(--n-color-warning-6-scrim)); --n-color-warning-600-scrim: light-dark(var(--n-color-warning-7-scrim), var(--n-color-warning-5-scrim)); --n-color-warning-700-scrim: light-dark(var(--n-color-warning-8-scrim), var(--n-color-warning-4-scrim)); --n-color-warning-800-scrim: light-dark(var(--n-color-warning-9-scrim), var(--n-color-warning-3-scrim)); --n-color-warning-900-scrim: light-dark(var(--n-color-warning-10-scrim), var(--n-color-warning-2-scrim)); --n-color-warning-950-scrim: light-dark(var(--n-color-warning-11-scrim), var(--n-color-warning-1-scrim)); --n-color-danger-050-scrim: light-dark(var(--n-color-danger-1-scrim), var(--n-color-danger-11-scrim)); --n-color-danger-100-scrim: light-dark(var(--n-color-danger-2-scrim), var(--n-color-danger-10-scrim)); --n-color-danger-200-scrim: light-dark(var(--n-color-danger-3-scrim), var(--n-color-danger-9-scrim)); --n-color-danger-300-scrim: light-dark(var(--n-color-danger-4-scrim), var(--n-color-danger-8-scrim)); --n-color-danger-400-scrim: light-dark(var(--n-color-danger-5-scrim), var(--n-color-danger-7-scrim)); --n-color-danger-500-scrim: light-dark(var(--n-color-danger-6-scrim), var(--n-color-danger-6-scrim)); --n-color-danger-600-scrim: light-dark(var(--n-color-danger-7-scrim), var(--n-color-danger-5-scrim)); --n-color-danger-700-scrim: light-dark(var(--n-color-danger-8-scrim), var(--n-color-danger-4-scrim)); --n-color-danger-800-scrim: light-dark(var(--n-color-danger-9-scrim), var(--n-color-danger-3-scrim)); --n-color-danger-900-scrim: light-dark(var(--n-color-danger-10-scrim), var(--n-color-danger-2-scrim)); --n-color-danger-950-scrim: light-dark(var(--n-color-danger-11-scrim), var(--n-color-danger-1-scrim)); /* ── Scrim palette — Tint & Shade (L + alpha stepped, mode-independent) ── Both start from the family anchor (step-500 L/C/H). Strongest = anchor color at full alpha. Weakest = L-extreme at minimal alpha. L: strongest = anchor, weakest = L-max (tint) or L-min (shade), 6 intervals. Alpha: strongest = 7/7, weakest = 1/7 of n-env-alpha. Chroma = anchor chroma (--n-C-{fam}-6) throughout. */ --n-color-neutral-scrim-tint-strongest: oklch(var(--n-env-lightness-neutral) var(--n-C-neutral-6) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-neutral-scrim-tint-stronger: oklch(calc(var(--n-env-lightness-neutral) + 1 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-neutral))) var(--n-C-neutral-6) var(--n-env-hue-neutral) / calc(6 / 7 * var(--n-env-alpha))); --n-color-neutral-scrim-tint-strong: oklch(calc(var(--n-env-lightness-neutral) + 2 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-neutral))) var(--n-C-neutral-6) var(--n-env-hue-neutral) / calc(5 / 7 * var(--n-env-alpha))); --n-color-neutral-scrim-tint-base: oklch(calc(var(--n-env-lightness-neutral) + 3 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-neutral))) var(--n-C-neutral-6) var(--n-env-hue-neutral) / calc(4 / 7 * var(--n-env-alpha))); --n-color-neutral-scrim-tint-weak: oklch(calc(var(--n-env-lightness-neutral) + 4 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-neutral))) var(--n-C-neutral-6) var(--n-env-hue-neutral) / calc(3 / 7 * var(--n-env-alpha))); --n-color-neutral-scrim-tint-weaker: oklch(calc(var(--n-env-lightness-neutral) + 5 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-neutral))) var(--n-C-neutral-6) var(--n-env-hue-neutral) / calc(2 / 7 * var(--n-env-alpha))); --n-color-neutral-scrim-tint-weakest: oklch(var(--n-env-lightness-max) var(--n-C-neutral-6) var(--n-env-hue-neutral) / calc(1 / 7 * var(--n-env-alpha))); --n-color-neutral-scrim-shade-strongest: oklch(var(--n-env-lightness-neutral) var(--n-C-neutral-6) var(--n-env-hue-neutral) / var(--n-env-alpha)); --n-color-neutral-scrim-shade-stronger: oklch(calc(var(--n-env-lightness-neutral) - 1 / 6 * (var(--n-env-lightness-neutral) - var(--n-env-lightness-min))) var(--n-C-neutral-6) var(--n-env-hue-neutral) / calc(6 / 7 * var(--n-env-alpha))); --n-color-neutral-scrim-shade-strong: oklch(calc(var(--n-env-lightness-neutral) - 2 / 6 * (var(--n-env-lightness-neutral) - var(--n-env-lightness-min))) var(--n-C-neutral-6) var(--n-env-hue-neutral) / calc(5 / 7 * var(--n-env-alpha))); --n-color-neutral-scrim-shade-base: oklch(calc(var(--n-env-lightness-neutral) - 3 / 6 * (var(--n-env-lightness-neutral) - var(--n-env-lightness-min))) var(--n-C-neutral-6) var(--n-env-hue-neutral) / calc(4 / 7 * var(--n-env-alpha))); --n-color-neutral-scrim-shade-weak: oklch(calc(var(--n-env-lightness-neutral) - 4 / 6 * (var(--n-env-lightness-neutral) - var(--n-env-lightness-min))) var(--n-C-neutral-6) var(--n-env-hue-neutral) / calc(3 / 7 * var(--n-env-alpha))); --n-color-neutral-scrim-shade-weaker: oklch(calc(var(--n-env-lightness-neutral) - 5 / 6 * (var(--n-env-lightness-neutral) - var(--n-env-lightness-min))) var(--n-C-neutral-6) var(--n-env-hue-neutral) / calc(2 / 7 * var(--n-env-alpha))); --n-color-neutral-scrim-shade-weakest: oklch(var(--n-env-lightness-min) var(--n-C-neutral-6) var(--n-env-hue-neutral) / calc(1 / 7 * var(--n-env-alpha))); --n-color-accent-scrim-tint-strongest: oklch(var(--n-env-lightness-accent) var(--n-C-accent-6) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-accent-scrim-tint-stronger: oklch(calc(var(--n-env-lightness-accent) + 1 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-accent))) var(--n-C-accent-6) var(--n-env-hue-accent) / calc(6 / 7 * var(--n-env-alpha))); --n-color-accent-scrim-tint-strong: oklch(calc(var(--n-env-lightness-accent) + 2 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-accent))) var(--n-C-accent-6) var(--n-env-hue-accent) / calc(5 / 7 * var(--n-env-alpha))); --n-color-accent-scrim-tint-base: oklch(calc(var(--n-env-lightness-accent) + 3 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-accent))) var(--n-C-accent-6) var(--n-env-hue-accent) / calc(4 / 7 * var(--n-env-alpha))); --n-color-accent-scrim-tint-weak: oklch(calc(var(--n-env-lightness-accent) + 4 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-accent))) var(--n-C-accent-6) var(--n-env-hue-accent) / calc(3 / 7 * var(--n-env-alpha))); --n-color-accent-scrim-tint-weaker: oklch(calc(var(--n-env-lightness-accent) + 5 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-accent))) var(--n-C-accent-6) var(--n-env-hue-accent) / calc(2 / 7 * var(--n-env-alpha))); --n-color-accent-scrim-tint-weakest: oklch(var(--n-env-lightness-max) var(--n-C-accent-6) var(--n-env-hue-accent) / calc(1 / 7 * var(--n-env-alpha))); --n-color-accent-scrim-shade-strongest: oklch(var(--n-env-lightness-accent) var(--n-C-accent-6) var(--n-env-hue-accent) / var(--n-env-alpha)); --n-color-accent-scrim-shade-stronger: oklch(calc(var(--n-env-lightness-accent) - 1 / 6 * (var(--n-env-lightness-accent) - var(--n-env-lightness-min))) var(--n-C-accent-6) var(--n-env-hue-accent) / calc(6 / 7 * var(--n-env-alpha))); --n-color-accent-scrim-shade-strong: oklch(calc(var(--n-env-lightness-accent) - 2 / 6 * (var(--n-env-lightness-accent) - var(--n-env-lightness-min))) var(--n-C-accent-6) var(--n-env-hue-accent) / calc(5 / 7 * var(--n-env-alpha))); --n-color-accent-scrim-shade-base: oklch(calc(var(--n-env-lightness-accent) - 3 / 6 * (var(--n-env-lightness-accent) - var(--n-env-lightness-min))) var(--n-C-accent-6) var(--n-env-hue-accent) / calc(4 / 7 * var(--n-env-alpha))); --n-color-accent-scrim-shade-weak: oklch(calc(var(--n-env-lightness-accent) - 4 / 6 * (var(--n-env-lightness-accent) - var(--n-env-lightness-min))) var(--n-C-accent-6) var(--n-env-hue-accent) / calc(3 / 7 * var(--n-env-alpha))); --n-color-accent-scrim-shade-weaker: oklch(calc(var(--n-env-lightness-accent) - 5 / 6 * (var(--n-env-lightness-accent) - var(--n-env-lightness-min))) var(--n-C-accent-6) var(--n-env-hue-accent) / calc(2 / 7 * var(--n-env-alpha))); --n-color-accent-scrim-shade-weakest: oklch(var(--n-env-lightness-min) var(--n-C-accent-6) var(--n-env-hue-accent) / calc(1 / 7 * var(--n-env-alpha))); --n-color-info-scrim-tint-strongest: oklch(var(--n-env-lightness-info) var(--n-C-info-6) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-info-scrim-tint-stronger: oklch(calc(var(--n-env-lightness-info) + 1 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-info))) var(--n-C-info-6) var(--n-env-hue-info) / calc(6 / 7 * var(--n-env-alpha))); --n-color-info-scrim-tint-strong: oklch(calc(var(--n-env-lightness-info) + 2 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-info))) var(--n-C-info-6) var(--n-env-hue-info) / calc(5 / 7 * var(--n-env-alpha))); --n-color-info-scrim-tint-base: oklch(calc(var(--n-env-lightness-info) + 3 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-info))) var(--n-C-info-6) var(--n-env-hue-info) / calc(4 / 7 * var(--n-env-alpha))); --n-color-info-scrim-tint-weak: oklch(calc(var(--n-env-lightness-info) + 4 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-info))) var(--n-C-info-6) var(--n-env-hue-info) / calc(3 / 7 * var(--n-env-alpha))); --n-color-info-scrim-tint-weaker: oklch(calc(var(--n-env-lightness-info) + 5 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-info))) var(--n-C-info-6) var(--n-env-hue-info) / calc(2 / 7 * var(--n-env-alpha))); --n-color-info-scrim-tint-weakest: oklch(var(--n-env-lightness-max) var(--n-C-info-6) var(--n-env-hue-info) / calc(1 / 7 * var(--n-env-alpha))); --n-color-info-scrim-shade-strongest: oklch(var(--n-env-lightness-info) var(--n-C-info-6) var(--n-env-hue-info) / var(--n-env-alpha)); --n-color-info-scrim-shade-stronger: oklch(calc(var(--n-env-lightness-info) - 1 / 6 * (var(--n-env-lightness-info) - var(--n-env-lightness-min))) var(--n-C-info-6) var(--n-env-hue-info) / calc(6 / 7 * var(--n-env-alpha))); --n-color-info-scrim-shade-strong: oklch(calc(var(--n-env-lightness-info) - 2 / 6 * (var(--n-env-lightness-info) - var(--n-env-lightness-min))) var(--n-C-info-6) var(--n-env-hue-info) / calc(5 / 7 * var(--n-env-alpha))); --n-color-info-scrim-shade-base: oklch(calc(var(--n-env-lightness-info) - 3 / 6 * (var(--n-env-lightness-info) - var(--n-env-lightness-min))) var(--n-C-info-6) var(--n-env-hue-info) / calc(4 / 7 * var(--n-env-alpha))); --n-color-info-scrim-shade-weak: oklch(calc(var(--n-env-lightness-info) - 4 / 6 * (var(--n-env-lightness-info) - var(--n-env-lightness-min))) var(--n-C-info-6) var(--n-env-hue-info) / calc(3 / 7 * var(--n-env-alpha))); --n-color-info-scrim-shade-weaker: oklch(calc(var(--n-env-lightness-info) - 5 / 6 * (var(--n-env-lightness-info) - var(--n-env-lightness-min))) var(--n-C-info-6) var(--n-env-hue-info) / calc(2 / 7 * var(--n-env-alpha))); --n-color-info-scrim-shade-weakest: oklch(var(--n-env-lightness-min) var(--n-C-info-6) var(--n-env-hue-info) / calc(1 / 7 * var(--n-env-alpha))); --n-color-success-scrim-tint-strongest: oklch(var(--n-env-lightness-success) var(--n-C-success-6) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-success-scrim-tint-stronger: oklch(calc(var(--n-env-lightness-success) + 1 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-success))) var(--n-C-success-6) var(--n-env-hue-success) / calc(6 / 7 * var(--n-env-alpha))); --n-color-success-scrim-tint-strong: oklch(calc(var(--n-env-lightness-success) + 2 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-success))) var(--n-C-success-6) var(--n-env-hue-success) / calc(5 / 7 * var(--n-env-alpha))); --n-color-success-scrim-tint-base: oklch(calc(var(--n-env-lightness-success) + 3 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-success))) var(--n-C-success-6) var(--n-env-hue-success) / calc(4 / 7 * var(--n-env-alpha))); --n-color-success-scrim-tint-weak: oklch(calc(var(--n-env-lightness-success) + 4 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-success))) var(--n-C-success-6) var(--n-env-hue-success) / calc(3 / 7 * var(--n-env-alpha))); --n-color-success-scrim-tint-weaker: oklch(calc(var(--n-env-lightness-success) + 5 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-success))) var(--n-C-success-6) var(--n-env-hue-success) / calc(2 / 7 * var(--n-env-alpha))); --n-color-success-scrim-tint-weakest: oklch(var(--n-env-lightness-max) var(--n-C-success-6) var(--n-env-hue-success) / calc(1 / 7 * var(--n-env-alpha))); --n-color-success-scrim-shade-strongest: oklch(var(--n-env-lightness-success) var(--n-C-success-6) var(--n-env-hue-success) / var(--n-env-alpha)); --n-color-success-scrim-shade-stronger: oklch(calc(var(--n-env-lightness-success) - 1 / 6 * (var(--n-env-lightness-success) - var(--n-env-lightness-min))) var(--n-C-success-6) var(--n-env-hue-success) / calc(6 / 7 * var(--n-env-alpha))); --n-color-success-scrim-shade-strong: oklch(calc(var(--n-env-lightness-success) - 2 / 6 * (var(--n-env-lightness-success) - var(--n-env-lightness-min))) var(--n-C-success-6) var(--n-env-hue-success) / calc(5 / 7 * var(--n-env-alpha))); --n-color-success-scrim-shade-base: oklch(calc(var(--n-env-lightness-success) - 3 / 6 * (var(--n-env-lightness-success) - var(--n-env-lightness-min))) var(--n-C-success-6) var(--n-env-hue-success) / calc(4 / 7 * var(--n-env-alpha))); --n-color-success-scrim-shade-weak: oklch(calc(var(--n-env-lightness-success) - 4 / 6 * (var(--n-env-lightness-success) - var(--n-env-lightness-min))) var(--n-C-success-6) var(--n-env-hue-success) / calc(3 / 7 * var(--n-env-alpha))); --n-color-success-scrim-shade-weaker: oklch(calc(var(--n-env-lightness-success) - 5 / 6 * (var(--n-env-lightness-success) - var(--n-env-lightness-min))) var(--n-C-success-6) var(--n-env-hue-success) / calc(2 / 7 * var(--n-env-alpha))); --n-color-success-scrim-shade-weakest: oklch(var(--n-env-lightness-min) var(--n-C-success-6) var(--n-env-hue-success) / calc(1 / 7 * var(--n-env-alpha))); --n-color-warning-scrim-tint-strongest: oklch(var(--n-env-lightness-warning) var(--n-C-warning-6) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-warning-scrim-tint-stronger: oklch(calc(var(--n-env-lightness-warning) + 1 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-warning))) var(--n-C-warning-6) var(--n-env-hue-warning) / calc(6 / 7 * var(--n-env-alpha))); --n-color-warning-scrim-tint-strong: oklch(calc(var(--n-env-lightness-warning) + 2 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-warning))) var(--n-C-warning-6) var(--n-env-hue-warning) / calc(5 / 7 * var(--n-env-alpha))); --n-color-warning-scrim-tint-base: oklch(calc(var(--n-env-lightness-warning) + 3 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-warning))) var(--n-C-warning-6) var(--n-env-hue-warning) / calc(4 / 7 * var(--n-env-alpha))); --n-color-warning-scrim-tint-weak: oklch(calc(var(--n-env-lightness-warning) + 4 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-warning))) var(--n-C-warning-6) var(--n-env-hue-warning) / calc(3 / 7 * var(--n-env-alpha))); --n-color-warning-scrim-tint-weaker: oklch(calc(var(--n-env-lightness-warning) + 5 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-warning))) var(--n-C-warning-6) var(--n-env-hue-warning) / calc(2 / 7 * var(--n-env-alpha))); --n-color-warning-scrim-tint-weakest: oklch(var(--n-env-lightness-max) var(--n-C-warning-6) var(--n-env-hue-warning) / calc(1 / 7 * var(--n-env-alpha))); --n-color-warning-scrim-shade-strongest: oklch(var(--n-env-lightness-warning) var(--n-C-warning-6) var(--n-env-hue-warning) / var(--n-env-alpha)); --n-color-warning-scrim-shade-stronger: oklch(calc(var(--n-env-lightness-warning) - 1 / 6 * (var(--n-env-lightness-warning) - var(--n-env-lightness-min))) var(--n-C-warning-6) var(--n-env-hue-warning) / calc(6 / 7 * var(--n-env-alpha))); --n-color-warning-scrim-shade-strong: oklch(calc(var(--n-env-lightness-warning) - 2 / 6 * (var(--n-env-lightness-warning) - var(--n-env-lightness-min))) var(--n-C-warning-6) var(--n-env-hue-warning) / calc(5 / 7 * var(--n-env-alpha))); --n-color-warning-scrim-shade-base: oklch(calc(var(--n-env-lightness-warning) - 3 / 6 * (var(--n-env-lightness-warning) - var(--n-env-lightness-min))) var(--n-C-warning-6) var(--n-env-hue-warning) / calc(4 / 7 * var(--n-env-alpha))); --n-color-warning-scrim-shade-weak: oklch(calc(var(--n-env-lightness-warning) - 4 / 6 * (var(--n-env-lightness-warning) - var(--n-env-lightness-min))) var(--n-C-warning-6) var(--n-env-hue-warning) / calc(3 / 7 * var(--n-env-alpha))); --n-color-warning-scrim-shade-weaker: oklch(calc(var(--n-env-lightness-warning) - 5 / 6 * (var(--n-env-lightness-warning) - var(--n-env-lightness-min))) var(--n-C-warning-6) var(--n-env-hue-warning) / calc(2 / 7 * var(--n-env-alpha))); --n-color-warning-scrim-shade-weakest: oklch(var(--n-env-lightness-min) var(--n-C-warning-6) var(--n-env-hue-warning) / calc(1 / 7 * var(--n-env-alpha))); --n-color-danger-scrim-tint-strongest: oklch(var(--n-env-lightness-danger) var(--n-C-danger-6) var(--n-env-hue-danger) / var(--n-env-alpha)); --n-color-danger-scrim-tint-stronger: oklch(calc(var(--n-env-lightness-danger) + 1 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-danger))) var(--n-C-danger-6) var(--n-env-hue-danger) / calc(6 / 7 * var(--n-env-alpha))); --n-color-danger-scrim-tint-strong: oklch(calc(var(--n-env-lightness-danger) + 2 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-danger))) var(--n-C-danger-6) var(--n-env-hue-danger) / calc(5 / 7 * var(--n-env-alpha))); --n-color-danger-scrim-tint-base: oklch(calc(var(--n-env-lightness-danger) + 3 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-danger))) var(--n-C-danger-6) var(--n-env-hue-danger) / calc(4 / 7 * var(--n-env-alpha))); --n-color-danger-scrim-tint-weak: oklch(calc(var(--n-env-lightness-danger) + 4 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-danger))) var(--n-C-danger-6) var(--n-env-hue-danger) / calc(3 / 7 * var(--n-env-alpha))); --n-color-danger-scrim-tint-weaker: oklch(calc(var(--n-env-lightness-danger) + 5 / 6 * (var(--n-env-lightness-max) - var(--n-env-lightness-danger))) var(--n-C-danger-6) var(--n-env-hue-danger) / calc(2 / 7 * var(--n-env-alpha))); --n-color-danger-scrim-tint-weakest: oklch(var(--n-env-lightness-max) var(--n-C-danger-6) var(--n-env-hue-danger) / calc(1 / 7 * var(--n-env-alpha))); --n-color-danger-scrim-shade-strongest: oklch(var(--n-env-lightness-danger) var(--n-C-danger-6) var(--n-env-hue-danger) / var(--n-env-alpha)); --n-color-danger-scrim-shade-stronger: oklch(calc(var(--n-env-lightness-danger) - 1 / 6 * (var(--n-env-lightness-danger) - var(--n-env-lightness-min))) var(--n-C-danger-6) var(--n-env-hue-danger) / calc(6 / 7 * var(--n-env-alpha))); --n-color-danger-scrim-shade-strong: oklch(calc(var(--n-env-lightness-danger) - 2 / 6 * (var(--n-env-lightness-danger) - var(--n-env-lightness-min))) var(--n-C-danger-6) var(--n-env-hue-danger) / calc(5 / 7 * var(--n-env-alpha))); --n-color-danger-scrim-shade-base: oklch(calc(var(--n-env-lightness-danger) - 3 / 6 * (var(--n-env-lightness-danger) - var(--n-env-lightness-min))) var(--n-C-danger-6) var(--n-env-hue-danger) / calc(4 / 7 * var(--n-env-alpha))); --n-color-danger-scrim-shade-weak: oklch(calc(var(--n-env-lightness-danger) - 4 / 6 * (var(--n-env-lightness-danger) - var(--n-env-lightness-min))) var(--n-C-danger-6) var(--n-env-hue-danger) / calc(3 / 7 * var(--n-env-alpha))); --n-color-danger-scrim-shade-weaker: oklch(calc(var(--n-env-lightness-danger) - 5 / 6 * (var(--n-env-lightness-danger) - var(--n-env-lightness-min))) var(--n-C-danger-6) var(--n-env-hue-danger) / calc(2 / 7 * var(--n-env-alpha))); --n-color-danger-scrim-shade-weakest: oklch(var(--n-env-lightness-min) var(--n-C-danger-6) var(--n-env-hue-danger) / calc(1 / 7 * var(--n-env-alpha))); /* ── Scrim anchor aliases (bare name = step 500) ── */ --n-color-neutral-scrim: var(--n-color-neutral-500-scrim); --n-color-accent-scrim: var(--n-color-accent-500-scrim); --n-color-info-scrim: var(--n-color-info-500-scrim); --n-color-success-scrim: var(--n-color-success-500-scrim); --n-color-warning-scrim: var(--n-color-warning-500-scrim); --n-color-danger-scrim: var(--n-color-danger-500-scrim); /* ── Adaptive scrims (light-dark) ── light-dark(shade, tint) — shade darkens in light mode, tint lightens in dark mode. Use these for controls, buttons, and any surface that needs to "deepen" relative to its parent ground regardless of color scheme. */ --n-color-neutral-scrim-strongest: light-dark(var(--n-color-neutral-scrim-shade-strongest), var(--n-color-neutral-scrim-tint-strongest)); --n-color-neutral-scrim-stronger: light-dark(var(--n-color-neutral-scrim-shade-stronger), var(--n-color-neutral-scrim-tint-stronger)); --n-color-neutral-scrim-strong: light-dark(var(--n-color-neutral-scrim-shade-strong), var(--n-color-neutral-scrim-tint-strong)); --n-color-neutral-scrim-base: light-dark(var(--n-color-neutral-scrim-shade-base), var(--n-color-neutral-scrim-tint-base)); --n-color-neutral-scrim-weak: light-dark(var(--n-color-neutral-scrim-shade-weak), var(--n-color-neutral-scrim-tint-weak)); --n-color-neutral-scrim-weaker: light-dark(var(--n-color-neutral-scrim-shade-weaker), var(--n-color-neutral-scrim-tint-weaker)); --n-color-neutral-scrim-weakest: light-dark(var(--n-color-neutral-scrim-shade-weakest), var(--n-color-neutral-scrim-tint-weakest)); --n-color-accent-scrim-strongest: light-dark(var(--n-color-accent-scrim-shade-strongest), var(--n-color-accent-scrim-tint-strongest)); --n-color-accent-scrim-stronger: light-dark(var(--n-color-accent-scrim-shade-stronger), var(--n-color-accent-scrim-tint-stronger)); --n-color-accent-scrim-strong: light-dark(var(--n-color-accent-scrim-shade-strong), var(--n-color-accent-scrim-tint-strong)); --n-color-accent-scrim-base: light-dark(var(--n-color-accent-scrim-shade-base), var(--n-color-accent-scrim-tint-base)); --n-color-accent-scrim-weak: light-dark(var(--n-color-accent-scrim-shade-weak), var(--n-color-accent-scrim-tint-weak)); --n-color-accent-scrim-weaker: light-dark(var(--n-color-accent-scrim-shade-weaker), var(--n-color-accent-scrim-tint-weaker)); --n-color-accent-scrim-weakest: light-dark(var(--n-color-accent-scrim-shade-weakest), var(--n-color-accent-scrim-tint-weakest)); --n-color-info-scrim-strongest: light-dark(var(--n-color-info-scrim-shade-strongest), var(--n-color-info-scrim-tint-strongest)); --n-color-info-scrim-stronger: light-dark(var(--n-color-info-scrim-shade-stronger), var(--n-color-info-scrim-tint-stronger)); --n-color-info-scrim-strong: light-dark(var(--n-color-info-scrim-shade-strong), var(--n-color-info-scrim-tint-strong)); --n-color-info-scrim-base: light-dark(var(--n-color-info-scrim-shade-base), var(--n-color-info-scrim-tint-base)); --n-color-info-scrim-weak: light-dark(var(--n-color-info-scrim-shade-weak), var(--n-color-info-scrim-tint-weak)); --n-color-info-scrim-weaker: light-dark(var(--n-color-info-scrim-shade-weaker), var(--n-color-info-scrim-tint-weaker)); --n-color-info-scrim-weakest: light-dark(var(--n-color-info-scrim-shade-weakest), var(--n-color-info-scrim-tint-weakest)); --n-color-success-scrim-strongest: light-dark(var(--n-color-success-scrim-shade-strongest), var(--n-color-success-scrim-tint-strongest)); --n-color-success-scrim-stronger: light-dark(var(--n-color-success-scrim-shade-stronger), var(--n-color-success-scrim-tint-stronger)); --n-color-success-scrim-strong: light-dark(var(--n-color-success-scrim-shade-strong), var(--n-color-success-scrim-tint-strong)); --n-color-success-scrim-base: light-dark(var(--n-color-success-scrim-shade-base), var(--n-color-success-scrim-tint-base)); --n-color-success-scrim-weak: light-dark(var(--n-color-success-scrim-shade-weak), var(--n-color-success-scrim-tint-weak)); --n-color-success-scrim-weaker: light-dark(var(--n-color-success-scrim-shade-weaker), var(--n-color-success-scrim-tint-weaker)); --n-color-success-scrim-weakest: light-dark(var(--n-color-success-scrim-shade-weakest), var(--n-color-success-scrim-tint-weakest)); --n-color-warning-scrim-strongest: light-dark(var(--n-color-warning-scrim-shade-strongest), var(--n-color-warning-scrim-tint-strongest)); --n-color-warning-scrim-stronger: light-dark(var(--n-color-warning-scrim-shade-stronger), var(--n-color-warning-scrim-tint-stronger)); --n-color-warning-scrim-strong: light-dark(var(--n-color-warning-scrim-shade-strong), var(--n-color-warning-scrim-tint-strong)); --n-color-warning-scrim-base: light-dark(var(--n-color-warning-scrim-shade-base), var(--n-color-warning-scrim-tint-base)); --n-color-warning-scrim-weak: light-dark(var(--n-color-warning-scrim-shade-weak), var(--n-color-warning-scrim-tint-weak)); --n-color-warning-scrim-weaker: light-dark(var(--n-color-warning-scrim-shade-weaker), var(--n-color-warning-scrim-tint-weaker)); --n-color-warning-scrim-weakest: light-dark(var(--n-color-warning-scrim-shade-weakest), var(--n-color-warning-scrim-tint-weakest)); --n-color-danger-scrim-strongest: light-dark(var(--n-color-danger-scrim-shade-strongest), var(--n-color-danger-scrim-tint-strongest)); --n-color-danger-scrim-stronger: light-dark(var(--n-color-danger-scrim-shade-stronger), var(--n-color-danger-scrim-tint-stronger)); --n-color-danger-scrim-strong: light-dark(var(--n-color-danger-scrim-shade-strong), var(--n-color-danger-scrim-tint-strong)); --n-color-danger-scrim-base: light-dark(var(--n-color-danger-scrim-shade-base), var(--n-color-danger-scrim-tint-base)); --n-color-danger-scrim-weak: light-dark(var(--n-color-danger-scrim-shade-weak), var(--n-color-danger-scrim-tint-weak)); --n-color-danger-scrim-weaker: light-dark(var(--n-color-danger-scrim-shade-weaker), var(--n-color-danger-scrim-tint-weaker)); --n-color-danger-scrim-weakest: light-dark(var(--n-color-danger-scrim-shade-weakest), var(--n-color-danger-scrim-tint-weakest)); /* ── Background — Elevation aliases ── Same step in both modes → visual layer stays consistent. */ --n-color-neutral-lowest: light-dark(oklch(var(--n-L-light-1) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-1) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-neutral-lower: light-dark(oklch(var(--n-L-light-2) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-2) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-neutral-low: light-dark(oklch(var(--n-L-light-3) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-3) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-neutral-base: light-dark(oklch(var(--n-L-light-4) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-4) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-neutral-high: light-dark(oklch(var(--n-L-light-5) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-5) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-neutral-higher: light-dark(oklch(var(--n-L-light-6) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-6) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-neutral-highest: light-dark(oklch(var(--n-L-light-7) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-7) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-accent-lowest: light-dark(oklch(var(--n-L-light-1) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-1) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-accent-lower: light-dark(oklch(var(--n-L-light-2) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-2) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-accent-low: light-dark(oklch(var(--n-L-light-3) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-3) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-accent-base: light-dark(oklch(var(--n-L-light-4) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-4) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-accent-high: light-dark(oklch(var(--n-L-light-5) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-5) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-accent-higher: light-dark(oklch(var(--n-L-light-6) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-6) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-accent-highest: light-dark(oklch(var(--n-L-light-7) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-7) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-info-lowest: light-dark(oklch(var(--n-L-light-1) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-1) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-info-lower: light-dark(oklch(var(--n-L-light-2) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-2) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-info-low: light-dark(oklch(var(--n-L-light-3) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-3) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-info-base: light-dark(oklch(var(--n-L-light-4) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-4) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-info-high: light-dark(oklch(var(--n-L-light-5) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-5) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-info-higher: light-dark(oklch(var(--n-L-light-6) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-6) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-info-highest: light-dark(oklch(var(--n-L-light-7) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-7) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-success-lowest: light-dark(oklch(var(--n-L-light-1) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-1) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-success-lower: light-dark(oklch(var(--n-L-light-2) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-2) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-success-low: light-dark(oklch(var(--n-L-light-3) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-3) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-success-base: light-dark(oklch(var(--n-L-light-4) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-4) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-success-high: light-dark(oklch(var(--n-L-light-5) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-5) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-success-higher: light-dark(oklch(var(--n-L-light-6) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-6) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-success-highest: light-dark(oklch(var(--n-L-light-7) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-7) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-warning-lowest: light-dark(oklch(var(--n-L-light-1) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-1) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-warning-lower: light-dark(oklch(var(--n-L-light-2) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-2) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-warning-low: light-dark(oklch(var(--n-L-light-3) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-3) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-warning-base: light-dark(oklch(var(--n-L-light-4) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-4) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-warning-high: light-dark(oklch(var(--n-L-light-5) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-5) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-warning-higher: light-dark(oklch(var(--n-L-light-6) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-6) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-warning-highest: light-dark(oklch(var(--n-L-light-7) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-7) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-danger-lowest: light-dark(oklch(var(--n-L-light-1) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-1) var(--n-C-danger-muted) var(--n-env-hue-danger))); --n-color-danger-lower: light-dark(oklch(var(--n-L-light-2) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-2) var(--n-C-danger-muted) var(--n-env-hue-danger))); --n-color-danger-low: light-dark(oklch(var(--n-L-light-3) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-3) var(--n-C-danger-muted) var(--n-env-hue-danger))); --n-color-danger-base: light-dark(oklch(var(--n-L-light-4) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-4) var(--n-C-danger-muted) var(--n-env-hue-danger))); --n-color-danger-high: light-dark(oklch(var(--n-L-light-5) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-5) var(--n-C-danger-muted) var(--n-env-hue-danger))); --n-color-danger-higher: light-dark(oklch(var(--n-L-light-6) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-6) var(--n-C-danger-muted) var(--n-env-hue-danger))); --n-color-danger-highest: light-dark(oklch(var(--n-L-light-7) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-7) var(--n-C-danger-muted) var(--n-env-hue-danger))); /* ── Background — Brightness aliases ── Flipped step mapping across modes → "brightest" is always brightest. */ --n-color-neutral-brightest: light-dark(oklch(var(--n-L-light-1) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-7) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-neutral-brighter: light-dark(oklch(var(--n-L-light-2) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-6) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-neutral-bright: light-dark(oklch(var(--n-L-light-3) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-5) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-neutral-dim: light-dark(oklch(var(--n-L-light-5) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-3) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-neutral-dimmer: light-dark(oklch(var(--n-L-light-6) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-2) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-neutral-dimmest: light-dark(oklch(var(--n-L-light-7) var(--n-C-neutral-muted) var(--n-env-hue-neutral)), oklch(var(--n-L-dark-1) var(--n-C-neutral-muted) var(--n-env-hue-neutral))); --n-color-accent-brightest: light-dark(oklch(var(--n-L-light-1) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-7) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-accent-brighter: light-dark(oklch(var(--n-L-light-2) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-6) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-accent-bright: light-dark(oklch(var(--n-L-light-3) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-5) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-accent-dim: light-dark(oklch(var(--n-L-light-5) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-3) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-accent-dimmer: light-dark(oklch(var(--n-L-light-6) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-2) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-accent-dimmest: light-dark(oklch(var(--n-L-light-7) var(--n-C-accent-muted) var(--n-env-hue-accent)), oklch(var(--n-L-dark-1) var(--n-C-accent-muted) var(--n-env-hue-accent))); --n-color-info-brightest: light-dark(oklch(var(--n-L-light-1) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-7) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-info-brighter: light-dark(oklch(var(--n-L-light-2) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-6) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-info-bright: light-dark(oklch(var(--n-L-light-3) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-5) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-info-dim: light-dark(oklch(var(--n-L-light-5) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-3) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-info-dimmer: light-dark(oklch(var(--n-L-light-6) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-2) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-info-dimmest: light-dark(oklch(var(--n-L-light-7) var(--n-C-info-muted) var(--n-env-hue-info)), oklch(var(--n-L-dark-1) var(--n-C-info-muted) var(--n-env-hue-info))); --n-color-success-brightest: light-dark(oklch(var(--n-L-light-1) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-7) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-success-brighter: light-dark(oklch(var(--n-L-light-2) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-6) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-success-bright: light-dark(oklch(var(--n-L-light-3) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-5) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-success-dim: light-dark(oklch(var(--n-L-light-5) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-3) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-success-dimmer: light-dark(oklch(var(--n-L-light-6) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-2) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-success-dimmest: light-dark(oklch(var(--n-L-light-7) var(--n-C-success-muted) var(--n-env-hue-success)), oklch(var(--n-L-dark-1) var(--n-C-success-muted) var(--n-env-hue-success))); --n-color-warning-brightest: light-dark(oklch(var(--n-L-light-1) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-7) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-warning-brighter: light-dark(oklch(var(--n-L-light-2) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-6) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-warning-bright: light-dark(oklch(var(--n-L-light-3) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-5) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-warning-dim: light-dark(oklch(var(--n-L-light-5) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-3) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-warning-dimmer: light-dark(oklch(var(--n-L-light-6) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-2) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-warning-dimmest: light-dark(oklch(var(--n-L-light-7) var(--n-C-warning-muted) var(--n-env-hue-warning)), oklch(var(--n-L-dark-1) var(--n-C-warning-muted) var(--n-env-hue-warning))); --n-color-danger-brightest: light-dark(oklch(var(--n-L-light-1) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-7) var(--n-C-danger-muted) var(--n-env-hue-danger))); --n-color-danger-brighter: light-dark(oklch(var(--n-L-light-2) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-6) var(--n-C-danger-muted) var(--n-env-hue-danger))); --n-color-danger-bright: light-dark(oklch(var(--n-L-light-3) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-5) var(--n-C-danger-muted) var(--n-env-hue-danger))); --n-color-danger-dim: light-dark(oklch(var(--n-L-light-5) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-3) var(--n-C-danger-muted) var(--n-env-hue-danger))); --n-color-danger-dimmer: light-dark(oklch(var(--n-L-light-6) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-2) var(--n-C-danger-muted) var(--n-env-hue-danger))); --n-color-danger-dimmest: light-dark(oklch(var(--n-L-light-7) var(--n-C-danger-muted) var(--n-env-hue-danger)), oklch(var(--n-L-dark-1) var(--n-C-danger-muted) var(--n-env-hue-danger))); } } /* ================================================================ nonoun-css Semantic Color Tokens Maps color primitives to UI roles: Grounds — backgrounds by elevation (doc → body → panel → control → card → modal) Ink — text/icons on grounds Stroke — borders/dividers on grounds (muted scrims) Surface — interactive element fills (buttons, badges) Surface Ink — text/icons on surfaces Outline — borders on surfaces (higher contrast scrims) ================================================================ */ @layer tokens { :root { /* ── Neutral ── */ /* Grounds */ --n-doc-neutral: var(--n-color-neutral-dimmer); --n-doc-hover-neutral: var(--n-color-neutral-lower); --n-doc-active-neutral: var(--n-color-neutral-low); --n-doc-disabled-neutral: var(--n-color-neutral-base); --n-body-neutral: var(--n-color-neutral-low); --n-body-hover-neutral: var(--n-color-neutral-bright); --n-body-active-neutral: var(--n-color-neutral-brighter); --n-body-disabled-neutral: var(--n-color-neutral-base); --n-panel-neutral: var(--n-color-neutral-base); --n-panel-hover-neutral: var(--n-color-neutral-brighter); --n-panel-active-neutral: var(--n-color-neutral-bright); --n-panel-disabled-neutral: var(--n-color-neutral-low); --n-control-neutral: var(--n-color-neutral-scrim-weakest); --n-control-hover-neutral: var(--n-color-neutral-scrim-weaker); --n-control-active-neutral: var(--n-color-neutral-scrim-weak); --n-control-disabled-neutral: var(--n-color-neutral-scrim-weakest); --n-button-neutral: var(--n-color-neutral-scrim-weakest); --n-button-hover-neutral: var(--n-color-neutral-scrim-weaker); --n-button-active-neutral: var(--n-color-neutral-scrim-weak); --n-button-disabled-neutral: var(--n-color-neutral-scrim-weakest); --n-popover-neutral: var(--n-color-neutral-brightest); --n-popover-hover-neutral: var(--n-color-neutral-brightest); --n-popover-active-neutral: var(--n-color-neutral-brightest); --n-popover-disabled-neutral: var(--n-color-neutral-base); --n-card-neutral: var(--n-color-neutral-higher); --n-card-hover-neutral: var(--n-color-neutral-brightest); --n-card-active-neutral: var(--n-color-neutral-brighter); --n-card-disabled-neutral: var(--n-color-neutral-base); --n-modal-neutral: var(--n-color-neutral-brightest); --n-modal-hover-neutral: var(--n-color-neutral-brightest); --n-modal-active-neutral: var(--n-color-neutral-brightest); --n-modal-disabled-neutral: var(--n-color-neutral-base); /* Ink */ --n-ink-neutral: var(--n-color-neutral-800); --n-ink-strong-neutral: var(--n-color-neutral-950); --n-ink-inverse-neutral: var(--n-color-neutral-11); --n-ink-muted-neutral: var(--n-color-neutral-600); --n-ink-placeholder-neutral: var(--n-color-neutral-400); --n-ink-hover-neutral: var(--n-color-neutral-950); --n-ink-active-neutral: var(--n-color-neutral-500); --n-ink-disabled-neutral: var(--n-color-neutral-400); /* Border */ --n-border-neutral: var(--n-color-neutral-200-scrim); --n-border-muted-neutral: var(--n-color-neutral-100-scrim); --n-border-hover-neutral: var(--n-color-neutral-300-scrim); --n-border-active-neutral: var(--n-color-neutral-400-scrim); --n-border-disabled-neutral: var(--n-color-neutral-200-scrim); /* Surface */ --n-surface-neutral: var(--n-color-neutral-500); --n-surface-hover-neutral: var(--n-color-neutral-400); --n-surface-active-neutral: var(--n-color-neutral-600); --n-surface-disabled-neutral: var(--n-color-neutral-200); /* Surface Ink */ --n-surface-ink-neutral: white; --n-surface-ink-hover-neutral: white; --n-surface-ink-active-neutral: var(--n-color-neutral-950); --n-surface-ink-disabled-neutral: oklch(1 0 0 / 0.5); /* ── Accent ── */ /* Grounds */ --n-doc-accent: var(--n-color-accent-lowest); --n-doc-hover-accent: var(--n-color-accent-lower); --n-doc-active-accent: var(--n-color-accent-low); --n-doc-disabled-accent: var(--n-color-accent-base); --n-body-accent: var(--n-color-accent-low); --n-body-hover-accent: var(--n-color-accent-bright); --n-body-active-accent: var(--n-color-accent-brighter); --n-body-disabled-accent: var(--n-color-accent-base); --n-panel-accent: var(--n-color-accent-bright); --n-panel-hover-accent: var(--n-color-accent-brighter); --n-panel-active-accent: var(--n-color-accent-brightest); --n-panel-disabled-accent: var(--n-color-accent-base); --n-control-accent: var(--n-color-accent-scrim-weakest); --n-control-hover-accent: var(--n-color-accent-scrim-weaker); --n-control-active-accent: var(--n-color-accent-scrim-weak); --n-control-disabled-accent: var(--n-color-accent-scrim-weakest); --n-button-accent: var(--n-color-accent-scrim-weakest); --n-button-hover-accent: var(--n-color-accent-scrim-weaker); --n-button-active-accent: var(--n-color-accent-scrim-weak); --n-button-disabled-accent: var(--n-color-accent-scrim-weakest); --n-popover-accent: var(--n-color-accent-brightest); --n-popover-hover-accent: var(--n-color-accent-brightest); --n-popover-active-accent: var(--n-color-accent-brightest); --n-popover-disabled-accent: var(--n-color-accent-base); --n-card-accent: var(--n-color-accent-brighter); --n-card-hover-accent: var(--n-color-accent-brightest); --n-card-active-accent: var(--n-color-accent-brightest); --n-card-disabled-accent: var(--n-color-accent-base); --n-modal-accent: var(--n-color-accent-brightest); --n-modal-hover-accent: var(--n-color-accent-brightest); --n-modal-active-accent: var(--n-color-accent-brightest); --n-modal-disabled-accent: var(--n-color-accent-base); /* Ink */ --n-ink-accent: var(--n-color-accent-800); --n-ink-strong-accent: var(--n-color-accent-950); --n-ink-inverse-accent: var(--n-color-accent-11); --n-ink-muted-accent: var(--n-color-accent-600); --n-ink-placeholder-accent: var(--n-color-accent-400); --n-ink-hover-accent: var(--n-color-accent-950); --n-ink-active-accent: var(--n-color-accent-500); --n-ink-disabled-accent: var(--n-color-accent-400); /* Border */ --n-border-accent: var(--n-color-accent-200-scrim); --n-border-muted-accent: var(--n-color-accent-100-scrim); --n-border-hover-accent: var(--n-color-accent-300-scrim); --n-border-active-accent: var(--n-color-accent-400-scrim); --n-border-disabled-accent: var(--n-color-accent-200-scrim); /* Surface */ --n-surface-accent: var(--n-color-accent-500); --n-surface-hover-accent: var(--n-color-accent-400); --n-surface-active-accent: var(--n-color-accent-600); --n-surface-disabled-accent: var(--n-color-accent-200); /* Surface Ink */ --n-surface-ink-accent: white; --n-surface-ink-hover-accent: white; --n-surface-ink-active-accent: var(--n-color-accent-950); --n-surface-ink-disabled-accent: oklch(1 0 0 / 0.5); /* ── Info ── */ /* Grounds */ --n-doc-info: var(--n-color-info-lowest); --n-doc-hover-info: var(--n-color-info-lower); --n-doc-active-info: var(--n-color-info-low); --n-doc-disabled-info: var(--n-color-info-base); --n-body-info: var(--n-color-info-low); --n-body-hover-info: var(--n-color-info-bright); --n-body-active-info: var(--n-color-info-brighter); --n-body-disabled-info: var(--n-color-info-base); --n-panel-info: var(--n-color-info-bright); --n-panel-hover-info: var(--n-color-info-brighter); --n-panel-active-info: var(--n-color-info-brightest); --n-panel-disabled-info: var(--n-color-info-base); --n-control-info: var(--n-color-info-scrim-weakest); --n-control-hover-info: var(--n-color-info-scrim-weaker); --n-control-active-info: var(--n-color-info-scrim-weak); --n-control-disabled-info: var(--n-color-info-scrim-weakest); --n-button-info: var(--n-color-info-scrim-weakest); --n-button-hover-info: var(--n-color-info-scrim-weaker); --n-button-active-info: var(--n-color-info-scrim-weak); --n-button-disabled-info: var(--n-color-info-scrim-weakest); --n-popover-info: var(--n-color-info-brightest); --n-popover-hover-info: var(--n-color-info-brightest); --n-popover-active-info: var(--n-color-info-brightest); --n-popover-disabled-info: var(--n-color-info-base); --n-card-info: var(--n-color-info-brighter); --n-card-hover-info: var(--n-color-info-brightest); --n-card-active-info: var(--n-color-info-brightest); --n-card-disabled-info: var(--n-color-info-base); --n-modal-info: var(--n-color-info-brightest); --n-modal-hover-info: var(--n-color-info-brightest); --n-modal-active-info: var(--n-color-info-brightest); --n-modal-disabled-info: var(--n-color-info-base); /* Ink */ --n-ink-info: var(--n-color-info-800); --n-ink-strong-info: var(--n-color-info-950); --n-ink-inverse-info: var(--n-color-info-11); --n-ink-muted-info: var(--n-color-info-600); --n-ink-placeholder-info: var(--n-color-info-400); --n-ink-hover-info: var(--n-color-info-950); --n-ink-active-info: var(--n-color-info-500); --n-ink-disabled-info: var(--n-color-info-400); /* Border */ --n-border-info: var(--n-color-info-200-scrim); --n-border-muted-info: var(--n-color-info-100-scrim); --n-border-hover-info: var(--n-color-info-300-scrim); --n-border-active-info: var(--n-color-info-400-scrim); --n-border-disabled-info: var(--n-color-info-200-scrim); /* Surface */ --n-surface-info: var(--n-color-info-500); --n-surface-hover-info: var(--n-color-info-400); --n-surface-active-info: var(--n-color-info-600); --n-surface-disabled-info: var(--n-color-info-200); /* Surface Ink */ --n-surface-ink-info: white; --n-surface-ink-hover-info: white; --n-surface-ink-active-info: var(--n-color-info-950); --n-surface-ink-disabled-info: oklch(1 0 0 / 0.5); /* ── Success ── */ /* Grounds */ --n-doc-success: var(--n-color-success-lowest); --n-doc-hover-success: var(--n-color-success-lower); --n-doc-active-success: var(--n-color-success-low); --n-doc-disabled-success: var(--n-color-success-base); --n-body-success: var(--n-color-success-low); --n-body-hover-success: var(--n-color-success-bright); --n-body-active-success: var(--n-color-success-brighter); --n-body-disabled-success: var(--n-color-success-base); --n-panel-success: var(--n-color-success-bright); --n-panel-hover-success: var(--n-color-success-brighter); --n-panel-active-success: var(--n-color-success-brightest); --n-panel-disabled-success: var(--n-color-success-base); --n-control-success: var(--n-color-success-scrim-weakest); --n-control-hover-success: var(--n-color-success-scrim-weaker); --n-control-active-success: var(--n-color-success-scrim-weak); --n-control-disabled-success: var(--n-color-success-scrim-weakest); --n-button-success: var(--n-color-success-scrim-weakest); --n-button-hover-success: var(--n-color-success-scrim-weaker); --n-button-active-success: var(--n-color-success-scrim-weak); --n-button-disabled-success: var(--n-color-success-scrim-weakest); --n-popover-success: var(--n-color-success-brightest); --n-popover-hover-success: var(--n-color-success-brightest); --n-popover-active-success: var(--n-color-success-brightest); --n-popover-disabled-success: var(--n-color-success-base); --n-card-success: var(--n-color-success-brighter); --n-card-hover-success: var(--n-color-success-brightest); --n-card-active-success: var(--n-color-success-brightest); --n-card-disabled-success: var(--n-color-success-base); --n-modal-success: var(--n-color-success-brightest); --n-modal-hover-success: var(--n-color-success-brightest); --n-modal-active-success: var(--n-color-success-brightest); --n-modal-disabled-success: var(--n-color-success-base); /* Ink */ --n-ink-success: var(--n-color-success-800); --n-ink-strong-success: var(--n-color-success-950); --n-ink-inverse-success: var(--n-color-success-11); --n-ink-muted-success: var(--n-color-success-600); --n-ink-placeholder-success: var(--n-color-success-400); --n-ink-hover-success: var(--n-color-success-950); --n-ink-active-success: var(--n-color-success-500); --n-ink-disabled-success: var(--n-color-success-400); /* Border */ --n-border-success: var(--n-color-success-200-scrim); --n-border-muted-success: var(--n-color-success-100-scrim); --n-border-hover-success: var(--n-color-success-300-scrim); --n-border-active-success: var(--n-color-success-400-scrim); --n-border-disabled-success: var(--n-color-success-200-scrim); /* Surface */ --n-surface-success: var(--n-color-success-500); --n-surface-hover-success: var(--n-color-success-400); --n-surface-active-success: var(--n-color-success-600); --n-surface-disabled-success: var(--n-color-success-200); /* Surface Ink */ --n-surface-ink-success: white; --n-surface-ink-hover-success: white; --n-surface-ink-active-success: var(--n-color-success-950); --n-surface-ink-disabled-success: oklch(1 0 0 / 0.5); /* ── Warning ── */ /* Grounds */ --n-doc-warning: var(--n-color-warning-lowest); --n-doc-hover-warning: var(--n-color-warning-lower); --n-doc-active-warning: var(--n-color-warning-low); --n-doc-disabled-warning: var(--n-color-warning-base); --n-body-warning: var(--n-color-warning-low); --n-body-hover-warning: var(--n-color-warning-bright); --n-body-active-warning: var(--n-color-warning-brighter); --n-body-disabled-warning: var(--n-color-warning-base); --n-panel-warning: var(--n-color-warning-bright); --n-panel-hover-warning: var(--n-color-warning-brighter); --n-panel-active-warning: var(--n-color-warning-brightest); --n-panel-disabled-warning: var(--n-color-warning-base); --n-control-warning: var(--n-color-warning-scrim-weakest); --n-control-hover-warning: var(--n-color-warning-scrim-weaker); --n-control-active-warning: var(--n-color-warning-scrim-weak); --n-control-disabled-warning: var(--n-color-warning-scrim-weakest); --n-button-warning: var(--n-color-warning-scrim-weakest); --n-button-hover-warning: var(--n-color-warning-scrim-weaker); --n-button-active-warning: var(--n-color-warning-scrim-weak); --n-button-disabled-warning: var(--n-color-warning-scrim-weakest); --n-popover-warning: var(--n-color-warning-brightest); --n-popover-hover-warning: var(--n-color-warning-brightest); --n-popover-active-warning: var(--n-color-warning-brightest); --n-popover-disabled-warning: var(--n-color-warning-base); --n-card-warning: var(--n-color-warning-brighter); --n-card-hover-warning: var(--n-color-warning-brightest); --n-card-active-warning: var(--n-color-warning-brightest); --n-card-disabled-warning: var(--n-color-warning-base); --n-modal-warning: var(--n-color-warning-brightest); --n-modal-hover-warning: var(--n-color-warning-brightest); --n-modal-active-warning: var(--n-color-warning-brightest); --n-modal-disabled-warning: var(--n-color-warning-base); /* Ink */ --n-ink-warning: var(--n-color-warning-800); --n-ink-strong-warning: var(--n-color-warning-950); --n-ink-inverse-warning: var(--n-color-warning-11); --n-ink-muted-warning: var(--n-color-warning-600); --n-ink-placeholder-warning: var(--n-color-warning-400); --n-ink-hover-warning: var(--n-color-warning-950); --n-ink-active-warning: var(--n-color-warning-500); --n-ink-disabled-warning: var(--n-color-warning-400); /* Border */ --n-border-warning: var(--n-color-warning-200-scrim); --n-border-muted-warning: var(--n-color-warning-100-scrim); --n-border-hover-warning: var(--n-color-warning-300-scrim); --n-border-active-warning: var(--n-color-warning-400-scrim); --n-border-disabled-warning: var(--n-color-warning-200-scrim); /* Surface */ --n-surface-warning: var(--n-color-warning-500); --n-surface-hover-warning: var(--n-color-warning-400); --n-surface-active-warning: var(--n-color-warning-600); --n-surface-disabled-warning: var(--n-color-warning-200); /* Surface Ink */ --n-surface-ink-warning: white; --n-surface-ink-hover-warning: white; --n-surface-ink-active-warning: var(--n-color-warning-950); --n-surface-ink-disabled-warning: oklch(1 0 0 / 0.5); /* ── Danger ── */ /* Grounds */ --n-doc-danger: var(--n-color-danger-lowest); --n-doc-hover-danger: var(--n-color-danger-lower); --n-doc-active-danger: var(--n-color-danger-low); --n-doc-disabled-danger: var(--n-color-danger-base); --n-body-danger: var(--n-color-danger-low); --n-body-hover-danger: var(--n-color-danger-bright); --n-body-active-danger: var(--n-color-danger-brighter); --n-body-disabled-danger: var(--n-color-danger-base); --n-panel-danger: var(--n-color-danger-bright); --n-panel-hover-danger: var(--n-color-danger-brighter); --n-panel-active-danger: var(--n-color-danger-brightest); --n-panel-disabled-danger: var(--n-color-danger-base); --n-control-danger: var(--n-color-danger-scrim-weakest); --n-control-hover-danger: var(--n-color-danger-scrim-weaker); --n-control-active-danger: var(--n-color-danger-scrim-weak); --n-control-disabled-danger: var(--n-color-danger-scrim-weakest); --n-button-danger: var(--n-color-danger-scrim-weakest); --n-button-hover-danger: var(--n-color-danger-scrim-weaker); --n-button-active-danger: var(--n-color-danger-scrim-weak); --n-button-disabled-danger: var(--n-color-danger-scrim-weakest); --n-popover-danger: var(--n-color-danger-brightest); --n-popover-hover-danger: var(--n-color-danger-brightest); --n-popover-active-danger: var(--n-color-danger-brightest); --n-popover-disabled-danger: var(--n-color-danger-base); --n-card-danger: var(--n-color-danger-brighter); --n-card-hover-danger: var(--n-color-danger-brightest); --n-card-active-danger: var(--n-color-danger-brightest); --n-card-disabled-danger: var(--n-color-danger-base); --n-modal-danger: var(--n-color-danger-brightest); --n-modal-hover-danger: var(--n-color-danger-brightest); --n-modal-active-danger: var(--n-color-danger-brightest); --n-modal-disabled-danger: var(--n-color-danger-base); /* Ink */ --n-ink-danger: var(--n-color-danger-800); --n-ink-strong-danger: var(--n-color-danger-950); --n-ink-inverse-danger: var(--n-color-danger-11); --n-ink-muted-danger: var(--n-color-danger-600); --n-ink-placeholder-danger: var(--n-color-danger-400); --n-ink-hover-danger: var(--n-color-danger-950); --n-ink-active-danger: var(--n-color-danger-500); --n-ink-disabled-danger: var(--n-color-danger-400); /* Border */ --n-border-danger: var(--n-color-danger-200-scrim); --n-border-muted-danger: var(--n-color-danger-100-scrim); --n-border-hover-danger: var(--n-color-danger-300-scrim); --n-border-active-danger: var(--n-color-danger-400-scrim); --n-border-disabled-danger: var(--n-color-danger-200-scrim); /* Surface */ --n-surface-danger: var(--n-color-danger-500); --n-surface-hover-danger: var(--n-color-danger-400); --n-surface-active-danger: var(--n-color-danger-600); --n-surface-disabled-danger: var(--n-color-danger-200); /* Surface Ink */ --n-surface-ink-danger: white; --n-surface-ink-hover-danger: white; --n-surface-ink-active-danger: var(--n-color-danger-950); --n-surface-ink-disabled-danger: oklch(1 0 0 / 0.5); } } /* ================================================================ nonoun-css Theme Presets Override family params and env params per theme. Apply via attribute: Uses :where() for zero specificity — easy to override. Requires colors.css to be loaded first. ================================================================ */ :where([theme="forest"]) { --n-env-hue-neutral: 155; --n-env-chroma-neutral: 0.25; --n-env-hue-accent: 155; --n-env-chroma-accent: 1.0; } :where([theme="rose"]) { --n-env-hue-neutral: 350; --n-env-chroma-neutral: 0.35; --n-env-hue-accent: 350; --n-env-chroma-accent: 1.0; } :where([theme="zinc"]) { --n-env-hue-neutral: 240; --n-env-chroma-neutral: 0.15; --n-env-hue-accent: 240; --n-env-chroma-accent: 1.0; --n-env-chroma: 0.18; } /* ================================================================ nonoun-css Base Reset & Document Defaults Universal reset uses real specificity to override UA defaults. Document defaults use :where() for zero specificity so consumers can override font-family, background, etc. without fighting. ================================================================ */ @layer ui { /* ── Universal Reset ── */ *, *::before, *::after { box-sizing: border-box; } :where(body) { font-family: var(--n-font-family); margin: 0; } /* WHY: UA [hidden]{display:none} loses to author-layer :where() display values. Real specificity (0,1,0) ensures [hidden] always wins over :where() components. */ [hidden] { display: none; } /* ── Control Text Selection ── */ /* WHY: Interactive and display components should not have selectable text. Real specificity (0,0,1+) ensures this beats :where() component defaults. Opt in with [user-selectable] on any element that needs text selection. */ :where( n-button, n-select, n-combobox, n-command, n-checkbox, n-radio, n-switch, n-range, n-segmented-control, n-tabs, n-tab, n-listbox, n-option, n-option-group, n-option-group-header, n-badge, n-kbd, n-avatar, n-breadcrumb, n-pagination, n-pagination-dots, n-accordion, n-calendar, n-tree, n-icon, n-tooltip, n-field, n-input-otp, n-sidebar-nav, n-sidebar-nav-item, n-sidebar-item, n-sidebar-group-header, n-header, n-footer, n-toolbar, n-container > n-header, n-container > n-footer ) { user-select: none; } [user-selectable] { user-select: text; } /* ── Document Defaults ── */ :where(native-dashboard-spa), :where(native-app) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-family: var(--n-font-family); line-height: var(--n-text-line-height); background: var(--n-doc-neutral); color: var(--n-ink-neutral); min-height: 100dvh; } /* ── Container Headings ── */ /* WHY: Reset h1–h3 inside containers so page-level heading styles (large sizes, margins, text-transform) don't bleed in. Uses the container's --n-font-* scale for sizing. */ :where(n-container) :where(h1, h2, h3) { margin: 0; font-weight: var(--n-button-font-weight); line-height: var(--n-control-line-height-relaxed); letter-spacing: 0; text-transform: none; color: var(--n-ink-strong); } :where(n-container) :where(h1) { font-size: var(--n-font-xl); } :where(n-container) :where(h2) { font-size: var(--n-font-lg); } :where(n-container) :where(h3) { font-size: var(--n-font-md); } /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { :root { --n-duration: 0s; } } } /* ══════════════════════════════════════════════════════════════════ Layout Utilities — n-stack, n-inset, n-grid CSS-only layout containers. No custom element registration. ══════════════════════════════════════════════════════════════════ */ @layer ui { /* ── Stack ── */ :where(n-stack) { --n-padding-block: 0; --n-padding-inline: 0; display: flex; flex: 1 1 0%; min-width: 0; min-height: inherit; flex-direction: column; gap: calc(var(--n-space) * var(--n-space-k)); padding-block: var(--n-padding-block); padding-inline: var(--n-padding-inline); } /* ── Adaptive Grid ── */ /* WHY: When