@sanity/runtime-cli 15.0.5 → 15.1.1

package/dist/server/static/components/app.css

@@ -18,26 +18,6 @@
    1.  SETUP & BASE
    2.  RAW COLOR PALETTE
    3.  SEMANTIC COLORS (LIGHT & DARK MODE)
-        - Brand / Primary
-        - Feedback (Positive, Caution, Critical)
-        - Neutral / Base UI
-        - Focus Ring
-        - Shadows (Colors Only)
-   4.  TYPOGRAPHY
-        - Font Families
-        - Font Weights
-        - Font Sizes (Numerical Scale)
-        - Line Heights (Numerical Scale)
-        - Letter Spacing (Numerical Scale)
-   5.  SPACING & SIZING
-        - Spacing (Numerical Scale)
-        - Border Radius (Numerical Scale)
-        - Container Widths (Numerical Scale)
-   6.  SHADOWS (COMPUTED)
-        - Shadow Components (Numerical Offsets/Blur/Spread)
-        - Box Shadows (Numerical Scale)
-   7.  TRANSITIONS
-   8.  LAYOUT & Z-INDEX
    -------------------------------------------------------------------------- */
 
 /* ==========================================================================
@@ -59,7 +39,7 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: var(--font-family-sans);
+  font-family: var(--sans);
 
   /* Gutter Gradient Variables */
 }
@@ -68,121 +48,11 @@
    2. RAW COLOR PALETTE
    ==========================================================================
 
-   The base HSL palette values.
-   Naming: --<hue>-<value>
+   Provided by @sanity-labs/design-tokens via ./vendor/design-tokens/index.css
+   (linked in index.html before this file). Variables: --black, --white,
+   --<hue>-<50..950> for blue, cyan, gray, green, magenta, orange, purple,
+   red, yellow.
 */
