{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "foundation",
  "type": "registry:file",
  "title": "Skrewww Foundation",
  "description": "Universal Primitive/Semantic/Brand tokens, component-tier defaults required by distributed components, Shape/Surface mode overrides, and the shared .sr-only accessibility utility. Installed once; every other @skrewww/* component depends on it.",
  "author": "Skrewww",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "styles/tokens.css",
      "content": "/* ── AUTO-GENERATED Skrewww Foundation transport ──\n * Mechanically extracted from styles/tokens.css + styles/foundation.css\n * at build time — every declaration below is a verbatim substring of\n * those two files, never hand-retyped. Do not edit this file directly;\n * it will be overwritten on the next generate. ── */\n\n:root {\n\n  /* ── Primitive: color / brand [VERIFIED] ──\n     brand/600 and brand/700 synced to live Figma (was #5738c7 / #42299c). */\n  --primitive-color-brand-500: #6c4cf2; /* color/brand/500 */\n  --primitive-color-brand-600: #5638d6; /* color/brand/600 */\n  --primitive-color-brand-700: #4229ad; /* color/brand/700 */\n\n  /* ── Primitive: color / danger [VERIFIED] ──\n     Sparse status-hue family matching live Figma Primitive collection.\n     Only 100/500/600/700 exist there; do not invent 50/200/300/400/800/900.\n     Phase A declares the names only — existing component/semantic literals\n     are not retargeted in this batch. */\n  --primitive-color-danger-100: #fde2e1; /* color/danger/100 */\n  --primitive-color-danger-500: #e5484d; /* color/danger/500 */\n  --primitive-color-danger-600: #cc3b37; /* color/danger/600 */\n  --primitive-color-danger-700: #b3261e; /* color/danger/700 */\n\n  /* ── Primitive: color / warning [VERIFIED] ──\n     Sparse status-hue family matching live Figma Primitive collection.\n     Only 100/500/700/800 exist there; do not invent 50/200/300/400/600/900.\n     warning/800 exists because earlier warning steps fail normal-text AA.\n     Badge warning text and Validation Message warning text alias it.\n     Do not retarget --semantic-feedback-warning. */\n  --primitive-color-warning-100: #fef3d6; /* color/warning/100 */\n  --primitive-color-warning-500: #f5a524; /* color/warning/500 */\n  --primitive-color-warning-700: #b9770e; /* color/warning/700 */\n  --primitive-color-warning-800: #8a4f00; /* color/warning/800 */\n\n  /* ── Primitive: color / success [VERIFIED] ──\n     Live Figma Primitive success/700. Declared so Validation Message text\n     can alias it without hardcoding hex in component CSS. Do not retarget\n     --semantic-feedback-success in this pass. */\n  --primitive-color-success-700: #1f7a4d; /* color/success/700 */\n\n  /* ── Primitive: color / info [VERIFIED] ──\n     Live Figma Primitive info/700. Same consumer rule as success/700. Do\n     not retarget --semantic-feedback-info in this pass. */\n  --primitive-color-info-700: #1d4ed8; /* color/info/700 */\n\n  /* ── Primitive: color / neutral [VERIFIED] ── */\n  --primitive-color-neutral-0: #ffffff;\n  --primitive-color-neutral-50: #f7f7f8;\n  --primitive-color-neutral-100: #ededf0;\n  --primitive-color-neutral-200: #dfe0e4;\n  --primitive-color-neutral-300: #c5c6cc;\n  --primitive-color-neutral-400: #a0a3ac;\n  --primitive-color-neutral-500: #71737c;\n  /* [VERIFIED 2026-08-15] Synced to the live Figma Foundation audit.\n     color/neutral/600 resolves #5B5F68 and color/neutral/900 resolves\n     #17181B there; React had drifted to #52545c / #131316. Corrected at the\n     primitive layer rather than at the semantic aliases or any consumer,\n     because each of these primitives has exactly one consumer\n     (--semantic-text-secondary and --semantic-text-primary respectively),\n     so the whole semantic contract inherits the fix with no component\n     edits. neutral/400 is now synced independently; semantic/border/strong\n     was a separate neutral/300 alias and follow-up parity question — now\n     closed, see semantic/border/strong below. */\n  --primitive-color-neutral-600: #5b5f68;\n  --primitive-color-neutral-900: #17181b;\n\n  /* ── Primitive: opacity [VERIFIED] ── */\n  --primitive-opacity-disabled: 0.4; /* opacity/disabled */\n\n  /* ── Primitive: shadow [TEMPORARY] — blur/color values pending Figma confirmation ── */\n  --primitive-shadow-blur-3: 8px; /* shadow-blur/3 — TODO: confirm px value */\n  --primitive-shadow-blur-4: 12px; /* shadow-blur/4 — TODO: confirm px value */\n  --primitive-shadow-blur-5: 16px; /* shadow-blur/5 — TODO: confirm px value */\n  --primitive-shadow-color-3: rgb(19 19 22 / 0.08); /* shadow-color/3 — TODO: confirm alpha */\n  --primitive-shadow-color-4: rgb(19 19 22 / 0.1); /* shadow-color/4 — TODO: confirm alpha */\n  --primitive-shadow-color-5: rgb(19 19 22 / 0.12); /* shadow-color/5 — TODO: confirm alpha */\n\n  /* ── Primitive: radius [VERIFIED] ──\n     Figma VariableID:2002:2432 resolves 9999px. Pill / circular exceptions\n     (Tag, Avatar, Calendar Day, Stepper) bind here — not Shape-driven. */\n  --radius-full: 9999px; /* radius/full */\n\n  /* ── Semantic (Light) [VERIFIED / ALIASED] ── */\n  --semantic-action-primary: var(--primitive-color-brand-500); /* [ALIASED] */\n  --semantic-action-primary-hover: var(--primitive-color-brand-600); /* [ALIASED] */\n  --semantic-action-primary-pressed: var(--primitive-color-brand-700); /* [ALIASED] */\n  --semantic-action-danger: var(--primitive-color-danger-500); /* [ALIASED] semantic/action/danger → color/danger/500 */\n  --semantic-action-danger-hover: #b82433; /* [TEMPORARY] — hover step not documented */\n  --semantic-action-danger-pressed: #961d29; /* [TEMPORARY] — pressed step not documented */\n  --semantic-text-primary: var(--primitive-color-neutral-900); /* [ALIASED] */\n  --semantic-text-secondary: var(--primitive-color-neutral-600); /* [ALIASED] */\n  --semantic-text-inverse: var(--primitive-color-neutral-0); /* [ALIASED] */\n  --semantic-text-disabled: var(--primitive-color-neutral-400); /* [ALIASED] */\n  --semantic-text-danger: var(--primitive-color-danger-600); /* [ALIASED] semantic/text/danger */\n  --semantic-surface-default: var(--primitive-color-neutral-0); /* [ALIASED] */\n  --semantic-surface-elevated: var(--primitive-color-neutral-50); /* [ALIASED] */\n  --semantic-surface-subtle: var(--primitive-color-neutral-50); /* [ALIASED] */\n  --semantic-surface-disabled: var(--primitive-color-neutral-100); /* [TEMPORARY] disabled fill */\n  --semantic-border-default: var(--primitive-color-neutral-200); /* [ALIASED] */\n  --semantic-border-strong: var(--primitive-color-neutral-400); /* [ALIASED] */\n  --semantic-border-disabled: var(--primitive-color-neutral-200); /* [TEMPORARY] */\n  --semantic-focus-ring: var(--primitive-color-brand-500); /* [ALIASED] semantic/focus-ring */\n  --semantic-icon-muted: var(--primitive-color-neutral-400); /* [ALIASED] */\n  /* [VERIFIED] semantic/icon/danger — Figma VariableID:2002:2476 → color/danger/500.\n     Stable-v1 consumers: Alert/Toast via --feedback-error-icon; File Upload Error icon;\n     Link Danger root/icon currentColor.\n     Deferred / non-consumers: ValidationMessage, Menu, Text Input (no built-in\n     error status icon), Button Danger Figma hygiene. */\n  --semantic-icon-danger: var(--primitive-color-danger-500); /* [ALIASED] semantic/icon/danger */\n  --semantic-feedback-success: #1a8b4c; /* [VERIFIED] */\n  --semantic-feedback-warning: #b36a00; /* [VERIFIED] */\n  --semantic-feedback-info: #2563c7; /* [VERIFIED] */\n\n  /* ── Component [TEMPORARY] — radius values pending Shape collection confirmation ── */\n  --component-radius-control: 6px; /* component/radius/control — Rounded mode default */\n  --component-radius-container: 12px; /* component/radius/container — Rounded mode default */\n\n  /* [VERIFIED] Button's Rounded master binds component/radius/control to\n     radius/sm = 4px. Scoped to Button so controls that still intentionally\n     consume the older shared 6px placeholder do not change geometry. */\n  --component-button-radius-control: 4px;\n\n  /* [VERIFIED] component/button/primary interaction family. Kept separate\n     from the generic brand primitives so correcting Button does not change\n     another component that consumes semantic/action/primary interaction. */\n  --component-button-primary-fill: #6c4cf2;\n  --component-button-primary-fill-hover: #5638d6;\n  --component-button-primary-fill-pressed: #4229ad;\n\n  /* [VERIFIED] component/button/danger/background (Flat/Gradient) — Figma's\n     dedicated Button-danger fill, confirmed via master-component inspection\n     2026-08-11 (node 2012:7742). Deliberately distinct from the generic\n     --semantic-action-danger (danger/500) used for Alert/Toast/focus rings —\n     Button's own component-level token remains a separate binding, not a\n     drift bug. Only Button's Danger variant references this; the shared\n     brand/primary family below reuses --semantic-action-primary directly\n     since that value already matches component/button/primary/background\n     exactly, so no parallel --component-brand-fill was needed. */\n  --component-danger-fill: #e5484d;\n  /* [VERIFIED] Button Danger interaction fills — component-scoped on\n     purpose. The generic semantic/action/danger family remains unchanged\n     for Alert, Toast, and other feedback consumers. */\n  --component-danger-fill-hover: #cc3b37;\n  --component-danger-fill-pressed: #b3261e;\n\n  /* [VERIFIED] component/validation-message/text — retained untyped Error\n     token (Figma Form Field helper + React Error icon). Aliases\n     color/danger/600. Distinct from --semantic-action-danger chrome. */\n  --component-validation-message-text: var(--primitive-color-danger-600);\n  /* [VERIFIED 2026-08-30] Typed Validation Message text tokens matching\n     Figma component/validation-message/{error,warning,success,info}/text.\n     Icons stay on the untyped Error token / semantic-feedback-* tokens. */\n  --component-validation-message-error-text: var(--primitive-color-danger-600);\n  --component-validation-message-warning-text: var(--primitive-color-warning-800);\n  --component-validation-message-success-text: var(--primitive-color-success-700);\n  --component-validation-message-info-text: var(--primitive-color-info-700);\n\n  /* [VERIFIED] Separate Primary and Danger three-stop Glass-rim families.\n     They are transparent outside Glass and are intentionally independent\n     from Button's Surface-independent --semantic-focus-ring treatment. */\n  --component-button-primary-border-start: rgb(255 255 255 / 0);\n  --component-button-primary-border-mid: rgb(108 76 242 / 0);\n  --component-button-primary-border-end: rgb(108 76 242 / 0);\n  --component-button-danger-border-start: rgb(255 255 255 / 0);\n  --component-button-danger-border-mid: rgb(229 72 77 / 0);\n  --component-button-danger-border-end: rgb(229 72 77 / 0);\n\n  /* ── Brand [ALIASED] ── */\n  --brand-action-primary: var(--semantic-action-primary);\n\n  /* ── Shape (default: Rounded) [ALIASED] ── */\n  --shape-radius-control: var(--component-radius-control);\n  --shape-radius-container: var(--component-radius-container);\n\n  /* ── Surface (default: Flat) [ALIASED] ── */\n  --surface-fill-default: var(--semantic-surface-default);\n  --surface-fill-control: var(--semantic-surface-default);\n  --surface-border-default: var(--semantic-border-default);\n  /* [VERIFIED] Stable-v1 Gradient is one additive lightness overlay. The\n     component base color remains a separate background-color; Flat and\n     Glass resolve this image to none. Exact alphas match Figma's 8-bit\n     #FFFFFF14 (20/255) and #0000000A (10/255) values in Gradient mode. */\n  --component-surface-gradient-overlay-start: transparent;\n  --component-surface-gradient-overlay-end: transparent;\n  --component-surface-gradient-overlay: none;\n  /* [VERIFIED] Shared Card-family Surface contract. Unlike the broader\n     experimental --surface-fill-default cascade, Figma keeps Flat and\n     Gradient identical for these containers and switches only Glass. */\n  --component-card-surface: var(--semantic-surface-default);\n  --component-card-border: var(--semantic-border-default);\n  --component-card-border-highlight-1: var(--semantic-border-default);\n  --component-card-border-highlight-2: var(--semantic-border-default);\n  --component-card-border-highlight-3: var(--semantic-border-default);\n  --component-card-border-gradient: linear-gradient(\n    162.47deg,\n    var(--component-card-border-highlight-1) 0%,\n    var(--component-card-border-highlight-2) 50%,\n    var(--component-card-border-highlight-3) 100%\n  );\n  --component-surface-content-muted: var(--semantic-icon-muted);\n  --component-surface-backdrop-filter: none;\n  /* [TEMPORARY] raised Card shadow — offset/spread pending Figma shadow tokens */\n  --surface-shadow-raised: 0 var(--primitive-shadow-blur-3) var(--primitive-shadow-blur-3)\n    var(--primitive-shadow-color-3);\n  --surface-shadow-elevated: 0 var(--primitive-shadow-blur-5) var(--primitive-shadow-blur-5)\n    var(--primitive-shadow-color-5);\n\n  /* ── Control sizing [TEMPORARY] — exact Figma Small/Medium/Large dimensions unresolved ── */\n  --control-height-sm: 2rem;\n  --control-height-md: 2.5rem;\n  --control-height-lg: 3rem;\n  --control-padding-x-sm: 0.75rem;\n  --control-padding-x-md: 1rem;\n  --control-padding-x-lg: 1.25rem;\n  --control-font-size-sm: 0.875rem;\n  --control-font-size-md: 0.875rem;\n  --control-font-size-lg: 1rem;\n  --control-gap: 0.5rem;\n\n  --opacity-disabled: var(--primitive-opacity-disabled);\n\n  /* ── Shared indicator / separator geometry (Foundation-transported) ──\n     Spinner and Divider size/spacing tokens are shared system infrastructure\n     (not owned by a single visual skin). Kept above the Foundation cut so\n     `/r/foundation.json` delivers them to distributed Spinner/Divider consumers\n     without duplicating declarations into each component payload. */\n  --spinner-size-sm: 1rem;\n  --spinner-size-md: 1.25rem;\n  --spinner-size-lg: 1.5rem;\n  --spinner-animation-duration: 0.8s;\n  --divider-thickness: 1px;\n  --divider-color: var(--semantic-border-default);\n  --divider-spacing-y: 1rem;\n  --divider-spacing-x: 0.75rem;\n  --divider-vertical-min-height: 2rem;\n\n  /*\n   * ══ Foundation boundary (verified 2026-08-08; spinner/divider geometry\n   * promoted into Foundation 2026-09-13; component-tier transport added\n   * 2026-09-22 — OSS-1B Option B) ══\n   *\n   * Conceptual ownership (unchanged): everything above this line —\n   * Primitive, Semantic, Brand, Shape/Surface aliased defaults, Control\n   * sizing, and shared Spinner/Divider geometry — is the universal tier:\n   * needed by every component (or by multiple independent components),\n   * owned by none of them individually. Everything below, from\n   * \"Form control geometry\" through the named \"<Component> geometry\"\n   * blocks, is component-specific: it belongs to one component (or a\n   * small family), not to every component. Button does not read any\n   * custom property from any of those component-geometry blocks.\n   *\n   * shadcn Foundation *transport* (OSS-1B): `extractFoundationCssFromSource`\n   * now ships the component-tier defaults as well (this comment through\n   * the end of `:root`), still ahead of the Shape/Surface mode blocks\n   * further down this file. Mode attributes are applied on `<html>` with\n   * equal specificity to `:root`, so source order — defaults first, mode\n   * overrides later — is what keeps Shape/Surface winning. The marker\n   * comments below remain the extraction anchors; do not reorder them\n   * without updating the generator.\n   */\n\n/* ── Form control geometry [TEMPORARY] ── */\n  --control-checkbox-size: 1rem;\n  --control-checkbox-radius-max: 4px;\n  --control-radio-size: 1rem;\n  --control-switch-track-width: 2.5rem;\n  --control-switch-track-height: 1.5rem;\n  --control-switch-thumb-size: 1.125rem;\n  --control-switch-thumb-offset: 0.125rem;\n  /* [TEMPORARY] Textarea min-heights — Figma has no numeric height property */\n  --control-textarea-min-height-sm: 5rem;\n  --control-textarea-min-height-md: 6.5rem;\n  --control-textarea-min-height-lg: 8rem;\n\n  /* ── Feedback component geometry [TEMPORARY] ── */\n  --feedback-padding: 1rem;\n  --feedback-content-gap: 0.75rem;\n  --feedback-radius: var(--shape-radius-container);\n  /* [VERIFIED] Feedback/Alert Surface family. Flat and Gradient use the\n     feedback-100 fills; Glass keeps each hue at 45% opacity. Toast does\n     not consume these aliases — its live masters use the Card contract. */\n  --feedback-info-surface: #dceefe;\n  --feedback-info-border: rgb(37 99 199 / 0.24);\n  /* Alert description on always-light feedback surfaces. Figma:\n     semantic/text/secondary (#5B5F68). Do not alias content-muted —\n     that token stays for dismiss/cascade consumers. Toast overrides\n     --feedback-text to semantic-text-primary on .toast. */\n  --feedback-info-text: var(--semantic-text-secondary);\n  --feedback-info-title: var(--semantic-text-primary);\n  --feedback-info-icon: #3b82f6;\n  --feedback-success-surface: #dff5e6;\n  --feedback-success-border: rgb(26 139 76 / 0.24);\n  --feedback-success-text: var(--semantic-text-secondary);\n  --feedback-success-title: var(--semantic-text-primary);\n  --feedback-success-icon: #30a46c;\n  --feedback-warning-surface: #fef3d6;\n  --feedback-warning-border: rgb(179 106 0 / 0.28);\n  --feedback-warning-text: var(--semantic-text-secondary);\n  --feedback-warning-title: var(--semantic-text-primary);\n  --feedback-warning-icon: #f5a524;\n  --feedback-error-surface: #fde2e1;\n  --feedback-error-border: rgb(217 45 62 / 0.24);\n  --feedback-error-text: var(--semantic-text-secondary);\n  --feedback-error-title: var(--semantic-text-primary);\n  /* [ALIASED] Alert/Toast error status icons via FeedbackSurface.\n     Resolves semantic-icon-danger → danger-500 → #E5484D (zero visual delta). */\n  --feedback-error-icon: var(--semantic-icon-danger);\n  --toast-max-width: 24rem;\n  --toast-viewport-offset: 1rem;\n  --progress-track-height: 0.5rem;\n  --progress-animation-duration: 1.4s;\n\n  /* ── Badge geometry [TEMPORARY] ── */\n  --badge-gap: 0.25rem;\n  --badge-min-height-sm: 1.25rem;\n  --badge-min-height-md: 1.5rem;\n  --badge-min-height-lg: 1.75rem;\n  --badge-padding-x-sm: 0.375rem;\n  --badge-padding-x-md: 0.5rem;\n  --badge-padding-x-lg: 0.625rem;\n  --badge-padding-y-sm: 0.125rem;\n  --badge-padding-y-md: 0.1875rem;\n  --badge-padding-y-lg: 0.25rem;\n  --badge-font-size-sm: 0.6875rem;\n  --badge-font-size-md: 0.75rem;\n  --badge-font-size-lg: 0.8125rem;\n  --badge-icon-size-sm: 0.75rem;\n  --badge-icon-size-md: 0.875rem;\n  --badge-icon-size-lg: 1rem;\n  --badge-radius: min(var(--shape-radius-control), 9999px);\n  --badge-neutral-surface: var(--semantic-surface-elevated, #f3f4f6);\n  --badge-neutral-border: var(--semantic-border-default);\n  --badge-neutral-text: var(--semantic-text-primary);\n  --badge-info-surface: rgb(37 99 199 / 0.1);\n  --badge-info-border: rgb(37 99 199 / 0.24);\n  --badge-info-text: #1e4f9c;\n  --badge-success-surface: rgb(26 139 76 / 0.1);\n  --badge-success-border: rgb(26 139 76 / 0.24);\n  --badge-success-text: #156b3f;\n  --badge-warning-surface: rgb(179 106 0 / 0.12);\n  --badge-warning-border: rgb(179 106 0 / 0.28);\n  --badge-warning-text: var(--primitive-color-warning-800); /* [ALIASED] → color/warning/800 */\n  --badge-error-surface: rgb(217 45 62 / 0.1);\n  --badge-error-border: rgb(217 45 62 / 0.24);\n  --badge-error-text: #9f1f2d;\n\n  /* ── Tooltip geometry [TEMPORARY] ── */\n  --tooltip-surface: var(--color-neutral-900, #131316);\n  --tooltip-text: #ffffff;\n  --tooltip-max-width: 16rem;\n  --tooltip-padding-x: 0.625rem;\n  --tooltip-padding-y: 0.375rem;\n  --tooltip-radius: var(--shape-radius-container);\n  --tooltip-offset: 0.5rem;\n  --tooltip-open-delay: 300ms;\n  --tooltip-close-delay: 100ms;\n  --tooltip-motion-duration: 120ms;\n  --tooltip-z-index: 60;\n  --tooltip-shadow: 0 8px 24px rgb(19 19 22 / 0.18);\n\n  /* ── Skeleton geometry [TEMPORARY] ── */\n  --skeleton-base-surface: var(--semantic-border-default);\n  --skeleton-highlight-surface: rgb(255 255 255 / 0.45);\n  --skeleton-radius: min(var(--shape-radius-control), 0.375rem);\n  --skeleton-animation-duration: 1.4s;\n  --skeleton-line-height: 0.875rem;\n  --skeleton-text-width: 100%;\n  --skeleton-circle-size: 2.5rem;\n  --skeleton-rectangle-height: 5rem;\n\n  /* ── Link geometry — declared on .link in link.module.css for distribution\n     self-containment (Foundation delivers semantic aliases; Link owns its\n     local geometry). Kept out of the Foundation cut intentionally. ── */\n\n  /* ── Breadcrumb geometry [TEMPORARY] ── */\n  --breadcrumb-font-size: 0.75rem;\n  --breadcrumb-gap: 0.375rem;\n  --breadcrumb-separator: var(--semantic-text-secondary);\n  --breadcrumb-current-text: var(--semantic-text-primary);\n  --breadcrumb-icon-size: 0.875rem;\n  --breadcrumb-max-item-width: 16rem;\n\n  /* ── Tabs geometry [TEMPORARY] ── */\n  --tab-height: 2.5rem;\n  --tab-padding-x: 0.75rem;\n  --tab-gap: 0.25rem;\n  --tab-font-size: 0.875rem;\n  --tab-text: var(--semantic-text-secondary);\n  --tab-active-text: var(--semantic-text-primary);\n  --tab-active-indicator: var(--semantic-action-primary);\n  --tab-border: var(--semantic-border-default);\n  --tab-indicator-thickness: 2px;\n  --tab-transition-duration: 150ms;\n\n  /* ── Pagination Page Item geometry [VERIFIED] ── */\n  --pagination-control-size: 2rem;\n  --pagination-gap: 0.25rem;\n  --pagination-font-size: 1rem;\n  --pagination-page-radius: 4px;\n  --pagination-text: var(--semantic-text-secondary);\n  /* [VERIFIED] Navigation/Page Item Default (2024:2890, label 2024:2883)\n     is transparent and uses semantic/text/secondary in every Surface mode.\n     Current keeps the separate Surface-aware inverse-content contract below. */\n  --pagination-page-content: var(--semantic-text-secondary);\n  --pagination-page-hover-surface: #f7f7f8;\n  --pagination-page-hover-content: #17181b;\n  /* [VERIFIED] Updated 2026-08-11 to match the approved Figma Page Item\n     Current contract (component set 2024:2894, Current 2024:2892) — the\n     previously-shipped neutral/elevated treatment was never an approved\n     intentional deviation from Primary/brand family. */\n  --pagination-current-surface: var(--semantic-action-primary);\n  --pagination-current-text: var(--component-surface-content, var(--semantic-text-inverse));\n  --pagination-border: var(--semantic-border-default);\n  --pagination-disabled-text: #a0a3ac;\n  --pagination-ellipsis-content: #a0a3ac;\n  --pagination-ellipsis-width: 2rem;\n\n  /* ── Dialog geometry [TEMPORARY] ── */\n  --dialog-overlay-background: rgb(19 19 22 / 0.56);\n  --dialog-overlay-background-opaque: rgb(19 19 22 / 0.88);\n  --dialog-surface: var(--semantic-surface-default);\n  --dialog-text: var(--semantic-text-primary);\n  --dialog-border: var(--semantic-border-default);\n  --dialog-radius: var(--shape-radius-container);\n  --dialog-elevation: 0 var(--primitive-shadow-blur-5) var(--primitive-shadow-blur-5)\n    var(--primitive-shadow-color-5);\n  --dialog-width: 32rem;\n  --dialog-max-height: 85vh;\n  --dialog-padding: 1.25rem;\n  --dialog-viewport-padding: 1rem;\n  --dialog-header-gap: 0.75rem;\n  --dialog-body-gap: 0.5rem;\n  --dialog-close-size: 2rem;\n  --dialog-z-index: 70;\n  --dialog-open-duration: 180ms;\n  --dialog-close-duration: 150ms;\n  --dialog-motion-easing: ease;\n\n  /* ── Popover geometry ──\n   * Canonical Figma Content 2044:26006 is a Card-family rich overlay\n   * (card/surface, 3-stop highlight rim, surface/blur, padding 12, radius 12).\n   * No drop shadow. No Gradient overlay. popover.module.css composes that\n   * locally using Card tokens (Dialog rim pattern). These --popover-* aliases\n   * stay the Select / Date Picker implementation lock — those shells must\n   * not inherit the rich rim. --popover-elevation is retained for that lock,\n   * not for canonical Popover. */\n  --popover-surface: var(--semantic-surface-default);\n  --popover-surface-opaque: var(--semantic-surface-default);\n  --popover-text: var(--semantic-text-primary);\n  --popover-border: var(--semantic-border-default);\n  --popover-radius: var(--shape-radius-container);\n  --popover-elevation: 0 var(--primitive-shadow-blur-4) var(--primitive-shadow-blur-4)\n    var(--primitive-shadow-color-4);\n  --popover-padding: 0.75rem; /* [VERIFIED] Figma spacing/12 on Content 2044:26006 */\n  --popover-max-width: 20rem;\n  --popover-offset: 0.5rem;\n  --popover-viewport-padding: 0.5rem;\n  --popover-body-gap: 0.5rem;\n  --popover-arrow-size: 0.625rem;\n  --popover-z-index: 65;\n  --popover-open-duration: 150ms;\n  --popover-close-duration: 120ms;\n  --popover-motion-easing: ease;\n\n  /* ── Menu panel (Figma Navigation/Menu Panel 2181:216) ──\n   * Flat/Gradient: solid surface + semantic border; blur off.\n   * Glass: remapped below to panel-surface 12% / panel-border 24% /\n   * component/surface/blur 16px via --menu-backdrop-filter. */\n  --menu-surface: var(--semantic-surface-default);\n  --menu-border: var(--semantic-border-default);\n  /* Figma Menu Panel 2181:216 — no drop shadow in any Surface mode. */\n  --menu-elevation: none;\n  --menu-backdrop-filter: none;\n  --menu-radius: var(--popover-radius);\n  --menu-padding: 0.25rem;\n  --menu-min-width: 10rem;\n  --menu-max-width: 18rem;\n  --menu-max-height: min(24rem, calc(100vh - var(--menu-viewport-padding) * 2));\n  --menu-item-height: 2.25rem;\n  --menu-item-padding: 0.5rem 0.625rem;\n  --menu-item-gap: 0.125rem;\n  --menu-item-radius: var(--shape-radius-control);\n  --menu-item-text: var(--semantic-text-primary);\n  --menu-item-icon: var(--semantic-icon-muted);\n  --menu-item-hover-surface: var(--semantic-surface-elevated);\n  --menu-item-focused-surface: var(--semantic-surface-subtle);\n  --menu-item-disabled-text: var(--semantic-text-disabled);\n  --menu-item-destructive-text: var(--semantic-text-danger);\n  --menu-item-destructive-hover-surface: var(--semantic-surface-subtle);\n  --menu-label-text: var(--semantic-text-secondary);\n  --menu-label-padding: 0.375rem 0.625rem 0.25rem;\n  --menu-separator-color: var(--semantic-border-default);\n  --menu-separator-margin: 0.25rem 0;\n  --menu-shortcut-text: var(--semantic-text-secondary);\n  --menu-viewport-padding: var(--popover-viewport-padding);\n  --menu-z-index: var(--popover-z-index);\n  --menu-open-duration: var(--popover-open-duration);\n  --menu-close-duration: var(--popover-close-duration);\n  --menu-motion-easing: var(--popover-motion-easing);\n\n  /* ── Combobox listbox shell — selectable-list contract, not Popover ──\n   * Figma Forms/Combobox Listbox Panel 2181:1173 shares the resolved Menu\n   * Panel construction. Alias the Menu panel shell; keep Combobox as its\n   * own component. Viewport padding stays Popover positioning chrome. */\n  --combobox-icon: var(--semantic-icon-muted);\n  --combobox-popup-surface: var(--menu-surface);\n  --combobox-popup-border: var(--menu-border);\n  --combobox-popup-elevation: var(--menu-elevation);\n  --combobox-popup-radius: var(--menu-radius);\n  --combobox-popup-padding: var(--menu-padding);\n  --combobox-popup-max-height: min(16rem, calc(100vh - var(--popover-viewport-padding) * 2));\n  --combobox-option-height: 2.25rem;\n  --combobox-option-padding: 0.5rem 0.625rem;\n  --combobox-option-radius: var(--shape-radius-control);\n  --combobox-option-text: var(--semantic-text-primary);\n  /* [VERIFIED 2026-08-30] Forms/Combobox Option 2740:554 — Hover/Active/Selected\n     share component/menu/item-hover via the canonical Menu row-highlight token\n     (Flat/Gradient #F7F7F8, Glass white 20%). Do not alias elevated/subtle:\n     those stay opaque in Glass. */\n  --combobox-option-active-surface: var(--menu-item-hover-surface);\n  --combobox-option-selected-surface: var(--menu-item-hover-surface);\n  --combobox-option-disabled-text: var(--semantic-text-disabled);\n  --combobox-empty-padding: 0.625rem;\n  --combobox-empty-min-height: 2.25rem;\n  --combobox-empty-text: var(--semantic-text-secondary);\n\n  /* ── File Upload [VERIFIED] — Forms/File Upload 2024:2649 ── */\n  --file-upload-surface: var(--component-card-surface);\n  --file-upload-border: var(--component-card-border);\n  --file-upload-dragging-surface: var(--semantic-surface-elevated);\n  --file-upload-border-style: dashed;\n  --file-upload-border-dragging: var(--semantic-action-primary);\n  --file-upload-border-error: var(--semantic-action-danger);\n  --file-upload-radius: var(--shape-radius-container);\n  --file-upload-padding: 1.25rem;\n  --file-upload-min-height: 8rem;\n  --file-upload-icon-size: 1.75rem;\n  --file-upload-icon: var(--component-surface-content-muted);\n  --file-upload-title-text: var(--semantic-text-secondary);\n  --file-upload-description-text: var(--component-surface-content-muted);\n  --file-upload-list-gap: 0.5rem;\n  --file-upload-item-surface: var(--component-card-surface);\n  --file-upload-item-border: var(--component-card-border);\n  --file-upload-item-radius: var(--shape-radius-control);\n  --file-upload-item-padding: 0.625rem 0.75rem;\n  --file-upload-file-name-text: var(--semantic-text-primary);\n  --file-upload-metadata-text: var(--component-surface-content-muted);\n  --file-upload-remove-size: 2rem;\n\n  /* ── Table [VERIFIED] — Content/Table 2321:1964 ── */\n  --table-surface: var(--component-card-surface); /* [ALIASED] locally locked to Flat */\n  --table-border: var(--component-card-border); /* [ALIASED] locally locked to Flat */\n  /* Figma binds radius/lg (12px), not the Shape-aware container radius. */\n  --table-radius: 12px;\n  --table-text: var(--semantic-text-primary); /* [ALIASED] */\n  --table-muted-text: var(--semantic-text-secondary); /* [ALIASED] */\n  --table-header-surface: var(--semantic-surface-elevated); /* [ALIASED] */\n  --table-body-surface: var(--semantic-surface-default); /* [ALIASED] */\n  --table-header-text: var(--component-surface-content-muted); /* [ALIASED] locally locked to Flat */\n  --table-header-border: var(--semantic-border-default); /* [ALIASED] */\n  --table-row-border: var(--semantic-border-default); /* [ALIASED] */\n  --table-cell-padding-inline: 1rem; /* [VERIFIED] spacing/16 */\n  --table-cell-padding-block: 0.75rem; /* [VERIFIED] spacing/12 */\n  --table-caption-text: var(--semantic-text-secondary); /* [ALIASED] */\n  --table-caption-gap: 0.5rem; /* TEMPORARY — canonical Figma caption visual pending */\n  --table-footer-surface: var(--semantic-surface-subtle); /* [ALIASED] */\n  /* TEMPORARY — responsive edge-fade treatment is React-only. */\n  --table-scroll-shadow: var(--primitive-shadow-color-5);\n  --table-scroll-fade-size: 1.25rem;\n\n  /* ── Drawer geometry [TEMPORARY] ── */\n  --drawer-overlay-background: var(--dialog-overlay-background);\n  --drawer-overlay-background-opaque: var(--dialog-overlay-background-opaque);\n  --drawer-surface: var(--dialog-surface);\n  --drawer-text: var(--dialog-text);\n  --drawer-border: var(--dialog-border);\n  --drawer-radius: var(--dialog-radius);\n  --drawer-elevation: var(--dialog-elevation);\n  --drawer-width: 24rem;\n  --drawer-max-width: min(24rem, 92vw);\n  --drawer-padding: var(--dialog-padding);\n  --drawer-header-gap: var(--dialog-header-gap);\n  --drawer-body-gap: var(--dialog-body-gap);\n  --drawer-close-size: var(--dialog-close-size);\n  --drawer-z-index: 75;\n  --drawer-open-duration: var(--dialog-open-duration);\n  --drawer-close-duration: var(--dialog-close-duration);\n  --drawer-motion-easing: var(--dialog-motion-easing);\n\n  /* ── Accordion geometry [TEMPORARY] ── */\n  --accordion-item-border: var(--semantic-border-default);\n  --accordion-item-surface: var(--semantic-surface-default);\n  --accordion-radius: var(--shape-radius-container);\n  --accordion-trigger-height: 3rem;\n  --accordion-trigger-padding: 0.875rem 1rem;\n  --accordion-trigger-gap: 0.75rem;\n  --accordion-trigger-text: var(--semantic-text-primary);\n  --accordion-panel-padding: 1rem;\n  --accordion-panel-text: var(--semantic-text-secondary);\n  --accordion-motion-duration: 180ms;\n  --accordion-motion-easing: ease;\n\n  /* ── Tag geometry [TEMPORARY] ── */\n  --tag-min-height: 1.75rem;\n  --tag-padding-x: 0.625rem;\n  --tag-gap: 0.375rem;\n  --tag-text: var(--semantic-text-primary);\n  --tag-surface: var(--semantic-surface-elevated);\n  --tag-border: var(--semantic-border-default);\n  --tag-radius: var(--radius-full); /* [VERIFIED] Pill label from Figma */\n  --tag-icon-size: 0.875rem;\n  --tag-remove-size: 1.25rem;\n\n  /* ── Avatar geometry [VERIFIED] ── */\n  --avatar-size-sm: 1.5rem;\n  --avatar-size-md: 2rem;\n  --avatar-size-lg: 3rem;\n  --avatar-background: var(--component-button-primary-fill);\n  /* [VERIFIED] component/surface/content participant, confirmed 2026-08-11\n     (node 2044:26027) — falls back to the existing white value outside\n     Glass, so this is the only line that changed. */\n  --avatar-text: var(--component-surface-content, var(--semantic-text-inverse));\n  --avatar-radius: 9999px; /* [VERIFIED] radius/full — always circular */\n  --avatar-image-fit: cover;\n\n  /* Divider geometry lives in Foundation (above the cut) as of 2026-09-13. */\n\n  /* ── List Item geometry [VERIFIED] — Content/List Item 2044:26095 ── */\n  --list-item-min-height: 3.5rem;\n  --list-item-padding-x: 0.875rem;\n  --list-item-padding-y: 0.625rem;\n  --list-item-gap: 0.75rem;\n  --list-item-leading-size: 2.5rem;\n  --list-item-surface: transparent;\n  --list-item-hover-surface: var(--menu-item-hover-surface);\n  --list-item-title-text: var(--semantic-text-primary);\n  /* component/list-item/supporting-text — a List Item-specific Surface\n     variable (Figma), deliberately distinct from the shared\n     component/surface/content-muted: Default/Hover Subtitle+Meta resolve\n     semantic/text/secondary in Flat/Gradient and semantic/text/primary in\n     Glass (see the Glass override below). Other content-muted consumers\n     (File Upload, Table, List Item's own leading icon) are untouched. */\n  --component-list-item-supporting-text: var(--semantic-text-secondary);\n  --list-item-description-text: var(--component-list-item-supporting-text);\n  --list-item-metadata-text: var(--component-list-item-supporting-text);\n  --list-item-radius: var(--shape-radius-control);\n\n  /* ── Tree Item geometry [VERIFIED] — Content/Tree Item component set,\n     confirmed via direct Figma inspection: 20px-per-depth indentation\n     verified in the \"Tree View (example)\" composed demo (depth 0 = 0px,\n     depth 1 = 20px, depth 2 = 40px). Hover and Selected both reuse Menu\n     Item's already-established, Surface-aware hover token; Selected's\n     label color is a fixed accent (not Surface-reactive), same treatment\n     as Tabs' active indicator. ── */\n  --tree-item-indent-unit: 20px;\n  --tree-item-height: 2.25rem;\n  --tree-item-padding-x: 0.625rem;\n  --tree-item-gap: 0.5rem;\n  --tree-item-icon-size: 1rem;\n  --tree-item-chevron-size: 1rem;\n  --tree-item-text: var(--semantic-text-primary);\n  --tree-item-icon-color: var(--semantic-icon-muted);\n  --tree-item-hover-surface: var(--menu-item-hover-surface);\n  --tree-item-selected-surface: var(--menu-item-hover-surface);\n  --tree-item-selected-text: var(--semantic-action-primary);\n  --tree-item-radius: var(--shape-radius-control);\n\n  /* ── Charts geometry [VERIFIED] — \"Content/Charts\" section, confirmed via\n     direct Figma inspection: Bar Chart (example) uses a single\n     semantic/action/primary fill with real proportional bar heights and\n     semantic/text/secondary month labels; Line Chart (example) uses a 2px\n     semantic/action/primary stroke with 6px hollow-ring markers\n     (semantic/surface/default fill, semantic/action/primary stroke). Both\n     are single-series, static (no tooltip/legend) for v1.\n\n     CH-1: the chart COLOR aliases (--bar-chart-fill, --bar-chart-axis-text,\n     --line-chart-stroke, --line-chart-dot-fill, --line-chart-dot-stroke) now\n     live in components/ui/bar-chart.module.css and line-chart.module.css.\n     They were removed from this file because component-tier tokens below the\n     Foundation boundary are not part of the shadcn Foundation transport, so a\n     distributed chart referenced variables its consumer never received.\n     Only the two geometry values below remain here; the components currently\n     hard-code 2px / 3px and do not consume them (recorded chart debt). ── */\n  --line-chart-stroke-width: 2px;\n  --line-chart-dot-radius: 3px;\n\n  /* ── Timeline geometry [TEMPORARY] — \"Content/Timeline Item\" Figma-facing\n     prose confirmed (State: Default outlined ring / Highlighted larger\n     solid dot; Title/Timestamp/Description fields; connector suppression\n     is purely positional — last item only, decoupled from state), but no\n     Figma node ID has been given/verified for Timeline yet — unlike Tree\n     View/Charts, this is unresolved-mcp until a follow-up confirms it.\n     Marker/connector exact sizing, single shared marker color across both\n     states, and secondary-text token choice for Timestamp/Description\n     below are this implementation's own decisions where the given facts\n     didn't specify them. ── */\n  --timeline-gap: 0.75rem;\n  --timeline-item-gap: 1.5rem;\n  --timeline-header-gap: 0.5rem;\n  --timeline-marker-size: 0.75rem;\n  --timeline-marker-highlighted-size: 1rem;\n  --timeline-marker-border-width: 2px;\n  --timeline-marker-color: var(--semantic-action-primary);\n  --timeline-connector-width: 2px;\n  --timeline-connector-min-height: 1.5rem;\n  --timeline-connector-color: var(--semantic-border-default);\n  --timeline-title-text: var(--semantic-text-primary);\n  --timeline-timestamp-text: var(--semantic-text-secondary);\n  --timeline-description-text: var(--semantic-text-secondary);\n  --timeline-description-max-width: 220px;\n\n  /* ── Empty State geometry [TEMPORARY] ── */\n  --empty-state-max-width: 28rem;\n  --empty-state-padding-x: 1rem;\n  --empty-state-padding-y: 2rem;\n  --empty-state-content-gap: 1rem;\n  --empty-state-action-gap: 0.75rem;\n  --empty-state-icon-size: 2.5rem;\n  --empty-state-illustration-size: 12rem;\n  --empty-state-title-text: var(--semantic-text-primary);\n  --empty-state-description-text: var(--semantic-text-secondary);\n\n  /* ── Calendar Day geometry ── */\n  --calendar-day-size: 2rem; /* 32px; Figma masters 2058:2141–2145 */\n  --calendar-day-min-touch: 2rem;\n  /* semantic/text/primary (VariableID:2002:2462), resolved in the audited\n     Figma Light mode. Scoped here because the shared foundation currently\n     resolves differently and is outside this component correction. */\n  --calendar-day-text: #17181b;\n  --calendar-day-muted-text: var(--semantic-text-secondary);\n  --calendar-day-hover-surface: var(--semantic-surface-elevated);\n  --calendar-day-selected-surface: var(--semantic-action-primary);\n  --calendar-day-selected-hover-surface: var(--semantic-action-primary-hover);\n  /* [VERIFIED] component/surface/content participant, confirmed 2026-08-11\n     (component set 2058:2146, Selected 2058:2143) — resting Selected state\n     only. Selected:hover is code-only/unverified and stays untouched. */\n  --calendar-day-selected-text: var(--component-surface-content, var(--semantic-text-inverse));\n  --calendar-day-today-indicator: var(--semantic-action-primary);\n  /* semantic/text/disabled (VariableID:2002:2464), resolved in the audited\n     Figma Light mode; scoped for the same foundation-drift reason above. */\n  --calendar-day-disabled-text: #a0a3ac;\n  --calendar-day-radius: var(--radius-full, 9999px);\n  /* Range and preview states have no live Figma masters. Preserve their\n     pre-audit geometry and Shape behavior independently of verified days. */\n  --calendar-day-code-only-size: 2.5rem;\n  --calendar-day-code-only-min-touch: 2.5rem;\n  --calendar-day-code-only-radius: var(--shape-radius-control);\n  --calendar-day-range-middle-surface: color-mix(in srgb, var(--calendar-day-selected-surface) 16%, transparent);\n  --calendar-day-range-middle-hover-surface: color-mix(in srgb, var(--calendar-day-selected-surface) 24%, transparent);\n  --calendar-day-range-preview-surface: color-mix(in srgb, var(--calendar-day-selected-surface) 8%, transparent);\n  --calendar-day-range-preview-hover-surface: color-mix(in srgb, var(--calendar-day-selected-surface) 14%, transparent);\n  --calendar-day-range-preview-border: color-mix(in srgb, var(--calendar-day-selected-surface) 50%, transparent);\n\n  /* ── Calendar Grid geometry [TEMPORARY] ── */\n  --calendar-grid-width: 18.5rem;\n  --calendar-grid-padding: 0.75rem;\n  --calendar-grid-week-gap: 0.375rem;\n  --calendar-grid-day-gap: 0.125rem;\n  --calendar-grid-header-gap: 0.5rem;\n  --calendar-grid-weekday-text: var(--semantic-text-secondary);\n  --calendar-grid-month-text: var(--semantic-text-primary);\n  --calendar-grid-surface: var(--semantic-surface-default);\n  --calendar-grid-border: var(--semantic-border-default);\n  --calendar-grid-radius: var(--shape-radius-container);\n\n  /* ── Date Picker geometry [TEMPORARY] ── */\n  --date-picker-trigger-icon-size: 2rem;\n}\n\n/* ── Shape modes ── */\n/* Foundation tier — see the \"Foundation boundary\" note near --opacity-disabled above. */\n[data-skrewww-shape=\"sharp\"] {\n  --shape-radius-control: 0px; /* [VERIFIED] Sharp mode intent */\n  --shape-radius-container: 0px; /* [VERIFIED] Sharp mode intent */\n  --component-button-radius-control: 0px;\n  --pagination-page-radius: 0px;\n}\n\n[data-skrewww-shape=\"rounded\"] {\n  --shape-radius-control: 6px; /* [TEMPORARY] */\n  --shape-radius-container: 12px; /* [TEMPORARY] */\n  --component-button-radius-control: 4px; /* [VERIFIED] Button master */\n  --pagination-page-radius: 4px;\n}\n\n[data-skrewww-shape=\"pill\"] {\n  --shape-radius-control: 9999px; /* [VERIFIED] Pill control intent */\n  /* [EXPERIMENTAL] Container stays capped — full pill geometry is inappropriate for Card */\n  --shape-radius-container: 16px; /* [TEMPORARY] capped container radius for Card */\n  --component-button-radius-control: 9999px;\n  --pagination-page-radius: 9999px;\n}\n\n[data-skrewww-shape=\"squircle\"] {\n  --shape-radius-control: 8px; /* [VERIFIED] Squircle control intent */\n  --shape-radius-container: 16px; /* [VERIFIED] Squircle container intent */\n  --component-button-radius-control: 8px;\n  --pagination-page-radius: 8px;\n\n  /*\n   * Real superellipse corner geometry, not an approximated border-radius.\n   * CSS corner-shape: superellipse() (the native, spec-track way to do\n   * this) is Chromium-only as of mid-2026 with no Safari/Firefox timeline,\n   * so it isn't a viable primary technique for this project yet. This\n   * clip-path polygon is the standard, production-common fallback: an\n   * authored approximation of the same curve, working identically in every\n   * browser that supports clip-path: polygon() (effectively all of them).\n   *\n   * Math: a superellipse corner satisfies |u|^(2K) + |v|^(2K) = 1 in the\n   * corner's local, radius-normalized coordinates (K=2 is the \"iOS-style\n   * squircle\" the corner-shape spec itself names as superellipse(2)).\n   * Solving parametrically: u(t) = (cos t)^(1/K), v(t) = (sin t)^(1/K) for\n   * t in [0, pi/2] satisfies that equation for any K, and converts to box\n   * coordinates as x(t) = R*(1-u(t)), y(t) = R*(1-v(t)) — the endpoints\n   * (0,R) and (R,0) match a circular border-radius exactly (same tangent\n   * points), only the curve in between differs: flatter near the straight\n   * edges, curving more sharply right at the corner. 9 sampled points per\n   * corner (36 total for all four) is enough for the curve to read as\n   * genuinely smooth at UI scale. Generated with K=2, N=8.\n   *\n   * Each radius variable is baked directly into its own token, rather than\n   * parametrized on a generic placeholder consumers set locally. A custom\n   * property's var() references resolve against the cascade at the\n   * ELEMENT WHERE IT'S DECLARED, not lazily per-descendant at point of\n   * use — a generic --squircle-r referenced here but only ever set later\n   * on .button/.card/etc computes as guaranteed-invalid right here (since\n   * --squircle-r doesn't exist at this element), and that invalid value is\n   * what inherits down, regardless of what a descendant sets --squircle-r\n   * to. Confirmed with a minimal reproduction before settling on this\n   * fix — the generic version reliably produced `clip-path: none`\n   * everywhere. Baking in --shape-radius-control/--shape-radius-container\n   * directly works because both ARE already defined on this same\n   * selector, so the substitution succeeds where it's declared.\n   */\n  --squircle-clip-path-control: polygon(\n      0px var(--shape-radius-control),\n      calc(var(--shape-radius-control) * 0.0097) calc(var(--shape-radius-control) * 0.5583),\n      calc(var(--shape-radius-control) * 0.0388) calc(var(--shape-radius-control) * 0.3814),\n      calc(var(--shape-radius-control) * 0.0882) calc(var(--shape-radius-control) * 0.2546),\n      calc(var(--shape-radius-control) * 0.1591) calc(var(--shape-radius-control) * 0.1591),\n      calc(var(--shape-radius-control) * 0.2546) calc(var(--shape-radius-control) * 0.0882),\n      calc(var(--shape-radius-control) * 0.3814) calc(var(--shape-radius-control) * 0.0388),\n      calc(var(--shape-radius-control) * 0.5583) calc(var(--shape-radius-control) * 0.0097),\n      calc(var(--shape-radius-control) * 1) 0px,\n      calc(100% - var(--shape-radius-control) * 1) 0px,\n      calc(100% - var(--shape-radius-control) * 0.5583) calc(var(--shape-radius-control) * 0.0097),\n      calc(100% - var(--shape-radius-control) * 0.3814) calc(var(--shape-radius-control) * 0.0388),\n      calc(100% - var(--shape-radius-control) * 0.2546) calc(var(--shape-radius-control) * 0.0882),\n      calc(100% - var(--shape-radius-control) * 0.1591) calc(var(--shape-radius-control) * 0.1591),\n      calc(100% - var(--shape-radius-control) * 0.0882) calc(var(--shape-radius-control) * 0.2546),\n      calc(100% - var(--shape-radius-control) * 0.0388) calc(var(--shape-radius-control) * 0.3814),\n      calc(100% - var(--shape-radius-control) * 0.0097) calc(var(--shape-radius-control) * 0.5583),\n      100% var(--shape-radius-control),\n      100% calc(100% - var(--shape-radius-control)),\n      calc(100% - var(--shape-radius-control) * 0.0097) calc(100% - var(--shape-radius-control) * 0.5583),\n      calc(100% - var(--shape-radius-control) * 0.0388) calc(100% - var(--shape-radius-control) * 0.3814),\n      calc(100% - var(--shape-radius-control) * 0.0882) calc(100% - var(--shape-radius-control) * 0.2546),\n      calc(100% - var(--shape-radius-control) * 0.1591) calc(100% - var(--shape-radius-control) * 0.1591),\n      calc(100% - var(--shape-radius-control) * 0.2546) calc(100% - var(--shape-radius-control) * 0.0882),\n      calc(100% - var(--shape-radius-control) * 0.3814) calc(100% - var(--shape-radius-control) * 0.0388),\n      calc(100% - var(--shape-radius-control) * 0.5583) calc(100% - var(--shape-radius-control) * 0.0097),\n      calc(100% - var(--shape-radius-control) * 1) 100%,\n      calc(var(--shape-radius-control) * 1) 100%,\n      calc(var(--shape-radius-control) * 0.5583) calc(100% - var(--shape-radius-control) * 0.0097),\n      calc(var(--shape-radius-control) * 0.3814) calc(100% - var(--shape-radius-control) * 0.0388),\n      calc(var(--shape-radius-control) * 0.2546) calc(100% - var(--shape-radius-control) * 0.0882),\n      calc(var(--shape-radius-control) * 0.1591) calc(100% - var(--shape-radius-control) * 0.1591),\n      calc(var(--shape-radius-control) * 0.0882) calc(100% - var(--shape-radius-control) * 0.2546),\n      calc(var(--shape-radius-control) * 0.0388) calc(100% - var(--shape-radius-control) * 0.3814),\n      calc(var(--shape-radius-control) * 0.0097) calc(100% - var(--shape-radius-control) * 0.5583),\n      0px calc(100% - var(--shape-radius-control))\n    );\n\n  --squircle-clip-path-container: polygon(\n      0px var(--shape-radius-container),\n      calc(var(--shape-radius-container) * 0.0097) calc(var(--shape-radius-container) * 0.5583),\n      calc(var(--shape-radius-container) * 0.0388) calc(var(--shape-radius-container) * 0.3814),\n      calc(var(--shape-radius-container) * 0.0882) calc(var(--shape-radius-container) * 0.2546),\n      calc(var(--shape-radius-container) * 0.1591) calc(var(--shape-radius-container) * 0.1591),\n      calc(var(--shape-radius-container) * 0.2546) calc(var(--shape-radius-container) * 0.0882),\n      calc(var(--shape-radius-container) * 0.3814) calc(var(--shape-radius-container) * 0.0388),\n      calc(var(--shape-radius-container) * 0.5583) calc(var(--shape-radius-container) * 0.0097),\n      calc(var(--shape-radius-container) * 1) 0px,\n      calc(100% - var(--shape-radius-container) * 1) 0px,\n      calc(100% - var(--shape-radius-container) * 0.5583) calc(var(--shape-radius-container) * 0.0097),\n      calc(100% - var(--shape-radius-container) * 0.3814) calc(var(--shape-radius-container) * 0.0388),\n      calc(100% - var(--shape-radius-container) * 0.2546) calc(var(--shape-radius-container) * 0.0882),\n      calc(100% - var(--shape-radius-container) * 0.1591) calc(var(--shape-radius-container) * 0.1591),\n      calc(100% - var(--shape-radius-container) * 0.0882) calc(var(--shape-radius-container) * 0.2546),\n      calc(100% - var(--shape-radius-container) * 0.0388) calc(var(--shape-radius-container) * 0.3814),\n      calc(100% - var(--shape-radius-container) * 0.0097) calc(var(--shape-radius-container) * 0.5583),\n      100% var(--shape-radius-container),\n      100% calc(100% - var(--shape-radius-container)),\n      calc(100% - var(--shape-radius-container) * 0.0097) calc(100% - var(--shape-radius-container) * 0.5583),\n      calc(100% - var(--shape-radius-container) * 0.0388) calc(100% - var(--shape-radius-container) * 0.3814),\n      calc(100% - var(--shape-radius-container) * 0.0882) calc(100% - var(--shape-radius-container) * 0.2546),\n      calc(100% - var(--shape-radius-container) * 0.1591) calc(100% - var(--shape-radius-container) * 0.1591),\n      calc(100% - var(--shape-radius-container) * 0.2546) calc(100% - var(--shape-radius-container) * 0.0882),\n      calc(100% - var(--shape-radius-container) * 0.3814) calc(100% - var(--shape-radius-container) * 0.0388),\n      calc(100% - var(--shape-radius-container) * 0.5583) calc(100% - var(--shape-radius-container) * 0.0097),\n      calc(100% - var(--shape-radius-container) * 1) 100%,\n      calc(var(--shape-radius-container) * 1) 100%,\n      calc(var(--shape-radius-container) * 0.5583) calc(100% - var(--shape-radius-container) * 0.0097),\n      calc(var(--shape-radius-container) * 0.3814) calc(100% - var(--shape-radius-container) * 0.0388),\n      calc(var(--shape-radius-container) * 0.2546) calc(100% - var(--shape-radius-container) * 0.0882),\n      calc(var(--shape-radius-container) * 0.1591) calc(100% - var(--shape-radius-container) * 0.1591),\n      calc(var(--shape-radius-container) * 0.0882) calc(100% - var(--shape-radius-container) * 0.2546),\n      calc(var(--shape-radius-container) * 0.0388) calc(100% - var(--shape-radius-container) * 0.3814),\n      calc(var(--shape-radius-container) * 0.0097) calc(100% - var(--shape-radius-container) * 0.5583),\n      0px calc(100% - var(--shape-radius-container))\n    );\n\n  /*\n   * Same curve, applied to the right two corners only (top-right,\n   * bottom-right) with the left two left sharp — for shapes with an\n   * asymmetric radius today (e.g. Drawer's left-placement panel, which is\n   * flush with the viewport edge on its left side).\n   */\n  --squircle-clip-path-container-right: polygon(\n      0px 0px,\n      calc(100% - var(--shape-radius-container) * 1) 0px,\n      calc(100% - var(--shape-radius-container) * 0.5583) calc(var(--shape-radius-container) * 0.0097),\n      calc(100% - var(--shape-radius-container) * 0.3814) calc(var(--shape-radius-container) * 0.0388),\n      calc(100% - var(--shape-radius-container) * 0.2546) calc(var(--shape-radius-container) * 0.0882),\n      calc(100% - var(--shape-radius-container) * 0.1591) calc(var(--shape-radius-container) * 0.1591),\n      calc(100% - var(--shape-radius-container) * 0.0882) calc(var(--shape-radius-container) * 0.2546),\n      calc(100% - var(--shape-radius-container) * 0.0388) calc(var(--shape-radius-container) * 0.3814),\n      calc(100% - var(--shape-radius-container) * 0.0097) calc(var(--shape-radius-container) * 0.5583),\n      100% var(--shape-radius-container),\n      100% calc(100% - var(--shape-radius-container)),\n      calc(100% - var(--shape-radius-container) * 0.0097) calc(100% - var(--shape-radius-container) * 0.5583),\n      calc(100% - var(--shape-radius-container) * 0.0388) calc(100% - var(--shape-radius-container) * 0.3814),\n      calc(100% - var(--shape-radius-container) * 0.0882) calc(100% - var(--shape-radius-container) * 0.2546),\n      calc(100% - var(--shape-radius-container) * 0.1591) calc(100% - var(--shape-radius-container) * 0.1591),\n      calc(100% - var(--shape-radius-container) * 0.2546) calc(100% - var(--shape-radius-container) * 0.0882),\n      calc(100% - var(--shape-radius-container) * 0.3814) calc(100% - var(--shape-radius-container) * 0.0388),\n      calc(100% - var(--shape-radius-container) * 0.5583) calc(100% - var(--shape-radius-container) * 0.0097),\n      calc(100% - var(--shape-radius-container) * 1) 100%,\n      0px 100%\n    );\n\n  /* Checkbox clamps its radius to preserve its square-ish affordance at\n     16px — reuses the same clamp expression here so the curve never\n     exceeds what border-radius already limits it to. */\n  --squircle-clip-path-checkbox: polygon(\n      0px min(var(--shape-radius-control), var(--control-checkbox-radius-max)),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0097) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.5583),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0388) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.3814),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0882) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.2546),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.1591) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.1591),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.2546) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0882),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.3814) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0388),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.5583) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0097),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 1) 0px,\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 1) 0px,\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.5583) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0097),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.3814) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0388),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.2546) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0882),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.1591) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.1591),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0882) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.2546),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0388) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.3814),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0097) calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.5583),\n      100% min(var(--shape-radius-control), var(--control-checkbox-radius-max)),\n      100% calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max))),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0097) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.5583),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0388) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.3814),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0882) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.2546),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.1591) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.1591),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.2546) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0882),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.3814) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0388),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.5583) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0097),\n      calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 1) 100%,\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 1) 100%,\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.5583) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0097),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.3814) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0388),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.2546) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0882),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.1591) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.1591),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0882) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.2546),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0388) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.3814),\n      calc(min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.0097) calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)) * 0.5583),\n      0px calc(100% - min(var(--shape-radius-control), var(--control-checkbox-radius-max)))\n    );\n}\n\n/* ── Surface modes ── */\n/* Foundation tier — see the \"Foundation boundary\" note near --opacity-disabled above. */\n[data-skrewww-surface=\"flat\"] {\n  --surface-fill-default: var(--semantic-surface-default);\n  --surface-fill-control: var(--semantic-surface-default);\n  --component-surface-gradient-overlay-start: transparent;\n  --component-surface-gradient-overlay-end: transparent;\n  --component-surface-gradient-overlay: none;\n}\n\n[data-skrewww-surface=\"gradient\"] {\n  --surface-fill-default: var(--semantic-surface-default);\n  --surface-fill-control: var(--semantic-surface-default);\n  --component-surface-gradient-overlay-start: #ffffff14;\n  --component-surface-gradient-overlay-end: #0000000a;\n  --component-surface-gradient-overlay: linear-gradient(\n    90deg,\n    var(--component-surface-gradient-overlay-start) 0%,\n    var(--component-surface-gradient-overlay-end) 100%\n  );\n}\n\n[data-skrewww-surface=\"glass\"] {\n  --component-surface-gradient-overlay-start: transparent;\n  --component-surface-gradient-overlay-end: transparent;\n  --component-surface-gradient-overlay: none;\n  --surface-fill-default: rgb(255 255 255 / 0.72);\n  --surface-fill-control: rgb(255 255 255 / 0.85);\n  --component-card-surface: rgb(255 255 255 / 0.12);\n  --component-card-border: rgb(255 255 255 / 0.24);\n  --component-card-border-highlight-1: rgb(255 255 255 / 0.8);\n  --component-card-border-highlight-2: rgb(223 224 228 / 0.5);\n  --component-card-border-highlight-3: rgb(223 224 228 / 0.15);\n  --component-surface-content-muted: var(--semantic-text-primary);\n  --component-list-item-supporting-text: var(--semantic-text-primary);\n  /* component/menu/panel-surface → surface/fill Glass white @ 12% */\n  --menu-surface: rgb(255 255 255 / 0.12);\n  /* component/menu/panel-border → surface/border Glass white @ 24% */\n  --menu-border: rgb(255 255 255 / 0.24);\n  /* Figma Menu Panel: BACKGROUND_BLUR only — no drop shadow */\n  --menu-elevation: none;\n  --menu-item-hover-surface: rgb(255 255 255 / 0.2);\n  --file-upload-dragging-surface: rgb(255 255 255 / 0.2);\n  --feedback-info-surface: rgb(220 238 254 / 0.45);\n  --feedback-success-surface: rgb(223 245 230 / 0.45);\n  --feedback-warning-surface: rgb(254 243 214 / 0.45);\n  --feedback-error-surface: rgb(253 226 225 / 0.45);\n  --component-button-primary-border-start: rgb(255 255 255 / 0.8);\n  --component-button-primary-border-mid: rgb(108 76 242 / 0.6);\n  --component-button-primary-border-end: rgb(108 76 242 / 0.15);\n  --component-button-danger-border-start: rgb(255 255 255 / 0.8);\n  --component-button-danger-border-mid: rgb(229 72 77 / 0.6);\n  --component-button-danger-border-end: rgb(229 72 77 / 0.15);\n\n  /*\n   * Shared blur/opacity tokens for every Glass-mode component — previously\n   * each of the 9 components with a real backdrop-filter treatment\n   * (Dialog, Popover, Accordion, Badge, Calendar Grid, Tabs, Pagination,\n   * Tooltip, Drawer) hardcoded its own blur radius independently (8px,\n   * 10px, or 12px) with no shared source of truth. Two tiers, matched to\n   * component scale: \"sm\" for compact inline controls and chips, \"md\" for\n   * larger panels/containers. Tooltip's blur moves from its previous\n   * one-off 10px to the sm tier's 8px, and its color-mix from 92% to the\n   * sm tier's 88%, for the same reason — consolidating a third arbitrary\n   * value that wasn't actually justified by anything about Tooltip's size\n   * relative to Badge/Tabs/Pagination.\n   */\n  --glass-blur-sm: 8px;\n  --glass-blur-md: 12px;\n  --glass-mix-sm: 88%;\n  --glass-mix-md: 92%;\n  /* Fallback mix percentages, used only when backdrop-filter isn't\n     supported (see the @supports block below) — a few points more opaque\n     so the surface reads as intentionally solid rather than just \"the\n     blur silently didn't happen.\" */\n  --glass-mix-sm-fallback: 94%;\n  --glass-mix-md-fallback: 97%;\n\n  /*\n   * Referenced unconditionally by components (backdrop-filter: var(...,\n   * none)) the same way --squircle-clip-path is — undefined, and so `none`,\n   * outside Glass mode; a real blur() inside it.\n   */\n  --glass-backdrop-filter-sm: blur(var(--glass-blur-sm));\n  --glass-backdrop-filter-md: blur(var(--glass-blur-md));\n\n  /*\n   * [VERIFIED] component/surface/blur — a third tier, confirmed 2026-08-11\n   * via master-component inspection (Button, Avatar, Calendar Day Selected,\n   * Page Item Current all resolve to 16px in Glass, 0 in Flat/Gradient).\n   * Distinct from the sm/md tiers above: this is specifically for solid\n   * brand/danger-family fills (Button Primary/Danger, Avatar, Calendar Day\n   * Selected, Pagination Current), not the neutral surface-fill cascade.\n   */\n  --glass-blur-lg: 16px;\n  --glass-backdrop-filter-lg: blur(var(--glass-blur-lg));\n  --component-surface-backdrop-filter: var(--glass-backdrop-filter-lg);\n  /* component/surface/blur Glass → 16px — after lg tokens so var() resolves */\n  --menu-backdrop-filter: var(--glass-backdrop-filter-lg);\n\n  /*\n   * [VERIFIED] Shared brand/danger-family Glass fills and content color,\n   * confirmed 2026-08-11 via master-component inspection. Deliberately two\n   * separate fill tokens (never one shared name) so Primary and Danger's\n   * semantic distinction stays visible in the architecture even though\n   * each is only ever a single family's color — per\n   * component/button/primary/background and component/button/danger/\n   * background respectively. Named component-scoped rather than\n   * button-scoped: Avatar, Calendar Day Selected, and Pagination Current\n   * all reuse --component-brand-fill-glass too, and none of them should\n   * carry a literal dependency on \"Button\" in their token name.\n   *\n   * component/button/primary/background — Glass: #6C4CF22E / 18% alpha.\n   * color-mix toward transparent (not white) — a tinted glass fill that\n   * keeps the brand hue, not a lightened/whitened one.\n   */\n  --component-brand-fill-glass: color-mix(in srgb, var(--semantic-action-primary) 18%, transparent);\n  --component-button-primary-fill-hover-glass: rgb(86 56 214 / 0.24);\n  --component-button-primary-fill-pressed-glass: rgb(66 41 173 / 0.3);\n  --component-button-secondary-fill-glass: rgb(255 255 255 / 0.12);\n  --component-button-secondary-fill-elevated-glass: rgb(255 255 255 / 0.2);\n  /* component/button/danger/background — Glass: #E5484D94 / 58% alpha. */\n  --component-danger-fill-glass: color-mix(in srgb, var(--component-danger-fill) 58%, transparent);\n  --component-danger-fill-hover-glass: color-mix(\n    in srgb,\n    var(--component-danger-fill-hover) 64%,\n    transparent\n  );\n  --component-danger-fill-pressed-glass: color-mix(\n    in srgb,\n    var(--component-danger-fill-pressed) 70%,\n    transparent\n  );\n\n  /*\n   * component/surface/content — Glass only; undefined outside Glass on\n   * purpose, so every call site uses var(--component-surface-content,\n   * var(--semantic-text-inverse)) and gets the correct white content in\n   * Flat/Gradient automatically, with zero Flat/Gradient-scoped rules\n   * needed anywhere. Confirmed distinct from --semantic-text-primary\n   * (#17181B) — this is Figma's own dedicated Glass-content value, not\n   * a reuse of the existing dark-text token.\n   */\n  --component-surface-content: #17181b;\n}\n\n/*\n * backdrop-filter isn't universally supported (no Safari/Firefox timeline\n * concerns here specifically, but older browser versions and some\n * embedded/webview contexts still lack it). Previously there was no\n * fallback at all — an unsupported browser would silently render the\n * translucent-but-unblurred background with no compensation, which reads\n * as \"broken\" over a busy background rather than intentional. Bumping the\n * base surface tokens' opacity here covers Card/Button/Checkbox/Radio/\n * TextInput automatically; the 9 components with their own color-mix\n * expression each have a matching override in their own file referencing\n * --glass-mix-*-fallback.\n */\n@supports not (backdrop-filter: blur(1px)) {\n  [data-skrewww-surface=\"glass\"] {\n    --surface-fill-default: rgb(255 255 255 / 0.92);\n    --surface-fill-control: rgb(255 255 255 / 0.97);\n    --component-card-surface: rgb(255 255 255 / 0.92);\n    --menu-surface: rgb(255 255 255 / 0.92);\n    --menu-backdrop-filter: none;\n  }\n}\n\n@media (prefers-reduced-transparency: reduce) {\n  [data-skrewww-surface=\"glass\"] {\n    /* Safe opaque fallback when transparency is reduced */\n    --surface-fill-default: var(--semantic-surface-default);\n    --surface-fill-control: var(--semantic-surface-default);\n    --component-card-surface: var(--semantic-surface-default);\n    --component-card-border: var(--semantic-border-default);\n    --component-card-border-highlight-1: var(--semantic-border-default);\n    --component-card-border-highlight-2: var(--semantic-border-default);\n    --component-card-border-highlight-3: var(--semantic-border-default);\n    --component-surface-content-muted: var(--semantic-icon-muted);\n    --menu-surface: var(--semantic-surface-default);\n    --menu-border: var(--semantic-border-default);\n    --menu-elevation: none;\n    --menu-backdrop-filter: none;\n    --menu-item-hover-surface: var(--semantic-surface-elevated);\n    --file-upload-dragging-surface: var(--semantic-surface-elevated);\n    --component-surface-backdrop-filter: none;\n    /* Same treatment for the brand/danger-family Glass fills — reuse the\n       already-approved solid Flat values rather than a lower opacity, so\n       nothing new is invented for this accessibility path. */\n    --component-brand-fill-glass: var(--semantic-action-primary);\n    --component-danger-fill-glass: var(--component-danger-fill);\n    --component-danger-fill-hover-glass: var(--component-danger-fill-hover);\n    --component-danger-fill-pressed-glass: var(--component-danger-fill-pressed);\n  }\n}\n\n/**\n * Skrewww Foundation — shared accessibility utilities.\n *\n * Distinct from styles/tokens.css (CSS custom properties: Primitive,\n * Semantic, Brand, Shape, Surface, control-sizing tiers). This file holds\n * plain CSS classes that are part of the same universal Foundation tier —\n * needed by many components, owned by no single one, and previously living\n * only inside the docs application's own app/globals.css, which made their\n * correctness depend on this being a Next.js site rather than being a\n * portable Skrewww resource. A fresh external project consuming a\n * distributed Skrewww component (e.g. @skrewww/button) needs this file\n * too, the same way it needs styles/tokens.css.\n *\n * Do not duplicate .sr-only into individual component CSS Modules — every\n * component that needs visually-hidden-but-accessible text (Button,\n * Badge, Spinner, FormField, Dialog, and others) references this one,\n * global, unscoped class by name.\n */\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n",
      "type": "registry:file",
      "target": "~/styles/skrewww-foundation.css"
    }
  ]
}