{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"silicon-foundation","type":"registry:item","title":"Silicon UI foundation","description":"Silicon UI design tokens (color, surface, radius, shadow, accent, focus, light and dark themes), plus the shared motion presets. Install once per app.","categories":["foundation"],"dependencies":[],"registryDependencies":["https://ui.teamofsilicons.com/r/silicon-motion-tokens.json"],"files":[{"path":"registry/foundation.css","type":"registry:component","target":"@components/silicon-ui/foundation.css","content":":root {\n  color-scheme: light;\n  --neutral-0: oklch(100% 0 0);\n  --neutral-1: oklch(99% 0 0);\n  --neutral-2: oklch(97.8% 0 0);\n  --neutral-3: oklch(95.8% 0 0);\n  --neutral-4: oklch(91.5% 0 0);\n  --neutral-5: oklch(84% 0 0);\n  --neutral-6: oklch(72% 0 0);\n  --neutral-7: oklch(59% 0 0);\n  --neutral-8: oklch(46% 0 0);\n  --neutral-9: oklch(34% 0 0);\n  --neutral-10: oklch(23% 0 0);\n  --neutral-11: oklch(15% 0 0);\n  --background: var(--neutral-0);\n  --surface: var(--neutral-0);\n  --surface-raised: var(--neutral-0);\n  --surface-muted: var(--neutral-2);\n  /* One step stronger than --surface-muted: the hover and press of a muted fill (a soft button). */\n  --surface-pressed: var(--neutral-3);\n  --foreground: var(--neutral-11);\n  --text-secondary: var(--neutral-8);\n  --text-muted: var(--neutral-7);\n  --border: oklch(93.5% 0 0);\n  --border-subtle: oklch(96.5% 0 0);\n  --border-strong: oklch(82% 0 0);\n  --accent: oklch(33% 0 0);\n  --accent-strong: oklch(24% 0 0);\n  --accent-subtle: oklch(33% 0 0 / .1);\n  --accent-foreground: var(--background);\n  /* Filled primary actions (Button primary, ActionButton). Neutral by default; an app sets its brand colour here. */\n  --primary: var(--foreground);\n  --primary-foreground: var(--background);\n  /* Profile pictures (Avatar, AvatarGroup, UserMenu). Circles by default; an app can choose e.g. 30% and squircle. */\n  --avatar-radius: var(--radius-full);\n  --avatar-corner-shape: round;\n  /* Selection controls (switch, checkbox, radio, slider). --control-on fills a chosen control; --control-glyph is the check or dot drawn on it;\n     thumbs stay white in both states so they always read against the track. Tuned per accent below so white thumbs hold on every hue. */\n  --control-on: oklch(23% 0 0);\n  --control-glyph: oklch(100% 0 0);\n  --control-track: oklch(89.5% 0 0);\n  --control-track-hover: oklch(86% 0 0);\n  --control-thumb: oklch(100% 0 0);\n  --control-thumb-on: oklch(100% 0 0);\n  --control-thumb-shadow: 0 0 0 .5px oklch(0% 0 0 / .07), 0 1px 2px oklch(0% 0 0 / .14), 0 2px 6px oklch(0% 0 0 / .06);\n  --control-on-subtle: color-mix(in oklab, var(--control-on) 10%, transparent);\n  /* Slider fills. Same as --control-on except neutral dark, where a mid grey keeps the white thumb distinct. */\n  --control-fill: var(--control-on);\n  /* Pointer focus draws no ring (product decision). --focus-ring is the halo a few fields drew for any input method, so it stays transparent.\n     Keyboard focus uses the outline at the end of this file; tune it with --focus-outline, --focus-outline-width and --focus-outline-offset. */\n  --focus-ring: transparent;\n  --success: oklch(49% .19 150);\n  --warning: oklch(58% .18 75);\n  --danger: oklch(54% .21 25);\n  --shadow-resting: 0 1px 2px oklch(0% 0 0 / .035);\n  --shadow-raised: 0 6px 18px oklch(0% 0 0 / .065), 0 1px 3px oklch(0% 0 0 / .035);\n  --shadow-floating: 0 20px 48px oklch(0% 0 0 / .105), 0 3px 10px oklch(0% 0 0 / .045);\n  /* Layers, edges and shadows by role (component CSS uses these instead of raw colours). */\n  --scrim: oklch(10% 0 0 / .46);              /* behind a modal layer: dialog, drawer, sheet, mobile menu */\n  --scrim-soft: oklch(10% 0 0 / .16);         /* behind a non-modal panel */\n  --shade: oklch(0% 0 0 / .035);              /* a faint tint over a surface, such as a stacked card */\n  --media-scrim: oklch(0% 0 0 / .45);         /* over a photo, under text */\n  --on-media: var(--color-white);             /* text over a photo */\n  --edge-inset: inset 0 0 0 1px oklch(0% 0 0 / .08);   /* a hairline inside a swatch, thumbnail or track */\n  --shadow-hairline: 0 0 0 .5px oklch(0% 0 0 / .14);\n  --shadow-knob: 0 2px 8px oklch(0% 0 0 / .3);   /* a draggable handle that must read on any colour */\n  --shadow-thumb: 0 1px 2px oklch(0% 0 0 / .06), 0 2px 6px oklch(0% 0 0 / .04);   /* small lifted controls and cards */\n  --shadow-drop: drop-shadow(0 18px 36px oklch(0% 0 0 / .12)) drop-shadow(0 2px 6px oklch(0% 0 0 / .06));   /* filter: floating previews */\n  --shadow-showcase: 0 1px 1px rgb(20 24 40 / .04), 0 10px 30px -12px rgb(20 24 40 / .22);   /* hero product shots */\n  --shadow-showcase-lg: 0 1px 1px rgb(20 24 40 / .04), 0 24px 48px -16px rgb(20 24 40 / .16), 0 60px 120px -40px rgb(40 48 110 / .22);\n  --glow: #b9c2ff;                            /* the light line on a dark hero window */\n  /* Code highlighting roles (CodeBlock); each has contrast in both themes. */\n  --syntax-string: oklch(46% .13 150); --syntax-number: oklch(50% .14 55); --syntax-keyword: oklch(48% .15 285);\n  --syntax-type: oklch(46% .13 230); --syntax-function: oklch(43% .12 25); --syntax-property: oklch(44% .12 85);\n  /* File types (TreeView): each brand hue, mixed with the text colour in the component. */\n  --file-typescript: #3178c6; --file-stylesheet: #8b6ace; --file-markdown: #38896b; --file-json: #c48637;\n  /* Theme-independent constants, for things that must stay black or white in both themes (colour picker planes). */\n  --color-black: #000; --color-white: #fff;\n  /* Brand gradient: soft lavender to warm peach. Light enough for dark text (--silicon-gradient-foreground, >12:1). */\n  --silicon-gradient-from: oklch(90% .045 300);\n  --silicon-gradient-to: oklch(92% .045 65);\n  --silicon-gradient: linear-gradient(100deg, var(--silicon-gradient-from), var(--silicon-gradient-to));\n  --silicon-gradient-foreground: oklch(22% .01 300);\n  /* Faint wash for backgrounds and tinted panels. */\n  --silicon-gradient-soft: linear-gradient(135deg, oklch(97.5% .016 300), oklch(98% .016 65));\n  /* Hairline borders and rules. */\n  --silicon-gradient-line: linear-gradient(100deg, oklch(83% .06 300), oklch(86% .06 65));\n  /* Text-safe stops for gradient text and small marks (>4.5:1 on the surface). */\n  --silicon-gradient-ink: linear-gradient(100deg, oklch(47% .1 300), oklch(50% .09 55));\n  /* Space, by role: hair 2 · tight 4 · related 8 · group 12 · inset 16 · comfort 20 · section 24 · block 32 · page 48 · stage 64 · screen 80. */\n  --space-hair: 2px; --space-tight: 4px; --space-related: 8px; --space-group: 12px; --space-inset: 16px; --space-comfort: 20px;\n  --space-section: 24px; --space-block: 32px; --space-page: 48px; --space-stage: 64px; --space-screen: 80px;\n  /* Radius, by role: detail for small marks and swatches, control for buttons and fields, container for cards and menus,\n     overlay for dialogs and sheets, full for pills and dots. Every corner in every component reads one of these.\n     These are the round values (2 / 6 / 8 / 12). Squircle corners use larger radii, set with the corner rule below, so\n     both shapes feel equally round. */\n  --radius-detail: 2px; --radius-control: 6px; --radius-container: 8px; --radius-overlay: 12px; --radius-full: 999px;\n  /* Corner shape. Squircle by default; see the corner rule after the dark theme. */\n  --corner-shape: squircle;\n  /* xs is for dense UI (tree rows, toolbars); 24px is the smallest target WCAG 2.5.8 allows, so the scale stops there. */\n  --control-height-xs: 1.5rem; --control-height-sm: 2.25rem; --control-height-md: 2.75rem; --control-height-lg: 3.125rem;\n  --font-display: var(--font-geist, \"Geist Variable\"), sans-serif;\n  --font-body: var(--font-hanken-grotesk, \"Hanken Grotesk Variable\"), sans-serif;\n  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;\n  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem;\n  --text-4xl: 3.25rem; --text-5xl: 4.5rem;\n  --tracking-display: -.03em; --tracking-body: -.01em;\n  --leading-display: 1.1; --leading-body: 1.4;\n  --ease-enter: cubic-bezier(.16,1,.3,1);\n  --ease-standard: cubic-bezier(.22,1,.36,1);\n  --ease-exit: cubic-bezier(.7,0,.84,0);\n  --ease-in-out: cubic-bezier(.65,0,.35,1);\n  /* Spring with a gentle settle (bounce .15). Pair with --duration-spring for transform transitions. */\n  --ease-spring: linear(0, 0.0258, 0.09, 0.1763, 0.2732, 0.3724, 0.4683, 0.5573, 0.6376, 0.7082, 0.7689, 0.8202, 0.8628, 0.8976, 0.9256, 0.9476, 0.9648, 0.9778, 0.9875, 0.9945, 0.9994, 1.0026, 1.0047, 1.0058, 1.0062, 1.0062, 1.0059, 1.0055, 1.0049, 1.0043, 1.0036, 1.0031, 1.0025, 1.002, 1.0016, 1.0013, 1);\n  --duration-instant: 120ms; --duration-fast: 160ms; --duration-standard: 240ms; --duration-considered: 480ms; --duration-spring: 580ms;\n  /* Stagger steps (the same values as motionTokens.stagger). Keep total stagger under roughly 400ms. */\n  --stagger-item: 35ms;\n  /* Stacking order, by role. Menus and listboxes sit above popovers and dialogs because they open from inside them.\n     An app's own chrome (sticky header, sidebar, toolbar) stays below --layer-overlay, so dims and every floating\n     layer cover it: use --layer-sticky, or calc(var(--layer-overlay) - 1) at most. */\n  --layer-raised: 10; --layer-sticky: 20; --layer-overlay: 50; --layer-dialog: 51;\n  --layer-popover: 60; --layer-dropdown: 70; --layer-toast: 80; --layer-tooltip: 90;\n}\n\n:root[data-theme=\"dark\"] {\n  color-scheme: dark;\n  --background: oklch(19% 0 0);\n  --surface: oklch(21.5% 0 0);\n  --surface-raised: oklch(24% 0 0);\n  /* Keep muted surfaces and hover states distinct from the base surface in dark mode. */\n  --surface-muted: oklch(26% 0 0);\n  --surface-pressed: oklch(30% 0 0);\n  --foreground: oklch(96% 0 0);\n  --text-secondary: oklch(77% 0 0);\n  --text-muted: oklch(64% 0 0);\n  --border: oklch(29% 0 0);\n  --border-subtle: oklch(25% 0 0);\n  --border-strong: oklch(40% 0 0);\n  --focus-ring: transparent;\n  --accent: oklch(80% 0 0);\n  --accent-strong: oklch(91% 0 0);\n  --accent-subtle: oklch(80% 0 0 / .13);\n  /* Neutral dark inverts: a near-white track carries a dark thumb, so on and off never read alike. */\n  --control-on: oklch(93% 0 0);\n  --control-glyph: oklch(19% 0 0);\n  --control-track: oklch(33% 0 0);\n  --control-track-hover: oklch(37% 0 0);\n  --control-thumb: oklch(97% 0 0);\n  --control-thumb-on: oklch(19% 0 0);\n  --control-fill: oklch(62% 0 0);\n  --control-thumb-shadow: 0 0 0 .5px oklch(0% 0 0 / .3), 0 1px 2px oklch(0% 0 0 / .35), 0 2px 6px oklch(0% 0 0 / .2);\n  --success: oklch(78% .18 150);\n  --warning: oklch(83% .17 80);\n  --danger: oklch(76% .2 25);\n  --shadow-resting: 0 1px 2px oklch(0% 0 0 / .18);\n  --shadow-raised: 0 8px 22px oklch(0% 0 0 / .22);\n  --shadow-floating: 0 22px 55px oklch(0% 0 0 / .34);\n  --scrim: oklch(0% 0 0 / .52);\n  --shade: oklch(0% 0 0 / .22);\n  --shadow-thumb: inset 0 1px 0 oklch(100% 0 0 / .05), 0 1px 2px oklch(0% 0 0 / .3);\n  --shadow-drop: drop-shadow(0 20px 44px oklch(0% 0 0 / .5));\n  --shadow-showcase: inset 0 1px 0 color-mix(in oklab, var(--foreground) 8%, transparent), 0 10px 30px -12px rgb(0 0 0 / .6);\n  --shadow-showcase-lg: inset 0 1px 0 color-mix(in oklab, var(--foreground) 9%, transparent), 0 24px 48px -16px rgb(0 0 0 / .6), 0 60px 140px -40px rgb(40 50 140 / .35);\n  --syntax-string: oklch(77% .15 150); --syntax-number: oklch(80% .14 75); --syntax-keyword: oklch(78% .16 285);\n  --syntax-type: oklch(79% .13 230); --syntax-function: oklch(80% .13 25); --syntax-property: oklch(79% .12 85);\n  --silicon-gradient-from: oklch(38% .05 300);\n  --silicon-gradient-to: oklch(40% .045 60);\n  --silicon-gradient-foreground: oklch(96% .005 300);\n  --silicon-gradient-soft: linear-gradient(135deg, oklch(23.5% .016 300), oklch(24% .014 65));\n  --silicon-gradient-line: linear-gradient(100deg, oklch(48% .06 300), oklch(52% .055 65));\n  --silicon-gradient-ink: linear-gradient(100deg, oklch(82% .07 300), oklch(86% .065 70));\n}\n\n/* Corners are squircles: every rounded corner is drawn as a superellipse, so borders, shadows and focus rings follow the\n   same smooth curve. Browsers without corner-shape draw ordinary round corners from the same radius. Set\n   data-corners=\"round\" on <html>, or on any element for its subtree, to use round corners instead. */\n:root[data-corners=\"round\"], [data-corners=\"round\"] { --corner-shape: round; }\n:root[data-corners=\"squircle\"], [data-corners=\"squircle\"] { --corner-shape: squircle; }\n*, ::before, ::after { corner-shape: var(--corner-shape); }\n/* A squircle at the same radius reads about 0.55x as round as a circular corner, so squircle radii are about 1.8x the\n   round ones: 4 / 11 / 14 / 21 feel like 2 / 6 / 8 / 12. Only browsers that draw squircles get them; the rest keep the\n   round values above, so their corners never look oversized. */\n@supports (corner-shape: squircle) {\n  :root, [data-corners=\"squircle\"] { --radius-detail: 4px; --radius-control: 11px; --radius-container: 14px; --radius-overlay: 21px; }\n  :root[data-corners=\"round\"], [data-corners=\"round\"] { --radius-detail: 2px; --radius-control: 6px; --radius-container: 8px; --radius-overlay: 12px; }\n}\n\n:root[data-accent=\"neutral\"] { --accent: oklch(33% 0 0); --accent-strong: oklch(24% 0 0); --accent-subtle: oklch(33% 0 0 / .1); }\n:root[data-accent=\"violet\"] { --accent: #7747ff; --accent-strong: #5528ce; --accent-subtle: rgb(119 71 255 / .13); }\n:root[data-accent=\"blue\"] { --accent: #0562ef; --accent-strong: #074db7; --accent-subtle: rgb(5 98 239 / .12); }\n:root[data-accent=\"green\"] { --accent: #0db879; --accent-strong: #087c54; --accent-subtle: rgb(13 184 121 / .13); --accent-foreground: #102016; }\n:root[data-accent=\"amber\"] { --accent: #f3ad20; --accent-strong: #9c6300; --accent-subtle: rgb(243 173 32 / .16); --accent-foreground: #20190d; }\n:root[data-accent=\"orange\"] { --accent: #f48120; --accent-strong: #aa4700; --accent-subtle: rgb(244 129 32 / .13); --accent-foreground: #17130f; }\n:root[data-accent=\"coral\"] { --accent: #f15f55; --accent-strong: #b92c27; --accent-subtle: rgb(241 95 85 / .14); --accent-foreground: #21110f; }\n:root[data-accent=\"rose\"] { --accent: #ed4e9d; --accent-strong: #ae2570; --accent-subtle: rgb(237 78 157 / .14); --accent-foreground: #250f1b; }\n:root[data-theme=\"dark\"][data-accent=\"neutral\"] { --accent: oklch(80% 0 0); --accent-strong: oklch(91% 0 0); --accent-subtle: oklch(80% 0 0 / .13); }\n:root[data-theme=\"dark\"][data-accent=\"violet\"] { --accent: #a78bff; --accent-strong: #c7b7ff; --accent-subtle: rgb(119 71 255 / .22); }\n:root[data-theme=\"dark\"][data-accent=\"blue\"] { --accent: #6ba3ff; --accent-strong: #a4c7ff; --accent-subtle: rgb(5 98 239 / .22); }\n:root[data-theme=\"dark\"][data-accent=\"green\"] { --accent: #53dca6; --accent-strong: #93efd0; --accent-subtle: rgb(13 184 121 / .2); }\n:root[data-theme=\"dark\"][data-accent=\"amber\"] { --accent: #ffcb62; --accent-strong: #ffe0a1; --accent-subtle: rgb(243 173 32 / .2); }\n:root[data-theme=\"dark\"][data-accent=\"orange\"] { --accent: #ffad5e; --accent-strong: #ffd0a0; --accent-subtle: rgb(244 129 32 / .2); --accent-foreground: #17130f; }\n:root[data-theme=\"dark\"][data-accent=\"coral\"] { --accent: #ff9386; --accent-strong: #ffc1ba; --accent-subtle: rgb(241 95 85 / .2); }\n:root[data-theme=\"dark\"][data-accent=\"rose\"] { --accent: #ff8bc5; --accent-strong: #ffc0df; --accent-subtle: rgb(237 78 157 / .2); }\n\n/* Selection control fills per accent. Light: the accent, deepened slightly where a white thumb needs it. Dark: a mid tone instead of the pastel\n   text accent, so white thumbs and checks keep contrast without a neon track. Amber keeps a dark glyph because white on yellow washes out. */\n:root[data-accent=\"neutral\"] { --control-on: oklch(23% 0 0); --control-thumb-on: oklch(100% 0 0); --control-glyph: oklch(100% 0 0); }\n:root[data-accent=\"violet\"] { --control-on: #7747ff; --control-thumb-on: #fff; --control-glyph: #fff; }\n:root[data-accent=\"blue\"] { --control-on: #0562ef; --control-thumb-on: #fff; --control-glyph: #fff; }\n:root[data-accent=\"green\"] { --control-on: #10a870; --control-thumb-on: #fff; --control-glyph: #fff; }\n:root[data-accent=\"amber\"] { --control-on: #eda11a; --control-thumb-on: #fff; --control-glyph: #2a1c03; }\n:root[data-accent=\"orange\"] { --control-on: #f07818; --control-thumb-on: #fff; --control-glyph: #fff; }\n:root[data-accent=\"coral\"] { --control-on: #ec564b; --control-thumb-on: #fff; --control-glyph: #fff; }\n:root[data-accent=\"rose\"] { --control-on: #e64494; --control-thumb-on: #fff; --control-glyph: #fff; }\n:root[data-theme=\"dark\"][data-accent=\"neutral\"] { --control-on: oklch(93% 0 0); --control-thumb-on: oklch(19% 0 0); --control-glyph: oklch(19% 0 0); }\n:root[data-theme=\"dark\"][data-accent=\"violet\"] { --control-on: #8a66ff; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #8a66ff; }\n:root[data-theme=\"dark\"][data-accent=\"blue\"] { --control-on: #3b82f6; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #3b82f6; }\n:root[data-theme=\"dark\"][data-accent=\"green\"] { --control-on: #1fae78; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #1fae78; }\n:root[data-theme=\"dark\"][data-accent=\"amber\"] { --control-on: #e8a52a; --control-thumb-on: #fff; --control-glyph: #241803; --control-fill: #e8a52a; }\n:root[data-theme=\"dark\"][data-accent=\"orange\"] { --control-on: #ef873a; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #ef873a; }\n:root[data-theme=\"dark\"][data-accent=\"coral\"] { --control-on: #ec6a60; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #ec6a60; }\n:root[data-theme=\"dark\"][data-accent=\"rose\"] { --control-on: #e457a0; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #e457a0; }\n\n/* Chart series palette, shared by every chart. Series 1 is the accent itself; series 2 to 4 rotate its hue at lightness steps\n   around it, so they stay distinct for every accent. A neutral accent falls back to a blue. Validated with the dataviz script\n   across all eight accents in both themes: every pair (not only neighbours) clears CVD ΔE 9 and normal vision ΔE 17. Browsers\n   without relative color get the neutral set. Override --series-1 to --series-4 on any element to rebrand a chart. */\n:root { --series-1: #1f7dcf; --series-2: #7128a5; --series-3: #e58f00; --series-4: #009e84; }\n:root[data-theme=\"dark\"] { --series-1: #55adff; --series-2: #9c37be; --series-3: #e66e00; --series-4: #00a861; }\n@supports (color: oklch(from red clamp(.4, l * sign(max(c - .02, 0)) + .5, .8) c h)) {\n  :root {\n    --series-1: oklch(from var(--accent) calc(l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0)))) calc(c * sign(max(c - .02, 0)) + .15 * (1 - sign(max(c - .02, 0)))) calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0)))));\n    --series-2: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))) - 0.25, .76) .19 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 57));\n    --series-3: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))) + 0.14, .76) .18 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 184));\n    --series-4: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))), .76) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 292));\n  }\n  :root[data-theme=\"dark\"] {\n    --series-1: oklch(from var(--accent) calc(l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0)))) calc(c * sign(max(c - .02, 0)) + .15 * (1 - sign(max(c - .02, 0)))) calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0)))));\n    --series-2: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) - 0.19, .665) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 66));\n    --series-3: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) + 0.02, .665) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 175));\n    --series-4: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) - 0.1, .665) .18 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 270));\n  }\n}\n\n/* Focus. Pointer focus never draws a ring (product decision). Keyboard focus (:focus-visible) draws a subtle accent outline, so keyboard users\n   can always see where they are (WCAG 2.4.7). Left out of the outline: text fields, which match :focus-visible on a mouse click too and show\n   focus with their border and caret; menu items and listbox options, whose highlight fill marks the keyboard position; and tabindex=\"-1\"\n   targets (dialog panels, regions) that only receive focus from script.\n   Tune it on :root or any element, no !important needed:\n     --focus-outline           color (default: the accent, softened); set transparent to hide it\n     --focus-outline-width     default 2px\n     --focus-outline-offset    default 2px; components inside clipped containers set a negative offset */\n:focus:not(:focus-visible),\n:is(input:not([type=\"button\"], [type=\"checkbox\"], [type=\"color\"], [type=\"file\"], [type=\"image\"], [type=\"radio\"], [type=\"range\"], [type=\"reset\"], [type=\"submit\"]), textarea, [contenteditable]:not([contenteditable=\"false\"]), [role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"], [role=\"option\"], [tabindex=\"-1\"]):focus { outline: none !important; }\n:focus-visible:not(input:not([type=\"button\"], [type=\"checkbox\"], [type=\"color\"], [type=\"file\"], [type=\"image\"], [type=\"radio\"], [type=\"range\"], [type=\"reset\"], [type=\"submit\"]), textarea, [contenteditable]:not([contenteditable=\"false\"]), [role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"], [role=\"option\"], [tabindex=\"-1\"]) {\n  outline: var(--focus-outline-width, 2px) solid var(--focus-outline, color-mix(in oklab, var(--accent-strong) 72%, transparent)) !important;\n  outline-offset: var(--focus-outline-offset, 2px) !important;\n}\n"}]}