-:root {
-  --black: hsl(0, 0%, 0%);
-  --white: hsl(0, 0%, 100%);
-
-  --gray-50: hsl(240deg, 12%, 97%);
-  --gray-100: hsl(240deg, 10%, 94%);
-  --gray-200: hsl(231deg, 10%, 90%);
-  --gray-300: hsl(232deg, 11%, 76%);
-  --gray-400: hsl(228deg, 13%, 63%);
-  --gray-500: hsl(229deg, 13%, 51%);
-  --gray-600: hsl(228deg, 16%, 38%);
-  --gray-700: hsl(229deg, 18%, 27%);
-  --gray-800: hsl(229deg, 19%, 18%);
-  --gray-900: hsl(228deg, 19%, 13%);
-  --gray-950: hsl(233deg, 17%, 9%);
-
-  --blue-50: hsl(222deg, 100%, 98%);
-  --blue-100: hsl(222deg, 100%, 95%);
-  --blue-200: hsl(223deg, 100%, 93%);
-  --blue-300: hsl(224deg, 100%, 83%);
-  --blue-400: hsl(226deg, 100%, 73%);
-  --blue-500: hsl(232deg, 96%, 66%);
-  --blue-600: hsl(239deg, 78%, 58%);
-  --blue-700: hsl(241deg, 63%, 41%);
-  --blue-800: hsl(230deg, 55%, 22%);
-  --blue-900: hsl(234deg, 49%, 17%);
-  --blue-950: hsl(235deg, 43%, 11%);
-
-  --purple-50: hsl(260deg, 95%, 98%);
-  --purple-100: hsl(260deg, 98%, 96%);
-  --purple-200: hsl(263deg, 96%, 94%);
-  --purple-300: hsl(262deg, 92%, 84%);
-  --purple-400: hsl(262deg, 88%, 75%);
-  --purple-500: hsl(262deg, 83%, 64%);
-  --purple-600: hsl(265deg, 79%, 51%);
-  --purple-700: hsl(263deg, 72%, 36%);
-  --purple-800: hsl(258deg, 60%, 24%);
-  --purple-900: hsl(257deg, 46%, 17%);
-  --purple-950: hsl(260deg, 41%, 11%);
-
-  --magenta-50: hsl(340deg, 82%, 98%);
-  --magenta-100: hsl(339deg, 83%, 95%);
-  --magenta-200: hsl(339deg, 83%, 93%);
-  --magenta-300: hsl(340deg, 82%, 82%);
-  --magenta-400: hsl(340deg, 81%, 69%);
-  --magenta-500: hsl(340deg, 80%, 53%);
-  --magenta-600: hsl(337deg, 78%, 39%);
-  --magenta-700: hsl(333deg, 73%, 28%);
-  --magenta-800: hsl(328deg, 63%, 18%);
-  --magenta-900: hsl(327deg, 46%, 14%);
-  --magenta-950: hsl(341deg, 35%, 9%);
-
-  --red-50: hsl(5deg, 100%, 98%);
-  --red-100: hsl(4deg, 100%, 95%);
-  --red-200: hsl(4deg, 98%, 93%);
-  --red-300: hsl(5deg, 95%, 82%);
-  --red-400: hsl(6deg, 90%, 69%);
-  --red-500: hsl(5deg, 85%, 57%);
-  --red-600: hsl(5deg, 78%, 45%);
-  --red-700: hsl(4deg, 70%, 32%);
-  --red-800: hsl(3deg, 58%, 19%);
-  --red-900: hsl(2deg, 41%, 14%);
-  --red-950: hsl(356deg, 30%, 9%);
-
-  --orange-50: hsl(28deg, 100%, 97%);
-  --orange-100: hsl(25deg, 100%, 93%);
-  --orange-200: hsl(24deg, 100%, 89%);
-  --orange-300: hsl(24deg, 100%, 76%);
-  --orange-400: hsl(24deg, 100%, 63%);
-  --orange-500: hsl(24deg, 100%, 49%);
-  --orange-600: hsl(24deg, 98%, 35%);
-  --orange-700: hsl(24deg, 94%, 25%);
-  --orange-800: hsl(22deg, 82%, 15%);
-  --orange-900: hsl(17deg, 65%, 12%);
-  --orange-950: hsl(14deg, 43%, 9%);
-
-  --yellow-50: hsl(51deg, 94%, 94%);
-  --yellow-100: hsl(52deg, 91%, 86%);
-  --yellow-200: hsl(50deg, 90%, 78%);
-  --yellow-300: hsl(47deg, 91%, 65%);
-  --yellow-400: hsl(44deg, 95%, 53%);
-  --yellow-500: hsl(39deg, 96%, 42%);
-  --yellow-600: hsl(34deg, 90%, 31%);
-  --yellow-700: hsl(31deg, 80%, 22%);
-  --yellow-800: hsl(28deg, 66%, 14%);
-  --yellow-900: hsl(24deg, 40%, 11%);
-  --yellow-950: hsl(24deg, 20%, 8%);
-
-  --green-50: hsl(157deg, 89%, 95%);
-  --green-100: hsl(158deg, 89%, 88%);
-  --green-200: hsl(158deg, 87%, 82%);
-  --green-300: hsl(158deg, 86%, 65%);
-  --green-400: hsl(159deg, 88%, 50%);
-  --green-500: hsl(159deg, 96%, 37%);
-  --green-600: hsl(159deg, 98%, 24%);
-  --green-700: hsl(158deg, 98%, 16%);
-  --green-800: hsl(158deg, 91%, 10%);
-  --green-900: hsl(162deg, 72%, 8%);
-  --green-950: hsl(172deg, 51%, 6%);
-
-  --cyan-50: hsl(180deg, 92%, 95%);
-  --cyan-100: hsl(180deg, 91%, 88%);
-  --cyan-200: hsl(180deg, 87%, 78%);
-  --cyan-300: hsl(180deg, 81%, 66%);
-  --cyan-400: hsl(180deg, 81%, 49%);
-  --cyan-500: hsl(182deg, 96%, 38%);
-  --cyan-600: hsl(185deg, 96%, 26%);
-  --cyan-700: hsl(185deg, 95%, 16%);
-  --cyan-800: hsl(187deg, 86%, 11%);
-  --cyan-900: hsl(188deg, 68%, 9%);
-  --cyan-950: hsl(196deg, 37%, 8%);
-}
 
 /* ==========================================================================
    3. SEMANTIC COLORS (LIGHT & DARK MODE)
@@ -195,438 +65,27 @@
 */
 
 :root {
-  /* ---------------------------------- */
-  /* Semantic Colors: LIGHT MODE        */
-  /* ---------------------------------- */
-
-  /* --- Brand / Primary --- */
-  --color-brand-primary-fg: var(--blue-600);
-  --color-brand-primary-bg-strong: var(--blue-600);
-  --color-brand-primary-bg-med: var(--blue-100);
-  --color-brand-primary-bg-light: var(--blue-50);
-  --color-brand-primary-border: var(--blue-300);
-
-  /* --- Feedback: Positive (Green) --- */
-  --color-feedback-positive-fg: var(--green-700);
-  --color-feedback-positive-bg-strong: var(--green-500);
-  --color-feedback-positive-bg-med: var(--green-100);
-  --color-feedback-positive-bg-light: var(--green-50);
-  --color-feedback-positive-border: var(--green-300);
-
-  /* --- Feedback: Caution (Yellow/Orange) --- */
-  --color-feedback-caution-fg: var(--yellow-700);
-  --color-feedback-caution-bg-strong: var(--yellow-500);
-  --color-feedback-caution-bg-med: var(--yellow-100);
-  --color-feedback-caution-bg-light: var(--yellow-50);
-  --color-feedback-caution-border: var(--yellow-300);
-
-  /* --- Feedback: Critical (Red) --- */
-  --color-feedback-critical-fg: var(--red-600);
-  --color-feedback-critical-bg-strong: var(--red-600);
-  --color-feedback-critical-bg-med: var(--red-100);
-  --color-feedback-critical-bg-light: var(--red-50);
-  --color-feedback-critical-border: var(--red-300);
-
-  /* --- Neutral / Base UI --- */
-  /* Text */
-  --color-text-default: var(--gray-800);
-  --color-text-muted: var(--gray-600);
-  --color-text-on-contrast: var(--white); /* Text on dark/colored backgrounds */
-  --color-text-disabled: var(--gray-400);
-  --color-text-link: var(--blue-600);
-  --color-text-accent: var(--purple-600); /* Used for inline accents */
-
-  /* Surface (Backgrounds) */
-  --color-surface-default: var(--white); /* Base page/component background */
-  --color-surface-neutral: var(--gray-50); /* Slightly off-white */
-  --color-surface-subtle: var(--gray-100); /* Grouping subtle backgrounds */
-  --color-surface-strong: var(--gray-200); /* Grouping stronger backgrounds */
-  --color-surface-contrast: var(--gray-900); /* Dark background for contrast */
-  --color-surface-disabled: var(--gray-100);
-  --color-surface-backdrop: hsla(0, 0%, 0%, 0.5); /* Modal overlays etc */
-
-  /* Borders / Dividers */
+  /* Semantic Colors: LIGHT MODE */
+  --color-surface-subtle: var(--gray-100);
   --color-border-default: var(--gray-200);
-  --color-border-muted: var(--gray-100); /* Softer borders/dividers */
-  --color-border-strong: var(--gray-300);
-  --color-border-disabled: var(--gray-100);
-
-  /* Interactive States (Examples - Needs refinement based on components) */
-  /* These often combine surface/border/text colors based on component logic */
-  --color-interactive-primary-hover-bg: var(--blue-500);
-  --color-interactive-primary-active-bg: var(--blue-700);
-  --color-interactive-primary-resting-fg: var(--white);
-
-  --color-interactive-neutral-hover-bg: var(--gray-100);
-  --color-interactive-neutral-active-bg: var(--gray-200);
-
-  /* --- Focus Ring --- */
-  --color-focus-ring: var(--blue-500);
-
-  /* --- Shadows (Colors Only) --- */
-  /* These are combined with numerical offsets/blur later */
-  /* Using black with varying alpha for light mode shadows */
-  --color-shadow-umbra: hsla(0, 0%, 0%, 0.1);
-  --color-shadow-penumbra: hsla(0, 0%, 0%, 0.07);
-  --color-shadow-ambient: hsla(0, 0%, 0%, 0.06);
-  --color-shadow-outline: hsla(0, 0%, 0%, 0.15); /* Used for subtle outlines */
-}
-
-/* ---------------------------------- */
-/* Semantic Colors: DARK MODE         */
-/* ---------------------------------- */
+  --color-interactive-primary-active-bg: var(--blue-700); /* used by toggle-switch.js */
+}
+
+/* Semantic Colors: DARK MODE */
 @media (prefers-color-scheme: dark) {
   :root {
-    /* Override base colors */
     --base-color: var(--white);
-    --base-background-color: var(--gray-950); /* Or a dark gray like 950 */
-
-    /* --- Brand / Primary --- */
-    --color-brand-primary-fg: var(--blue-400);
-    --color-brand-primary-bg-strong: var(--blue-500);
-    --color-brand-primary-bg-med: var(--blue-900);
-    --color-brand-primary-bg-light: var(--blue-950);
-    --color-brand-primary-border: var(--blue-700);
-
-    /* --- Feedback: Positive --- */
-    --color-feedback-positive-fg: var(--green-400);
-    --color-feedback-positive-bg-strong: var(--green-500);
-    --color-feedback-positive-bg-med: var(--green-900);
-    --color-feedback-positive-bg-light: var(--green-950);
-    --color-feedback-positive-border: var(--green-700);
-
-    /* --- Feedback: Caution --- */
-    --color-feedback-caution-fg: var(--yellow-400);
-    --color-feedback-caution-bg-strong: var(--yellow-500);
-    --color-feedback-caution-bg-med: var(--yellow-900);
-    --color-feedback-caution-bg-light: var(--yellow-950);
-    --color-feedback-caution-border: var(--yellow-700);
-
-    /* --- Feedback: Critical --- */
-    --color-feedback-critical-fg: var(--red-400);
-    --color-feedback-critical-bg-strong: var(--red-500);
-    --color-feedback-critical-bg-med: var(--red-900);
-    --color-feedback-critical-bg-light: var(--red-950);
-    --color-feedback-critical-border: var(--red-700);
-
-    /* --- Neutral / Base UI --- */
-    /* Text */
-    --color-text-default: var(--gray-100);
-    --color-text-muted: var(--gray-400);
-    --color-text-on-contrast: var(--black); /* Text on light/colored backgrounds */
-    --color-text-disabled: var(--gray-600);
-    --color-text-link: var(--blue-400);
-    --color-text-accent: var(--purple-400);
-
-    /* Surface (Backgrounds) */
-    --color-surface-default: var(--gray-950); /* Darkest background */
-    --color-surface-neutral: var(--gray-900); /* Slightly lighter */
+    --base-background-color: var(--gray-950);
     --color-surface-subtle: var(--gray-800);
-    --color-surface-strong: var(--gray-700);
-    --color-surface-contrast: var(--gray-50); /* Light background for contrast */
-    --color-surface-disabled: var(--gray-900);
-    --color-surface-backdrop: hsla(0, 0%, 0%, 0.7); /* Darker backdrop */
-
-    /* Borders / Dividers */
     --color-border-default: var(--gray-800);
-    --color-border-muted: var(--gray-900); /* Darker, less visible */
-    --color-border-strong: var(--gray-700);
-    --color-border-disabled: var(--gray-800);
-
-    /* Interactive States (Examples) */
-    --color-interactive-primary-hover-bg: var(--blue-600);
     --color-interactive-primary-active-bg: var(--blue-400);
-    --color-interactive-primary-resting-fg: var(--black); /* Text on primary */
-
-    --color-interactive-neutral-hover-bg: var(--gray-800);
-    --color-interactive-neutral-active-bg: var(--gray-700);
-
-    /* --- Focus Ring --- */
-    --color-focus-ring: var(--blue-500); /* Often same color, check contrast */
-
-    /* --- Shadows (Colors Only) --- */
-    /* Using black with higher alpha for dark mode shadows */
-    --color-shadow-umbra: hsla(0, 0%, 0%, 0.2);
-    --color-shadow-penumbra: hsla(0, 0%, 0%, 0.14);
-    --color-shadow-ambient: hsla(0, 0%, 0%, 0.12);
-    --color-shadow-outline: hsla(0, 0%, 0%, 0.3);
   }
 }
 
