/* tokens.css — Develop design tokens (v2). * * v2 is a NEW, additive version. /v1 is frozen and untouched; channels migrate * to /v2 opt-in. Three explicit tiers (the lint-enforced rule): * COMPONENT (--c-*) -> reference only SEMANTIC * SEMANTIC (role) -> reference only PRIMITIVE * PRIMITIVE (--p-*) -> raw values (INTERNAL; consumers MUST NOT reference) * * Palette: neutral black/gray; the blue->purple --brand-gradient is reserved for * HEADINGS / hero art only — buttons + selected/active states use the * brand-blue interactive accent (--ui-accent). Compact 12px body. Dark mode for BOTH live * selector conventions (.dark AND [data-theme="dark"]); consumers must not add a * third. High-contrast: [data-contrast="high"]. Skins (user-chosen color-theme * presets, orthogonal to light/dark): [data-skin="warm|forest|violet"] blocks * below + the apex `skin` cookie + . */ :root { /* :root paints the LIGHT palette, so pin the UA's native controls (scrollbars, select popups, date pickers, autofill) to light here; `.dark`/[data-theme= "dark"] flip it to dark below. `light dark` was wrong: it let the UA render native controls dark per the OS on a forced-LIGHT page (the "dark date input on a light page" tell). Dark mode is always driven by the explicit class. */ color-scheme: light; /* ============================================================ TIER 1 — PRIMITIVE (--p-*, internal; never referenced by consumers) ============================================================ */ /* Neutral ramp — fixed role per step (Radix-style), authored per theme (light here, dark below), NOT lightness-flipped. Holds the current v1 values so the look is unchanged. 1 app bg · 2 subtle bg · 3 component bg · 4 hover · 5 active/line · 6 border · 7 border-strong · 8 disabled-fg · 9 muted text/placeholder · 10 secondary text · 11 strong text · 12 max-contrast text */ --p-gray-0: oklch(1 0 0); /* raised surface (cards float above bg) */ --p-gray-1: oklch(0.985 0 0); --p-gray-2: oklch(0.972 0 0); --p-gray-3: oklch(0.965 0 0); --p-gray-4: oklch(0.94 0 0); --p-gray-5: oklch(0.922 0 0); --p-gray-6: oklch(0.9 0 0); --p-gray-7: oklch(0.83 0 0); --p-gray-8: oklch(0.7 0 0); --p-gray-9: oklch(0.52 0 0); /* muted text — darkened so it clears WCAG AA 4.5:1 */ --p-gray-10: oklch(0.45 0 0); --p-gray-11: oklch(0.38 0 0); --p-gray-12: oklch(0.12 0 0); /* Status hues — oklch (perceptually even color-mix tints). */ --p-green: oklch(0.63 0.17 149); --p-amber: oklch(0.75 0.15 75); --p-red: oklch(0.58 0.21 27); --p-blue: oklch(0.55 0.2 256); /* Action accent — brand-blue (品牌蓝). Drives the solid primary button + the selected wash. Kept SEPARATE from the decorative --p-brand-* gradient (headlines/hero) so actions are brand-blue while brand art stays blue→purple. Brightened from the old muted navy (0.50) — the CTA should read lively, not municipal. */ --p-accent: oklch(0.585 0.16 256); --p-accent-deep: oklch(0.50 0.16 256); /* Brand gradient stops — the gradient is DERIVED from these once. */ --p-brand-1: oklch(0.54 0.23 266); --p-brand-2: oklch(0.52 0.26 296); --p-brand-3: oklch(0.55 0.27 324); /* ============================================================ TIER 2 — SEMANTIC (role tokens; the consumer/contract surface) ============================================================ */ /* Surface ladder (bg -> raised card -> overlay/popover -> sunken well). */ --background: var(--p-gray-1); --surface: var(--p-gray-1); --surface-raised: var(--p-gray-0); --surface-overlay: var(--p-gray-0); --surface-sunken: var(--p-gray-3); /* Surface bridge — raised/hover surfaces carry a WHISPER of the action accent (2–8%), so the whole screen reads as one tinted material instead of flat gray. Skins that pick a hot accent (e.g. warm/clay) re-neutralize these in their own block — a clay-tinted card would read pink. */ --card: color-mix(in oklab, var(--p-accent) 2%, var(--p-gray-0)); --popover: var(--p-gray-0); --secondary: var(--p-gray-3); --muted: var(--p-gray-4); --accent: color-mix(in oklab, var(--p-accent) 8%, var(--p-gray-2)); /* Text. */ --foreground: var(--p-gray-12); --card-foreground: var(--p-gray-12); --popover-foreground: var(--p-gray-12); --secondary-foreground: var(--p-gray-11); --accent-foreground: var(--p-gray-12); --muted-foreground: var(--p-gray-9); --foreground-subtle: var(--p-gray-10); /* Placeholder copy is still secondary, but must clear normal-text contrast on both raised and sunken fields; gray-8 was only a disabled-ink step. */ --placeholder: var(--p-gray-9); /* Lines. */ --border: var(--p-gray-5); --border-strong: var(--p-gray-7); --border-hover: var(--p-gray-7); --input: var(--border); --ring: var(--p-gray-10); --border-focus: var(--ring); /* Primary = neutral near-black; brand gradient layered on top for accent. */ --primary: var(--p-gray-12); --primary-foreground: var(--p-gray-1); /* Intent recipes — five names each, tints derived via color-mix so a filled chip always has a guaranteed-contrast on-color. */ --success: var(--p-green); --success-foreground: var(--p-gray-1); --success-bg: color-mix(in oklab, var(--p-green) 12%, var(--surface)); --success-border: color-mix(in oklab, var(--p-green) 35%, transparent); --warning: var(--p-amber); --warning-foreground: var(--p-gray-12); --warning-bg: color-mix(in oklab, var(--p-amber) 14%, var(--surface)); --warning-border: color-mix(in oklab, var(--p-amber) 38%, transparent); --danger: var(--p-red); --danger-foreground: var(--p-gray-1); --danger-bg: color-mix(in oklab, var(--p-red) 12%, var(--surface)); --danger-border: color-mix(in oklab, var(--p-red) 35%, transparent); --destructive: var(--p-red); /* v1-compat alias */ --info: var(--p-blue); --info-foreground: var(--p-gray-1); --info-bg: color-mix(in oklab, var(--p-blue) 12%, var(--surface)); --info-border: color-mix(in oklab, var(--p-blue) 35%, transparent); /* State layers — overlays composited on a surface for hover/press/select. */ --state-hover: color-mix(in oklab, var(--foreground) 5%, transparent); --state-pressed: color-mix(in oklab, var(--foreground) 9%, transparent); --state-selected: color-mix(in oklab, var(--foreground) 7%, transparent); --state-disabled-opacity: 0.5; --surface-hover: var(--accent); /* Brand gradient. */ --brand-gradient: linear-gradient(95deg, var(--p-brand-1) 0%, var(--p-brand-2) 50%, var(--p-brand-3) 100%); --brand-gradient-fg: oklch(0.99 0 0); /* Brand as a SOLID accent + soft tints — for active rails, selected nav, accent underlines. Semantic tier so components never touch --p-brand-*. */ --brand: var(--p-brand-2); --brand-soft: color-mix(in oklab, var(--p-brand-2) 10%, transparent); --brand-soft-hover: color-mix(in oklab, var(--p-brand-2) 16%, transparent); --brand-text: color-mix(in oklab, var(--p-brand-2) 72%, var(--foreground)); /* Interactive accent (品牌蓝) — the UI's action/selection color: solid CTA fill, switch/checkbox checked, calendar selected day, active tab, selected item, active tool. DISTINCT from the decorative --brand* (hero art / opt-in brand chips), which stays blue→purple. Soft/text adapt per theme via color-mix. */ --ui-accent: var(--p-accent); --ui-accent-hover: var(--p-accent-deep); --ui-accent-fg: #fff; --ui-accent-soft: color-mix(in oklab, var(--p-accent) 13%, transparent); --ui-accent-soft-hover: color-mix(in oklab, var(--p-accent) 20%, transparent); --ui-accent-text: color-mix(in oklab, var(--p-accent) 78%, var(--foreground)); /* Solid action button (primary CTA) — brand-blue; aliases the interactive accent. The gradient is a token so hover/selected can RE-ASSERT it (the base .btn:hover uses `background:` shorthand which would otherwise wipe the image → white flash). On no-color-mix engines the token is invalid → background-image unsets → flat. */ --btn-solid-bg: var(--ui-accent); --btn-solid-bg-hover: var(--ui-accent-hover); --btn-solid-fg: var(--ui-accent-fg); --btn-solid-gradient: linear-gradient(180deg, color-mix(in oklab, var(--btn-solid-bg) 88%, #fff), var(--btn-solid-bg-hover)); /* Default/outline buttons — NEUTRAL (the reference consoles' discipline: surface buttons carry no hue; ONLY the primary CTA and selected states do). The old blue tonal wash on every default button is what made whole screens read "blue". */ --btn-outline-bg: var(--surface-raised); --btn-outline-bg-hover: color-mix(in oklab, var(--foreground) 5%, var(--surface-raised)); --btn-outline-fg: var(--foreground); --btn-outline-border: var(--border); --btn-outline-border-hover: var(--border-strong); /* Tonal wash — now reserved for SELECTED/pressed states (accent family). */ --btn-tonal-bg: color-mix(in oklab, var(--p-accent) 13%, var(--surface)); --btn-tonal-bg-hover: color-mix(in oklab, var(--p-accent) 20%, var(--surface)); --btn-tonal-selected-bg: color-mix(in oklab, var(--p-accent) 14%, var(--surface)); --btn-tonal-fg: color-mix(in oklab, var(--p-accent) 72%, var(--foreground)); --btn-tonal-border: color-mix(in oklab, var(--p-accent) 40%, var(--border)); --btn-tonal-border-hover: color-mix(in oklab, var(--p-accent) 55%, var(--border)); /* Data-viz categorical ramp — the PLATFORM STANDARD (operator 2026-07-14): traditional bright blue leads. Six slots validated as a SET for the light surface (lightness band, chroma floor, adjacent-pair CVD separation ΔE 24.2, contrast). Slot ORDER is the colorblind-safety mechanism — never reorder, cycle, or insert. The dark block re-steps the SAME hues for the dark surface (selected, not auto-flipped). */ --chart-1: #2a78d6; /* blue */ --chart-2: #1baf7a; /* aqua */ --chart-3: #eda100; /* yellow */ --chart-4: #008300; /* green */ --chart-5: #4a3aa7; /* violet */ --chart-6: #e34948; /* red */ --sidebar: color-mix(in oklab, var(--p-accent) 2%, var(--p-gray-2)); --sidebar-foreground: var(--p-gray-11); --sidebar-primary: var(--p-gray-12); --sidebar-primary-foreground: var(--p-gray-1); --sidebar-accent: color-mix(in oklab, var(--p-gray-12) 6%, transparent); --sidebar-accent-foreground: var(--p-gray-12); --sidebar-border: var(--p-gray-5); --sidebar-ring: var(--ring); /* Fonts + type scale (raw ladder kept for direct use). */ /* Platform type system = the OS-native stacks (operator rule 2026-07-10): users download NO font files, text renders in each OS's own face with zero FOUT. The old var(--font-geist*) indirection is removed on purpose — it let Next.js channels inject downloaded webfonts and drift from the non-Next channels; nothing may reintroduce a webfont or @font-face. */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; /* Type ROLES — compact 12px base. Reference roles, not raw steps. */ --text-micro: 0.6875rem; /* 11px */ --text-caption: 0.75rem; /* 12px */ --text-body: 0.75rem; /* 12px — canonical base */ --text-menu: 0.8125rem; /* 13px — sidebar/menu item text. The platform standard for left-nav rows (matches AI对话 and AI短剧); body copy stays on the 12px base. */ --text-title: 0.875rem; /* 14px */ --text-heading: 1rem; /* 16px */ --text-subheading: 1.125rem; /* 18px — h2 / sub-section */ --text-display: 1.375rem; /* 22px */ /* Marketing poster scale — fluid hero/section type for landing pages, beyond --text-display (UI cap). Use via .text-poster-{sm,md,lg}. */ --text-poster-sm: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem); /* ~28→40px */ --text-poster-md: clamp(2.25rem, 1.3rem + 4.5vw, 4rem); /* ~36→64px */ --text-poster-lg: clamp(2.75rem, 1.4rem + 6.5vw, 5.5rem); /* ~44→88px */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-heading: var(--leading-tight); --leading-body: 1.5; /* Spacing (4px unit). */ --sp-px: 1px; --sp-0_5: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-11: 44px; --sp-12: 48px; /* Radius — derived off the base so retheming reshapes everything. 10px base (was 8px): controls read a touch softer; CARDS take the bigger jump via --c-card-radius: --radius-xl (14px) — the "soft surface" tell of the reference consoles without going pill-shaped at our 30px control height. */ --radius: 0.625rem; /* 10px — tool-grade controls */ --radius-sm: calc(var(--radius) - 2px); /* 8px */ --radius-md: var(--radius); --radius-lg: calc(var(--radius) + 2px); /* 12px */ --radius-xl: calc(var(--radius) + 4px); /* 14px */ --radius-2xl: calc(var(--radius) + 8px); /* 18px — hero panels / dashboards */ --radius-full: 9999px; /* Elevation ladder (each gets a dark counterpart below). */ --elevation-0: none; --elevation-1: 0 1px 2px oklch(0 0 0 / 0.05), 0 1px 1px oklch(0 0 0 / 0.03); --elevation-2: 0 4px 12px oklch(0 0 0 / 0.06), 0 1px 4px oklch(0 0 0 / 0.04); --elevation-3: 0 12px 24px oklch(0 0 0 / 0.08), 0 4px 8px oklch(0 0 0 / 0.05); --elevation-4: 0 20px 48px oklch(0 0 0 / 0.1), 0 8px 16px oklch(0 0 0 / 0.06); --shadow-card: var(--elevation-1); /* v1-compat names */ --shadow-float: var(--elevation-3); --shadow-inset: inset 0 1px 1px oklch(0 0 0 / 0.04); /* Motion. */ --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 280ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Z-index ladder (gaps of 10). */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1010; --z-overlay: 1020; --z-modal: 1030; --z-popover: 1040; --z-toast: 1050; --z-tooltip: 1060; /* Icon sizes (aligned to type). */ --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; --icon-xl: 24px; /* Breakpoint reference constants. NOTE: custom properties CANNOT drive @media/@container conditions — these document the vocabulary; the literals 30rem/48rem/64rem are used in @container rules. */ --bp-sm: 30rem; --bp-md: 48rem; --bp-lg: 64rem; /* Focus ring recipe (ONE look, used by every control via :focus-visible). */ --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px color-mix(in oklab, var(--ring) 55%, transparent); --focus-ring-danger: 0 0 0 2px var(--background), 0 0 0 4px color-mix(in oklab, var(--danger) 50%, transparent); /* Text-entry controls focus with the BRAND accent (inputs/textarea/select) — the focus moment is where a form reads as intentional vs generic. A thin accent ring only; the resting look stays neutral (blue-purple is otherwise reserved for buttons/titles). */ --focus-ring-brand: 0 0 0 2px var(--background), 0 0 0 4px color-mix(in oklab, var(--ui-accent) 42%, transparent); /* ============================================================ TIER 3 — COMPONENT (--c-*, override hooks; default to semantics) ============================================================ */ --control-h: 1.875rem; /* compact control height (30px) — buttons + inputs share this */ --control-h-sm: 1.625rem; /* 26px */ --control-h-lg: 2.5rem; /* 40px */ --c-btn-h: var(--control-h); --c-btn-px: 0.875rem; /* 14px — optical breathing room */ --c-btn-radius: var(--radius); --c-input-h: var(--control-h); --c-input-bg: var(--surface-raised); --c-input-border: var(--border); /* Native arrow stays legible on the dark surface */ --c-select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); /* Tonal buttons — louder brand-blue mix on dark so the wash survives the dark surface. */ --btn-tonal-bg: color-mix(in oklab, var(--p-accent) 24%, var(--p-gray-3)); --btn-tonal-bg-hover: color-mix(in oklab, var(--p-accent) 34%, var(--p-gray-3)); --btn-tonal-selected-bg: color-mix(in oklab, var(--p-accent) 30%, var(--p-gray-3)); --btn-tonal-fg: color-mix(in oklab, var(--p-accent) 50%, var(--p-gray-12)); --btn-tonal-border: color-mix(in oklab, var(--p-accent) 40%, var(--border)); --btn-tonal-border-hover: color-mix(in oklab, var(--p-accent) 55%, var(--border)); --success-foreground: oklch(0.16 0 0); --danger-foreground: oklch(0.16 0 0); --info-foreground: oklch(0.16 0 0); --elevation-1: inset 0 1px 0 oklch(1 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.25); --elevation-2: 0 4px 12px oklch(0 0 0 / 0.4), 0 1px 4px oklch(0 0 0 / 0.25); --elevation-3: 0 12px 28px oklch(0 0 0 / 0.45), 0 4px 10px oklch(0 0 0 / 0.3); --elevation-4: 0 20px 48px oklch(0 0 0 / 0.55), 0 8px 16px oklch(0 0 0 / 0.35); --shadow-inset: inset 0 1px 1px oklch(0 0 0 / 0.2); /* On dark, a top inset highlight + a deeper ambient shadow reads as a raised surface (a flat shadow alone is invisible on a dark page). */ --c-card-shadow: inset 0 1px 0 oklch(1 0 0 / 0.04), 0 2px 10px oklch(0 0 0 / 0.36); } /* ============================================================ SKINS — [data-skin=""] on , composable with the dark axis (.dark / [data-theme="dark"] on the SAME element). A skin overrides PRIMITIVES only (like dark does), so every semantic/component recipe retints automatically. The `skin` apex cookie mirrors the attribute; lib's bundle applies it at load (see components-src). No attribute = the default neutral+blue palette above. warm — Anthropic-inspired editorial: cream canvas, warm graphite ink, clay accent, dormant chart palette (olive/sky/fig/…). forest — accent-only: deep emerald actions/selection. violet — accent-only: violet actions/selection. paper — manga-studio warm paper: parchment canvas, amber/bronze accent, teal secondary, from the 漫剧工坊 design. ============================================================ */ /* ---- warm (light) ---- */ [data-skin="warm"] { /* Warm neutral ramp (hue ~60–95, chroma ≤0.01) — cream canvas, ink text. */ --p-gray-0: oklch(0.995 0.003 95); --p-gray-1: oklch(0.984 0.005 95); /* ≈ #faf9f5 cream */ --p-gray-2: oklch(0.972 0.006 92); --p-gray-3: oklch(0.955 0.008 92); --p-gray-4: oklch(0.935 0.009 92); --p-gray-5: oklch(0.905 0.01 92); /* ≈ #e8e6dc warm border */ --p-gray-6: oklch(0.885 0.01 92); --p-gray-7: oklch(0.82 0.012 90); --p-gray-8: oklch(0.69 0.012 85); --p-gray-9: oklch(0.51 0.01 75); /* ≈ #5e5d59 warm muted */ --p-gray-10: oklch(0.44 0.01 70); --p-gray-11: oklch(0.37 0.008 65); --p-gray-12: oklch(0.205 0.005 60); /* ≈ #141413 warm ink */ /* Clay/coral accent (≈ #d97757 family, darkened for white-on-fill AA). */ --p-accent: oklch(0.60 0.145 40); --p-accent-deep: oklch(0.52 0.14 40); /* Decorative gradient re-tuned clay→fig so hero art stays in-family. */ --p-brand-1: oklch(0.62 0.15 40); --p-brand-2: oklch(0.60 0.13 15); --p-brand-3: oklch(0.58 0.12 355); /* Anthropic dormant palette for data-viz: clay/olive/sky/fig/cactus. */ --chart-1: oklch(0.685 0.142 38); --chart-2: oklch(0.59 0.082 130); --chart-3: oklch(0.67 0.075 248); --chart-4: oklch(0.7 0.115 0); --chart-5: oklch(0.65 0.06 175); /* Re-neutralize the surface bridge — a clay-tinted card reads pink; warm surfaces are authored INTO the ramp above instead (the reference system makes the same exception for its warm preset). */ --card: var(--p-gray-0); --accent: var(--p-gray-3); --sidebar: var(--p-gray-2); } /* ---- warm (dark) — warm near-black, keeps the editorial personality ---- */ .dark[data-skin="warm"], [data-theme="dark"][data-skin="warm"] { --p-gray-0: oklch(0.235 0.006 60); --p-gray-1: oklch(0.205 0.005 60); --p-gray-2: oklch(0.22 0.006 60); --p-gray-3: oklch(0.27 0.007 60); --p-gray-4: oklch(0.175 0.005 60); --p-gray-5: oklch(0.31 0.008 60); --p-gray-6: oklch(0.28 0.007 60); --p-gray-7: oklch(0.39 0.008 60); --p-gray-8: oklch(0.46 0.008 65); --p-gray-9: oklch(0.61 0.008 70); --p-gray-10: oklch(0.71 0.008 75); --p-gray-11: oklch(0.76 0.008 80); --p-gray-12: oklch(0.94 0.005 90); --p-accent: oklch(0.66 0.13 42); --p-accent-deep: oklch(0.58 0.13 42); --p-brand-1: oklch(0.70 0.14 40); --p-brand-2: oklch(0.68 0.12 15); --p-brand-3: oklch(0.66 0.11 355); --chart-1: oklch(0.72 0.13 40); --chart-2: oklch(0.68 0.09 130); --chart-3: oklch(0.72 0.08 248); --chart-4: oklch(0.74 0.11 0); --chart-5: oklch(0.70 0.06 175); --card: var(--p-gray-0); --accent: var(--p-gray-3); --sidebar: var(--p-gray-2); } /* ---- forest / violet — accent-only skins (one knob, both modes) ---- */ [data-skin="forest"] { --p-accent: oklch(0.50 0.12 155); --p-accent-deep: oklch(0.43 0.12 155); } .dark[data-skin="forest"], [data-theme="dark"][data-skin="forest"] { --p-accent: oklch(0.58 0.12 155); --p-accent-deep: oklch(0.50 0.12 155); } [data-skin="violet"] { --p-accent: oklch(0.51 0.19 296); --p-accent-deep: oklch(0.44 0.19 296); } .dark[data-skin="violet"], [data-theme="dark"][data-skin="violet"] { --p-accent: oklch(0.60 0.17 296); --p-accent-deep: oklch(0.52 0.17 296); } /* ---- paper (light) — 漫剧工坊 warm paper: parchment canvas, amber accent ---- */ [data-skin="paper"] { /* Paper neutral ramp (hue ~70–95). gray-2 sits ABOVE gray-1 on purpose: side panels (#faf9f6) are lighter than the canvas (#f6f4ef) in this skin. */ --p-gray-0: oklch(0.988 0.004 95); /* ≈ #fdfcfa card */ --p-gray-1: oklch(0.968 0.008 95); /* ≈ #f6f4ef canvas */ --p-gray-2: oklch(0.980 0.005 95); /* ≈ #faf9f6 panel */ --p-gray-3: oklch(0.948 0.009 95); /* ≈ #f1eee7 chip */ --p-gray-4: oklch(0.933 0.010 95); /* ≈ #edeae2 hover */ --p-gray-5: oklch(0.905 0.012 92); /* ≈ #e3dfd6 border */ --p-gray-6: oklch(0.875 0.013 92); /* ≈ #d5d0c4 strong border */ --p-gray-7: oklch(0.82 0.014 90); /* ≈ #c8c2b4 */ --p-gray-8: oklch(0.70 0.015 88); /* ≈ #a8a190 placeholder */ --p-gray-9: oklch(0.51 0.018 85); /* warm muted, darkened past #857e6f so muted-on-canvas clears WCAG AA 4.5:1 */ --p-gray-10: oklch(0.50 0.015 80); /* ≈ #6d675c */ --p-gray-11: oklch(0.42 0.012 75); /* ≈ #4a463c */ --p-gray-12: oklch(0.25 0.010 70); /* ≈ #2b2822 ink */ /* Amber/bronze accent (≈ #b0762e family). */ --p-accent: oklch(0.60 0.115 70); --p-accent-deep: oklch(0.52 0.11 68); /* Decorative gradient amber→teal→blue, the design's secondary hues. */ --p-brand-1: oklch(0.62 0.12 70); --p-brand-2: oklch(0.58 0.08 185); --p-brand-3: oklch(0.60 0.09 255); /* Data-viz: amber / teal / blue / fig / brick (≈ #b0762e #2f8d84 #4a7ec2 #8a56b0 #b0453a). */ --chart-1: oklch(0.66 0.12 70); --chart-2: oklch(0.58 0.08 185); --chart-3: oklch(0.60 0.09 255); --chart-4: oklch(0.58 0.11 310); --chart-5: oklch(0.55 0.12 25); /* Re-neutralize the surface bridge (see warm): paper surfaces are authored into the ramp; an amber-tinted card would read orange. */ --card: var(--p-gray-0); --accent: var(--p-gray-3); --sidebar: var(--p-gray-2); } /* ---- paper (dark) — warm near-black, amber stays the voice ---- */ .dark[data-skin="paper"], [data-theme="dark"][data-skin="paper"] { --p-gray-0: oklch(0.235 0.008 75); --p-gray-1: oklch(0.205 0.007 75); --p-gray-2: oklch(0.22 0.008 75); --p-gray-3: oklch(0.27 0.009 75); --p-gray-4: oklch(0.175 0.006 75); --p-gray-5: oklch(0.31 0.010 75); --p-gray-6: oklch(0.28 0.009 75); --p-gray-7: oklch(0.39 0.010 75); --p-gray-8: oklch(0.46 0.010 78); --p-gray-9: oklch(0.61 0.012 82); --p-gray-10: oklch(0.71 0.012 85); --p-gray-11: oklch(0.76 0.012 88); --p-gray-12: oklch(0.94 0.006 92); /* Kept at light-mode depth: white --ui-accent-fg must clear the 3:1 UI contrast floor (0.68 L only reached 2.9:1). */ --p-accent: oklch(0.60 0.115 72); --p-accent-deep: oklch(0.53 0.11 70); --p-brand-1: oklch(0.72 0.12 70); --p-brand-2: oklch(0.66 0.08 185); --p-brand-3: oklch(0.68 0.09 255); --chart-1: oklch(0.74 0.12 70); --chart-2: oklch(0.68 0.08 185); --chart-3: oklch(0.70 0.09 255); --chart-4: oklch(0.68 0.10 310); --chart-5: oklch(0.66 0.11 25); --card: var(--p-gray-0); --accent: var(--p-gray-3); --sidebar: var(--p-gray-2); } /* ---- High-contrast — manual [data-contrast=high] OR OS prefers-contrast. Its own mapping (heavier lines + AAA text), not a filter. ---- */ [data-contrast="high"] { --border: var(--p-gray-12); --border-strong: var(--p-gray-12); --muted-foreground: var(--p-gray-12); --foreground-subtle: var(--p-gray-12); --placeholder: var(--p-gray-11); --ring: var(--p-gray-12); } @media (prefers-contrast: more) { :root { --border: var(--p-gray-12); --border-strong: var(--p-gray-12); --muted-foreground: var(--p-gray-12); --foreground-subtle: var(--p-gray-12); --placeholder: var(--p-gray-11); --ring: var(--p-gray-12); } } /* ============================================================ FALLBACKS — a NO-BUILD system has no compiler to down-level color, so it must render on engines without oklch()/color-mix() (older Safari, in-app WebViews). Default values above stay oklch/color-mix (modern path, untouched); these blocks only fire where the feature is ABSENT. ============================================================ */ @supports not (color: oklch(0 0 0)) { :root { --p-gray-0: #ffffff; --p-gray-1: #fafafa; --p-gray-2: #f7f7f8; --p-gray-3: #f4f4f5; --p-gray-4: #ededf0; --p-gray-5: #e4e4e7; --p-gray-6: #dcdce0; --p-gray-7: #c4c4c9; --p-gray-8: #a1a1aa; --p-gray-9: #5c5c63; --p-gray-10: #52525b; --p-gray-11: #3f3f46; --p-gray-12: #0f0f11; --p-green: #16a34a; --p-amber: #d97706; --p-red: #dc2626; --p-blue: #2563eb; --p-accent: #2f5cb5; --p-accent-deep: #264a96; --p-brand-1: #4f46e5; --p-brand-2: #7c3aed; --p-brand-3: #a21caf; --brand-gradient-fg: #ffffff; --chart-1: #e0652e; --chart-2: #3a9d94; --chart-3: #3f5b78; --chart-4: #d6c84e; --chart-5: #e2a93f; } .dark, [data-theme="dark"] { --p-gray-0: #232326; --p-gray-1: #18181b; --p-gray-2: #1d1d20; --p-gray-3: #27272a; --p-gray-4: #141417; --p-gray-5: #34343a; --p-gray-6: #2e2e33; --p-gray-7: #3f3f46; --p-gray-8: #52525b; --p-gray-9: #8a8a93; --p-gray-10: #a1a1aa; --p-gray-11: #b4b4bb; --p-gray-12: #f4f4f5; --p-green: #22c55e; --p-amber: #fbbf24; --p-red: #f87171; --p-blue: #60a5fa; --p-brand-1: #6366f1; --p-brand-2: #8b5cf6; --p-brand-3: #c026d3; } } @supports not (color: color-mix(in oklab, red, blue)) { :root { --card: #ffffff; --accent: #f2f4f8; --sidebar: #f7f7f8; --btn-outline-bg-hover: #f1f1f3; --success-bg: #e9f6ee; --success-border: #a7dcbd; --warning-bg: #fbf0df; --warning-border: #f0cd96; --danger-bg: #fbe9e9; --danger-border: #f0b0b0; --info-bg: #e7effc; --info-border: #aac6f4; --state-hover: rgba(24,24,27,0.05); --state-pressed: rgba(24,24,27,0.09); --state-selected: rgba(24,24,27,0.07); --btn-tonal-bg: #e3ecfc; --btn-tonal-bg-hover: #d6e2fa; --btn-tonal-selected-bg: #dde7fb; --btn-tonal-fg: #1e3a8a; --btn-tonal-border: #aac4f4; --btn-tonal-border-hover: #7da6ee; --ui-accent-soft: rgba(37,99,235,0.13); --ui-accent-soft-hover: rgba(37,99,235,0.2); --ui-accent-text: #1e3a8a; --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px rgba(82,82,91,0.55); --focus-ring-danger: 0 0 0 2px var(--background), 0 0 0 4px rgba(220,38,38,0.5); --focus-ring-brand: 0 0 0 2px var(--background), 0 0 0 4px rgba(37,99,235,0.42); } .dark, [data-theme="dark"] { --card: #232326; --accent: #2a2d36; --sidebar: #1d1d20; --btn-outline-bg-hover: #2e2e33; --success-bg: #14241a; --success-border: #2c5840; --warning-bg: #2a2113; --warning-border: #5a4a28; --danger-bg: #2a1717; --danger-border: #5a3434; --info-bg: #16213a; --info-border: #2c4470; --state-hover: rgba(255,255,255,0.06); --state-pressed: rgba(255,255,255,0.1); --state-selected: rgba(255,255,255,0.08); --btn-tonal-bg: #29375a; --btn-tonal-bg-hover: #2e3f6c; --btn-tonal-selected-bg: #2c3b64; --btn-tonal-fg: #93b4fa; --btn-tonal-border: #38477a; --btn-tonal-border-hover: #45579a; --ui-accent-soft: rgba(120,160,250,0.16); --ui-accent-soft-hover: rgba(120,160,250,0.24); --ui-accent-text: #93b4fa; --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px rgba(161,161,170,0.5); --focus-ring-danger: 0 0 0 2px var(--background), 0 0 0 4px rgba(248,113,113,0.5); --focus-ring-brand: 0 0 0 2px var(--background), 0 0 0 4px rgba(120,160,250,0.45); } }