-/* ==========================================================================
-   4. TYPOGRAPHY
-   ========================================================================== */
-
-:root {
-  /* ---------------------------------- */
-  /* Font Families                      */
-  /* ---------------------------------- */
-  --font-family-heading: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
-  --font-family-text: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
-  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-
-  /* ---------------------------------- */
-  /* Font Weights                       */
-  /* ---------------------------------- */
-  /* Use these named weights */
-  --font-weight-1: 400;
-  --font-weight-2: 500;
-  --font-weight-3: 600;
-  --font-weight-4: 700;
-  /* Note: Heavier weights (800, 900) exist in source but less common */
-  --font-weight-5: 800;
-  --font-weight-6: 900;
-
-  /* ---------------------------------- */
-  /* Font Sizes (Numerical Scale)       */
-  /* ---------------------------------- */
-  /* Combined scale from label, code, text, heading sizes. */
-  /* Use comments to hint at original context if needed. */
-  --font-size-1: 8.1px; /* label-1 */
-  --font-size-2: 9.5px; /* label-2 */
-  --font-size-3: 10px; /* code-1, text-1 */
-  --font-size-4: 10.8px; /* label-3 */
-  --font-size-5: 12.25px; /* label-4 */
-  --font-size-6: 13px; /* code-2, text-2, heading-1 */
-  --font-size-7: 13.6px; /* label-5 */
-  --font-size-8: 15px; /* text-3, label-6 */
-  --font-size-9: 16px; /* code-3, heading-2 */
-  --font-size-10: 18px; /* text-4 */
-  --font-size-11: 19px; /* code-4 */
-  --font-size-12: 21px; /* text-5, heading-3 */
-  --font-size-13: 22px; /* code-5 */
-  --font-size-14: 27px; /* heading-4 */
-  --font-size-15: 33px; /* heading-5 */
-  --font-size-16: 38px; /* heading-6 */
-
-  /* Category type scales */
-  --font-size-code-1: var(--font-size-3, 10px);
-  --font-size-code-2: var(--font-size-6, 13px);
-  --font-size-code-3: var(--font-size-9, 16px);
-  --font-size-code-4: var(--font-size-11, 19px);
-  --font-size-code-5: var(--font-size-13, 22px);
-
-  --font-size-text-1: var(--font-size-3, 10px);
-  --font-size-text-2: var(--font-size-6, 13px);
-  --font-size-text-3: var(--font-size-8, 15px);
-  --font-size-text-4: var(--font-size-10, 18px);
-  --font-size-text-5: var(--font-size-12, 21px);
-
-  --font-size-heading-1: var(--font-size-6, 13px);
-  --font-size-heading-2: var(--font-size-9, 16px);
-  --font-size-heading-3: var(--font-size-12, 21px);
-  --font-size-heading-4: var(--font-size-14, 27px);
-  --font-size-heading-5: var(--font-size-15, 33px);
-  --font-size-heading-6: var(--font-size-16, 38px);
-
-  --font-size-label-1: var(--font-size-1, 8.1px);
-  --font-size-label-2: var(--font-size-2, 9.5px);
-  --font-size-label-3: var(--font-size-4, 10.8px);
-  --font-size-label-4: var(--font-size-5, 12.25px);
-  --font-size-label-5: var(--font-size-7, 13.6px);
-  --font-size-label-6: var(--font-size-8, 15px);
-
-  /* ---------------------------------- */
-  /* Line Heights (Numerical Scale)     */
-  /* ---------------------------------- */
-  /* Unitless values are recommended for line-height. */
-  /* Scale derived from font sizes, may need adjustment/simplification. */
-  --line-height-1: 1; /* 15 / 15 */
-  --line-height-2: 1.03; /* 14 / 13.6 */
-  --line-height-3: 1.06; /* 13 / 12.25 */
-  --line-height-4: 1.11; /* 12 / 10.8 */
-  --line-height-5: 1.16; /* 11 / 9.5 */
-  --line-height-6: 1.23; /* 10 / 8.1 */
-  --line-height-7: 1.24; /* 41 / 33 - 47 / */
-  --line-height-8: 1.3; /* 35 / 27 */
-  --line-height-9: 1.38; /* 29 / 21 */
-  --line-height-10: 1.41; /* 31 / 22 */
-  --line-height-11: 1.42; /* 27 / 19 */
-  --line-height-12: 1.44; /* 23 / 16 */
-  --line-height-13: 1.46; /* 19 / 13 */
-  --line-height-14: 1.5; /* 27 / 18 - 15 / 10*/
-
-  /* Simplified options */
-  --line-height-solid: 1;
-  --line-height-heading: 1.25;
-  --line-height-text: 1.5;
-
-  /* ---------------------------------- */
-  /* Letter Spacing (Numerical Scale)   */
-  /* ---------------------------------- */
-  /* Using `em` units */
-  --letter-spacing-0: 0; /* Default for most text */
-  --letter-spacing-1: -0.02em; /* Example */
-  --letter-spacing-2: 0.025em; /* Example */
-  --letter-spacing-3: 0.05em; /* Derived from label styles (0.5px / ~10px font) */
-  --letter-spacing-4: 0.1em; /* Example */
-
-  /* FONT SHORTHAND */
-  --code-1: 10px / 1.5, var(--font-family-mono);
-  --code-2: 13px / 1.4615, var(--font-family-mono);
-  --code-3: 16px / 1.4375, var(--font-family-mono);
-  --code-4: 19px / 1.421, var(--font-family-mono);
-
-  --text-1: 10px / 1.5, var(--font-family-text);
-  --text-2: 13px / 1.4615, var(--font-family-text);
-  --text-3: 15px / 1.5333, var(--font-family-text);
-  --text-4: 18px / 1.5, var(--font-family-text);
-  --text-5: 21px / 1.4761, var(--font-family-text);
-
-  --heading-1: 13px / 1.4615, var(--font-family-heading);
-  --heading-2: 16px / 1.4375, var(--font-family-heading);
-  --heading-3: 21px / 1.3809, var(--font-family-heading);
-  --heading-4: 27px / 1.2962, var(--font-family-heading);
-  --heading-5: 33px / 1.2424, var(--font-family-heading);
-  --heading-6: 38px / 1.2368, var(--font-family-heading);
-
-  --label-1: 8.1px / 1.2345, var(--font-family-text);
-  --label-2: 9.5px / 1.1578, var(--font-family-text);
-  --label-3: 10.8px / 1.1111, var(--font-family-text);
-  --label-4: 12.25px / 1.0612, var(--font-family-text);
-  --label-5: 13.6px / 1.0294, var(--font-family-text);
-  --label-6: 15px / 1, var(--font-family-text);
-}
-
-/* ==========================================================================
-   5. SPACING & SIZING
-   ========================================================================== */
-
 :root {
-  /* ---------------------------------- */
-  /* Spacing (Numerical Scale)          */
-  /* ---------------------------------- */
-  /* Used for padding, margin, gap, etc. Assumed px units. */
-
-  --space-7: 84px;
-
-  /* ---------------------------------- */
-  /* Container Widths (Numerical Scale) */
-  /* ---------------------------------- */
-  /* Max-widths for layout containers. Assumed px units. */
-  --container-1: 320px;
-  --container-2: 640px;
-  --container-3: 960px;
-  --container-4: 1280px;
-  --container-5: 1600px;
-  --container-6: 1920px;
-}
-
-/* ==========================================================================
-   6. SHADOWS (COMPUTED)
-   ========================================================================== */
-
-:root {
-  /* ---------------------------------- */
-  /* Shadow Components (Numerical)      */
-  /* ---------------------------------- */
-  /* Define the offset-x, offset-y, blur-radius, spread-radius in px */
-  /* Level 0 is null/none */
-  /* Level 1 (Subtle/Inset?) */
-  --shadow-umbra-px-1: 0px 0px 0px 0px;
-  --shadow-penumbra-px-1: 0px 0px 0px 0px;
-  --shadow-ambient-px-1: 0px 0px 0px 0px;
-  /* Level 2 (Low) */
-  --shadow-umbra-px-2: 0px 3px 5px -2px;
-  --shadow-penumbra-px-2: 0px 6px 10px 0px;
-  --shadow-ambient-px-2: 0px 1px 18px 1px;
-  /* Level 3 (Medium) */
-  --shadow-umbra-px-3: 0px 7px 8px -4px;
-  --shadow-penumbra-px-3: 0px 12px 17px 2px;
-  --shadow-ambient-px-3: 0px 5px 22px 4px;
-  /* Level 4 (High) */
-  --shadow-umbra-px-4: 0px 9px 11px -5px;
-  --shadow-penumbra-px-4: 0px 18px 28px 2px;
-  --shadow-ambient-px-4: 0px 7px 34px 6px;
-  /* Level 5 (Very High) */
-  --shadow-umbra-px-5: 0px 11px 15px -7px;
-  --shadow-penumbra-px-5: 0px 24px 38px 3px;
-  --shadow-ambient-px-5: 0px 9px 46px 8px;
-
-  /* ---------------------------------- */
-  /* Box Shadows (Numerical Scale)      */
-  /* ---------------------------------- */
-  /* Combines numerical components with semantic shadow colors */
-  --shadow-0: none;
-  /* Shadow 1 is typically inset or very subtle - example */
-  --shadow-1: inset 0 0 0 1px var(--color-border-default);
-  --shadow-2: var(--shadow-umbra-px-2) var(--color-shadow-umbra), var(--shadow-penumbra-px-2) var(--color-shadow-penumbra), var(--shadow-ambient-px-2) var(--color-shadow-ambient);
-  --shadow-3: var(--shadow-umbra-px-3) var(--color-shadow-umbra), var(--shadow-penumbra-px-3) var(--color-shadow-penumbra), var(--shadow-ambient-px-3) var(--color-shadow-ambient);
-  --shadow-4: var(--shadow-umbra-px-4) var(--color-shadow-umbra), var(--shadow-penumbra-px-4) var(--color-shadow-penumbra), var(--shadow-ambient-px-4) var(--color-shadow-ambient);
-  --shadow-5: var(--shadow-umbra-px-5) var(--color-shadow-umbra), var(--shadow-penumbra-px-5) var(--color-shadow-penumbra), var(--shadow-ambient-px-5) var(--color-shadow-ambient);
-}
-
-/* ==========================================================================
-   7. TRANSITIONS
-   ========================================================================== */
-
-:root {
-  --transition-duration-1: 100ms; /* From button styles */
-  --transition-duration-2: 150ms; /* From input switch */
-  --transition-duration-3: 200ms; /* Example */
-  --transition-duration-4: 300ms; /* Example */
-
-  --transition-easing-default: ease-in-out;
-  --transition-easing-ease-out: ease-out; /* From input switch */
-  --transition-easing-ease-in: ease-in;
-}
-
-/* ==========================================================================
-   8. LAYOUT & Z-INDEX
-   ========================================================================== */
-
-:root {
-  /* ---------------------------------- */
-  /* Z-Index (Numerical Scale)          */
-  /* ---------------------------------- */
-  /* Stacking order for layers */
-  --z-index-0: 0;
-  --z-index-1: 100; /* Base elements */
-  --z-index-2: 200; /* Tooltips (from layer.tooltip.zOffset) */
-  --z-index-3: 300;
-  --z-index-4: 400; /* Popovers (from layer.popover.zOffset) */
-  --z-index-5: 500;
-  --z-index-6: 600; /* Dialogs (from layer.dialog.zOffset) */
-  --z-index-7: 700; /* Max */
-
-  /* ---------------------------------- */
-  /* Media Query Breakpoints (Numerical)*/
-  /* ---------------------------------- */
-  /* Values from theme.media - use in @media (min-width: var(--media-N)) */
-  --media-1: 360px;
-  --media-2: 600px;
-  --media-3: 900px;
-  --media-4: 1200px;
-  --media-5: 1800px;
-  --media-6: 2400px;
-}
-
-/* --- End of Sanity UI CSS Variables --- */
-
-:root {
-  --card-bg-color: light-dark(#f6f6f8, #0d0e12);
   --card-border-color: light-dark(var(--gray-200), var(--gray-800));
   --text-color: light-dark(#242736, #e3e4e8);
-  --button-text-color: light-dark(white, #0d0e12);
-  --button-background-color: light-dark(rgb(85, 107, 252), rgb(120, 152, 255));
-  --button-background-color-hover: light-dark(rgb(64, 67, 231), rgb(170, 193, 255));
-  --button-border-color: light-dark(rgb(85, 107, 252), rgb(120, 152, 255));
-  --button-border-color-hover: light-dark(rgb(64, 67, 231), rgb(170, 193, 255));
-
-  --button-color: light-dark(#fff, #000);
-  --button-primary-bg: light-dark(#272937, #999999);
   --button-primary-bg-hover: light-dark(#1c1f28, #888888);
-
-  --size-1: 1px;
-  --size-2: 2px;
-  --size-3: 4px;
-  --size-4: 8px;
-  --size-5: 16px;
-  --size-6: 24px;
-  --size-7: 32px;
-  --size-8: 48px;
-  --size-9: 64px;
-  --size-10: 128px;
 }
 
 html {
@@ -638,7 +97,7 @@ html {
 }
 
 body {
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
+  font-family: var(--sans);
   color: var(--text-color) !important;
   min-height: 100dvh;
   max-height: 100dvh;
@@ -833,9 +292,9 @@ footer {
 }
 
 .logo-text {
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
+  font-family: var(--sans);
   font-size: 13px;
-  font-weight: 500;
+  font-weight: var(--medium);
   margin: 0px;
   letter-spacing: 0px;
 }
@@ -848,11 +307,11 @@ footer {
   background-color: light-dark(var(--gray-900), white) !important;
   color: light-dark(white, var(--gray-950)) !important;
   border: 0 !important;
-  border-radius: 3px !important;
+  border-radius: var(--radius-2) !important;
   outline: 0;
   font-size: 14px !important;
   line-height: 1 !important;
-  padding: 0px 12px !important;
+  padding: 0 var(--space-3) !important;
   height: 24px !important;
   max-width: 160px;
 }
@@ -864,25 +323,25 @@ footer {
 .config-label {
   text-transform: uppercase;
   font-size: 11px;
-  font-weight: 500;
+  font-weight: var(--medium);
   letter-spacing: 0.5px;
 }
 
 .config-label span {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: var(--space-2);
 }
 
 .function-list-item {
   font-size: 0.875rem;
-  border-radius: 3px;
+  border-radius: var(--radius-2);
   margin: 0 0 1px 0;
   cursor: pointer;
 }
 
 .function-list-item-label {
   color: light-dark(var(--gray-800), var(--gray-400));
-  font-weight: var(--font-weight-3);
+  font-weight: var(--semibold);
   padding-bottom: var(--m-space-1);
 }
 
@@ -956,7 +415,7 @@ ol[type='content'] li:hover:not(.selected:not(.selected)) {
 
 & :is(input:not([is='switch']), select, textarea) {
   border: 1px solid light-dark(var(--gray-200), var(--gray-800)) !important;
-  border-radius: 3px;
+  border-radius: var(--radius-2);
 }
 
 .cm-activeLine.cm-activeLine {
@@ -969,8 +428,8 @@ ol[type='content'] li:hover:not(.selected:not(.selected)) {
 
 .slab-stat,
 .slab-text {
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-text-2);
+  font-family: var(--mono);
+  font-size: 13px;
 }
 
 .slab-stat {
@@ -978,14 +437,14 @@ ol[type='content'] li:hover:not(.selected:not(.selected)) {
 }
 
 .slab-stat dt {
-  font-weight: 400;
+  font-weight: var(--regular);
   text-transform: none;
   margin: 0;
   padding: 0;
 }
 
 .slab-stat dd {
-  font-weight: 700;
+  font-weight: var(--bold);
   text-transform: none;
   margin: 0;
   padding: 0;
@@ -997,7 +456,7 @@ pre {
 }
 
 time {
-  font-family: var(--font-family-mono);
+  font-family: var(--mono);
 }
 
 /* Default sidebar */
@@ -1163,8 +622,8 @@ body:has(#nav-toggle:checked) {
   top: var(--m-space-2);
   right: var(--m-space-3);
   cursor: pointer;
-  padding: 4px;
-  border-radius: 2px;
+  padding: var(--space-1);
+  border-radius: var(--radius-2);
   background: var(--color-surface-subtle);
   border: 1px solid var(--color-border-default);
 }