diff --git a/packages/base/color.gts b/packages/base/color.gts
index 3d1977d5004..9229cc4bf99 100644
--- a/packages/base/color.gts
+++ b/packages/base/color.gts
@@ -1,9 +1,10 @@
-import { Component } from '@cardstack/base/card-api';
-import StringField from '@cardstack/base/string';
 import { Swatch } from '@cardstack/boxel-ui/components';
 import { markdownEscape } from '@cardstack/boxel-ui/helpers';
 import PaletteIcon from '@cardstack/boxel-icons/palette';
+
+import { Component } from './card-api';
 import ColorPickerField from './color-field/components/color-picker-field';
+import StringField from './string';
 
 class View extends Component<typeof ColorField> {
   <template><Swatch @color={{@model}} @style='round' /></template>
diff --git a/packages/base/number/components/gauge.gts b/packages/base/number/components/gauge.gts
index f1374d06b51..1795bec6c48 100644
--- a/packages/base/number/components/gauge.gts
+++ b/packages/base/number/components/gauge.gts
@@ -51,12 +51,12 @@ export class GaugeAtom extends GlimmerComponent<GaugeSignature> {
     const warningThreshold = this.options.warningThreshold;
 
     if (dangerThreshold !== undefined && numericValue >= dangerThreshold) {
-      return 'var(--destructive, #ef4444)';
+      return 'var(--destructive)';
     }
     if (warningThreshold !== undefined && numericValue >= warningThreshold) {
-      return 'var(--warning, #f59e0b)';
+      return 'var(--warning)';
     }
-    return 'var(--primary, #3b82f6)';
+    return 'var(--primary)';
   }
 
   get needleRotation() {
@@ -86,7 +86,7 @@ export class GaugeAtom extends GlimmerComponent<GaugeSignature> {
         <path
           d='M 20 100 A 80 80 0 0 1 180 100'
           fill='none'
-          stroke='var(--muted, #f1f5f9)'
+          stroke='var(--muted)'
           stroke-width='16'
           stroke-linecap='round'
         />
@@ -105,13 +105,13 @@ export class GaugeAtom extends GlimmerComponent<GaugeSignature> {
             )
           }}
         />
-        <circle cx='100' cy='100' r='6' fill='var(--foreground, #1e293b)' />
+        <circle cx='100' cy='100' r='6' fill='var(--foreground)' />
         <line
           x1='100'
           y1='100'
           x2='100'
           y2='40'
-          stroke='var(--foreground, #1e293b)'
+          stroke='var(--foreground)'
           stroke-width='3'
           stroke-linecap='round'
           style={{this.needleStyle}}
@@ -158,12 +158,12 @@ export class GaugeEmbedded extends GlimmerComponent<GaugeSignature> {
     const warningThreshold = this.options.warningThreshold;
 
     if (dangerThreshold !== undefined && numericValue >= dangerThreshold) {
-      return 'var(--destructive, #ef4444)';
+      return 'var(--destructive)';
     }
     if (warningThreshold !== undefined && numericValue >= warningThreshold) {
-      return 'var(--warning, #f59e0b)';
+      return 'var(--warning)';
     }
-    return 'var(--primary, #3b82f6)';
+    return 'var(--primary)';
   }
 
   get needleRotation() {
@@ -209,7 +209,7 @@ export class GaugeEmbedded extends GlimmerComponent<GaugeSignature> {
           <path
             d='M 20 100 A 80 80 0 0 1 180 100'
             fill='none'
-            stroke='var(--muted, #f1f5f9)'
+            stroke='var(--muted)'
             stroke-width='16'
             stroke-linecap='round'
           />
@@ -233,7 +233,7 @@ export class GaugeEmbedded extends GlimmerComponent<GaugeSignature> {
             y='115'
             text-anchor='start'
             font-size='10'
-            fill='var(--muted-foreground, #94a3b8)'
+            fill='var(--muted-foreground)'
           >
             {{this.minValue}}
           </text>
@@ -242,17 +242,17 @@ export class GaugeEmbedded extends GlimmerComponent<GaugeSignature> {
             y='115'
             text-anchor='end'
             font-size='10'
-            fill='var(--muted-foreground, #94a3b8)'
+            fill='var(--muted-foreground)'
           >
             {{this.maxValue}}
           </text>
-          <circle cx='100' cy='100' r='6' fill='var(--foreground, #1e293b)' />
+          <circle cx='100' cy='100' r='6' fill='var(--foreground)' />
           <line
             x1='100'
             y1='100'
             x2='100'
             y2='40'
-            stroke='var(--foreground, #1e293b)'
+            stroke='var(--foreground)'
             stroke-width='3'
             stroke-linecap='round'
             style={{this.needleStyle}}
diff --git a/packages/base/number/components/progress-bar.gts b/packages/base/number/components/progress-bar.gts
index c2bad4da4e1..3a2cda55690 100644
--- a/packages/base/number/components/progress-bar.gts
+++ b/packages/base/number/components/progress-bar.gts
@@ -4,6 +4,7 @@ import {
   getNumericValue,
   calculatePercentage,
   getFormattedDisplayValue,
+  statusRampColor,
 } from '../util/index';
 
 export interface ProgressBarOptions {
@@ -59,19 +60,9 @@ export class ProgressBarAtom extends GlimmerComponent<ProgressBarSignature> {
 
   get fillColor() {
     if (this.options.useGradient === false) {
-      return 'var(--primary, #3b82f6)';
+      return 'var(--primary)';
     }
-    const p = this.percentage;
-    if (p <= 25) {
-      return 'var(--destructive, #ef4444)';
-    }
-    if (p <= 50) {
-      return 'var(--warning, #f59e0b)';
-    }
-    if (p <= 75) {
-      return 'var(--accent, #eab308)';
-    }
-    return 'var(--success, #22c55e)';
+    return statusRampColor(this.percentage);
   }
 
   get fillStyle() {
@@ -83,7 +74,11 @@ export class ProgressBarAtom extends GlimmerComponent<ProgressBarSignature> {
   <template>
     <span class='progress-bar-atom'>
       <div class='progress-bar-track'>
-        <div class='progress-bar-fill' style={{this.fillStyle}}></div>
+        <div
+          class='progress-bar-fill'
+          style={{this.fillStyle}}
+          data-test-progress-bar-fill
+        ></div>
       </div>
     </span>
 
@@ -97,7 +92,7 @@ export class ProgressBarAtom extends GlimmerComponent<ProgressBarSignature> {
         position: relative;
         width: 100%;
         height: 0.5rem;
-        background: var(--muted, #f1f5f9);
+        background: var(--muted);
         border-radius: 999px;
         overflow: hidden;
       }
@@ -143,24 +138,9 @@ export class ProgressBarEmbedded extends GlimmerComponent<ProgressBarSignature>
 
   get fillColor() {
     if (this.options.useGradient === false) {
-      return 'var(--primary, #3b82f6)';
-    }
-    const p = this.percentage;
-    // State-based colors based on progress percentage
-    // 0-25%: Red (low progress)
-    if (p <= 25) {
-      return 'var(--destructive, #ef4444)';
-    }
-    // 25-50%: Orange (moderate progress)
-    if (p <= 50) {
-      return 'var(--warning, #f59e0b)';
-    }
-    // 50-75%: Yellow (good progress)
-    if (p <= 75) {
-      return 'var(--accent, #eab308)';
+      return 'var(--primary)';
     }
-    // 75-100%: Green (excellent progress)
-    return 'var(--success, #22c55e)';
+    return statusRampColor(this.percentage);
   }
 
   get fillStyle() {
@@ -212,6 +192,7 @@ export class ProgressBarEmbedded extends GlimmerComponent<ProgressBarSignature>
         <div
           class='progress-bar-fill {{if this.isGradient "gradient" "solid"}}'
           style={{this.fillStyle}}
+          data-test-progress-bar-fill
         >
           {{#if this.shouldShowText}}
             <div class='progress-bar-info'>
@@ -232,7 +213,7 @@ export class ProgressBarEmbedded extends GlimmerComponent<ProgressBarSignature>
         position: relative;
         width: 100%;
         height: 100%;
-        background: var(--muted, #f1f5f9);
+        background: var(--muted);
         border-radius: 999px;
         overflow: hidden;
       }
@@ -259,7 +240,7 @@ export class ProgressBarEmbedded extends GlimmerComponent<ProgressBarSignature>
       .progress-bar-label {
         font-size: 0.625rem;
         font-weight: 600;
-        color: var(--primary-foreground, #ffffff);
+        color: var(--primary-foreground);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/packages/base/number/components/progress-circle.gts b/packages/base/number/components/progress-circle.gts
index 364a682e377..ac36c4bd6f5 100644
--- a/packages/base/number/components/progress-circle.gts
+++ b/packages/base/number/components/progress-circle.gts
@@ -5,6 +5,7 @@ import {
   getNumericValue,
   calculatePercentage,
   getFormattedDisplayValue,
+  statusRampColor,
 } from '../util/index';
 
 export interface ProgressCircleOptions {
@@ -59,19 +60,9 @@ export class ProgressCircleAtom extends GlimmerComponent<ProgressCircleSignature
 
   get fillColor() {
     if (this.options.useGradient === false) {
-      return 'var(--primary, #3b82f6)';
+      return 'var(--primary)';
     }
-    const p = this.percentage;
-    if (p <= 25) {
-      return 'var(--destructive, #ef4444)';
-    }
-    if (p <= 50) {
-      return 'var(--warning, #f59e0b)';
-    }
-    if (p <= 75) {
-      return 'var(--accent, #eab308)';
-    }
-    return 'var(--success, #22c55e)';
+    return statusRampColor(this.percentage);
   }
 
   <template>
@@ -101,7 +92,7 @@ export class ProgressCircleAtom extends GlimmerComponent<ProgressCircleSignature
         width: 2rem;
         height: 2rem;
         border-radius: 50%;
-        background: var(--muted, #f1f5f9);
+        background: var(--muted);
         overflow: hidden;
       }
       .progress-circle-track {
@@ -118,7 +109,7 @@ export class ProgressCircleAtom extends GlimmerComponent<ProgressCircleSignature
       .progress-circle-fill {
         position: absolute;
         inset: 0.25rem;
-        background: var(--background, #ffffff);
+        background: var(--background);
         border-radius: 50%;
       }
     </style>
@@ -154,24 +145,9 @@ export class ProgressCircleEmbedded extends GlimmerComponent<ProgressCircleSigna
 
   get fillColor() {
     if (this.options.useGradient === false) {
-      return 'var(--primary, #3b82f6)';
-    }
-    const p = this.percentage;
-    // State-based colors based on progress percentage
-    // 0-25%: Red (low progress)
-    if (p <= 25) {
-      return 'var(--destructive, #ef4444)';
-    }
-    // 25-50%: Orange (moderate progress)
-    if (p <= 50) {
-      return 'var(--warning, #f59e0b)';
-    }
-    // 50-75%: Yellow (good progress)
-    if (p <= 75) {
-      return 'var(--accent, #eab308)';
+      return 'var(--primary)';
     }
-    // 75-100%: Green (excellent progress)
-    return 'var(--success, #22c55e)';
+    return statusRampColor(this.percentage);
   }
 
   get displayValue() {
@@ -240,7 +216,7 @@ export class ProgressCircleEmbedded extends GlimmerComponent<ProgressCircleSigna
         width: var(--progress-circle-size, 120px);
         height: var(--progress-circle-size, 120px);
         border-radius: 50%;
-        background: var(--muted, #f1f5f9);
+        background: var(--muted);
         overflow: hidden;
       }
       .progress-circle-track {
@@ -257,7 +233,7 @@ export class ProgressCircleEmbedded extends GlimmerComponent<ProgressCircleSigna
       .progress-circle-fill {
         position: absolute;
         inset: var(--progress-circle-stroke-width, 10px);
-        background: var(--background, #ffffff);
+        background: var(--background);
         border-radius: 50%;
       }
       .progress-circle-content {
@@ -273,13 +249,13 @@ export class ProgressCircleEmbedded extends GlimmerComponent<ProgressCircleSigna
       .progress-circle-value {
         font-size: var(--progress-circle-value-size, 1.5rem);
         font-weight: 700;
-        color: var(--foreground, #0f172a);
+        color: var(--foreground);
         line-height: 1;
       }
       .progress-circle-max {
         font-size: var(--progress-circle-max-size, 0.875rem);
         font-weight: 500;
-        color: var(--muted-foreground, #64748b);
+        color: var(--muted-foreground);
       }
     </style>
   </template>
diff --git a/packages/base/number/components/score.gts b/packages/base/number/components/score.gts
index b3835675d21..fa18955f03d 100644
--- a/packages/base/number/components/score.gts
+++ b/packages/base/number/components/score.gts
@@ -5,6 +5,7 @@ import {
   getFormattedDisplayValue,
   getNumericValue,
   calculatePercentage,
+  statusRampColor,
 } from '../util/index';
 
 export interface ScoreOptions {
@@ -56,11 +57,7 @@ export class ScoreAtom extends GlimmerComponent<ScoreSignature> {
   }
 
   get iconColor() {
-    const p = this.percentage;
-    if (p >= 75) return 'var(--success, #22c55e)';
-    if (p >= 50) return 'var(--accent, #eab308)';
-    if (p >= 25) return 'var(--warning, #f59e0b)';
-    return 'var(--destructive, #ef4444)';
+    return statusRampColor(this.percentage);
   }
 
   get displayValue() {
@@ -89,9 +86,9 @@ export class ScoreAtom extends GlimmerComponent<ScoreSignature> {
         align-items: center;
         gap: 0.375rem;
         padding: 0.25rem 0.625rem;
-        background: var(--muted, #f1f5f9);
+        background: var(--muted);
         border-radius: 999px;
-        border: 1px solid var(--border, #e2e8f0);
+        border: 1px solid var(--border);
       }
       .trophy-icon {
         width: 1rem;
@@ -141,11 +138,7 @@ export class ScoreEmbedded extends GlimmerComponent<ScoreSignature> {
   }
 
   get scoreColor() {
-    const p = this.percentage;
-    if (p >= 75) return 'var(--success, #22c55e)';
-    if (p >= 50) return 'var(--accent, #eab308)';
-    if (p >= 25) return 'var(--warning, #f59e0b)';
-    return 'var(--destructive, #ef4444)';
+    return statusRampColor(this.percentage);
   }
 
   get tierLabel() {
@@ -175,6 +168,7 @@ export class ScoreEmbedded extends GlimmerComponent<ScoreSignature> {
         <div
           class='score-badge'
           style={{htmlSafe (concat 'background: ' this.scoreColor)}}
+          data-test-score-badge
         >
           <svg
             class='badge-icon'
@@ -210,12 +204,8 @@ export class ScoreEmbedded extends GlimmerComponent<ScoreSignature> {
         gap: 1rem;
         padding: 1.5rem;
         border-radius: 1rem;
-        background: linear-gradient(
-          135deg,
-          var(--card, #ffffff) 0%,
-          var(--muted, #f8fafc) 100%
-        );
-        border: 2px solid var(--border, #e2e8f0);
+        background: linear-gradient(135deg, var(--card) 0%, var(--muted) 100%);
+        border: 2px solid var(--border);
         box-shadow:
           0 4px 6px -1px rgb(0 0 0 / 0.05),
           0 2px 4px -1px rgb(0 0 0 / 0.03);
@@ -230,7 +220,7 @@ export class ScoreEmbedded extends GlimmerComponent<ScoreSignature> {
         font-weight: 600;
         letter-spacing: 0.025em;
         text-transform: uppercase;
-        color: var(--muted-foreground, #64748b);
+        color: var(--muted-foreground);
       }
       .score-badge {
         display: inline-flex;
@@ -272,15 +262,15 @@ export class ScoreEmbedded extends GlimmerComponent<ScoreSignature> {
       .score-max {
         font-size: 1.5rem;
         font-weight: 600;
-        color: var(--muted-foreground, #94a3b8);
+        color: var(--muted-foreground);
       }
       .score-percentile {
         font-size: 0.875rem;
         font-weight: 600;
         padding: 0.375rem 0.75rem;
-        background: var(--muted, #f1f5f9);
+        background: var(--muted);
         border-radius: 0.5rem;
-        color: var(--foreground, #0f172a);
+        color: var(--foreground);
         white-space: nowrap;
       }
     </style>
diff --git a/packages/base/number/components/stat.gts b/packages/base/number/components/stat.gts
index 629e5d91dad..17f8af22d99 100644
--- a/packages/base/number/components/stat.gts
+++ b/packages/base/number/components/stat.gts
@@ -55,9 +55,9 @@ export class StatAtom extends GlimmerComponent<StatSignature> {
         align-items: center;
         gap: 0.375rem;
         padding: 0.25rem 0.625rem;
-        background: var(--muted, #f1f5f9);
+        background: var(--muted);
         border-radius: 999px;
-        border: 1px solid var(--border, #e2e8f0);
+        border: 1px solid var(--border);
       }
       .stat-icon-pill {
         display: inline-flex;
@@ -66,14 +66,14 @@ export class StatAtom extends GlimmerComponent<StatSignature> {
         width: 1.25rem;
         height: 1.25rem;
         border-radius: 0.375rem;
-        background: var(--primary, #3b82f6);
-        color: var(--primary-foreground, #ffffff);
+        background: var(--primary);
+        color: var(--primary-foreground);
         flex-shrink: 0;
       }
       .stat-value {
         font-size: 0.875rem;
         font-weight: 700;
-        color: var(--foreground, var(--boxel-dark));
+        color: var(--foreground);
         line-height: 1;
       }
     </style>
@@ -147,12 +147,8 @@ export class StatEmbedded extends GlimmerComponent<StatSignature> {
         gap: 0.75rem;
         padding: 1.25rem;
         border-radius: 0.75rem;
-        background: linear-gradient(
-          135deg,
-          var(--card, #ffffff) 0%,
-          var(--muted, #f8fafc) 100%
-        );
-        border: 1px solid var(--border, #e2e8f0);
+        background: linear-gradient(135deg, var(--card) 0%, var(--muted) 100%);
+        border: 1px solid var(--border);
         box-shadow:
           0 4px 6px -1px rgb(0 0 0 / 0.05),
           0 2px 4px -1px rgb(0 0 0 / 0.03);
@@ -162,7 +158,7 @@ export class StatEmbedded extends GlimmerComponent<StatSignature> {
         box-shadow:
           0 10px 15px -3px rgb(0 0 0 / 0.1),
           0 4px 6px -2px rgb(0 0 0 / 0.05);
-        border-color: var(--ring, #cbd5e1);
+        border-color: var(--ring);
       }
       .stat-header {
         display: flex;
@@ -175,7 +171,7 @@ export class StatEmbedded extends GlimmerComponent<StatSignature> {
         font-weight: 600;
         letter-spacing: 0.025em;
         text-transform: uppercase;
-        color: var(--muted-foreground, #64748b);
+        color: var(--muted-foreground);
       }
       .stat-icon-container {
         display: inline-flex;
@@ -184,8 +180,8 @@ export class StatEmbedded extends GlimmerComponent<StatSignature> {
         width: 2.25rem;
         height: 2.25rem;
         border-radius: 0.5rem;
-        background: var(--primary, #3b82f6);
-        color: var(--primary-foreground, #ffffff);
+        background: var(--primary);
+        color: var(--primary-foreground);
         box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
       }
       .stat-main {
@@ -197,13 +193,13 @@ export class StatEmbedded extends GlimmerComponent<StatSignature> {
         font-size: 2.5rem;
         font-weight: 800;
         line-height: 1;
-        color: var(--foreground, #0f172a);
+        color: var(--foreground);
         letter-spacing: -0.025em;
       }
       .stat-subtitle {
         font-size: 0.875rem;
         font-weight: 600;
-        color: var(--success, #22c55e);
+        color: var(--success);
         display: flex;
         align-items: center;
         gap: 0.25rem;
@@ -213,17 +209,17 @@ export class StatEmbedded extends GlimmerComponent<StatSignature> {
         align-items: center;
         gap: 0.5rem;
         padding-top: 0.5rem;
-        border-top: 1px solid var(--border, #e2e8f0);
+        border-top: 1px solid var(--border);
       }
       .stat-range-label {
         font-size: 0.75rem;
         font-weight: 600;
-        color: var(--muted-foreground, #94a3b8);
+        color: var(--muted-foreground);
       }
       .stat-range-value {
         font-size: 0.75rem;
         font-weight: 500;
-        color: var(--foreground, #0f172a);
+        color: var(--foreground);
       }
     </style>
   </template>
diff --git a/packages/base/number/util/index.gts b/packages/base/number/util/index.gts
index d06804b6986..f73c1c99485 100644
--- a/packages/base/number/util/index.gts
+++ b/packages/base/number/util/index.gts
@@ -61,3 +61,23 @@ export function calculatePercentage(
 export function clamp(value: number, min: number, max: number): number {
   return Math.min(max, Math.max(min, value));
 }
+
+/**
+ * Status color for a 0–100 progress value, in four bands from destructive up
+ * to success. The third band has no status token of its own, so it mixes its
+ * two neighbours: that keeps the ramp ordered under any theme, whatever hues
+ * the theme gives warning and success. Thresholds are inclusive, so 75 reads
+ * as success.
+ */
+export function statusRampColor(percentage: number): string {
+  if (percentage >= 75) {
+    return 'var(--success)';
+  }
+  if (percentage >= 50) {
+    return 'color-mix(in oklch, var(--warning), var(--success))';
+  }
+  if (percentage >= 25) {
+    return 'var(--warning)';
+  }
+  return 'var(--destructive)';
+}
diff --git a/packages/base/package.json b/packages/base/package.json
index fce09db8dec..511e068d163 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -7,6 +7,7 @@
     "@babel/core": "catalog:",
     "@cardstack/boxel-icons": "workspace:*",
     "@cardstack/boxel-ui": "workspace:*",
+    "@cardstack/local-types": "workspace:*",
     "@cardstack/runtime-common": "workspace:*",
     "@glimmer/component": "catalog:",
     "@glimmer/tracking": "^1.0.4",
diff --git a/packages/base/structured-theme-variables.gts b/packages/base/structured-theme-variables.gts
index 7629b0462c3..643c41f55bc 100644
--- a/packages/base/structured-theme-variables.gts
+++ b/packages/base/structured-theme-variables.gts
@@ -540,7 +540,12 @@ export default class ThemeVarField extends FieldDef {
   });
   @field success = contains(ColorField, {
     description: describeColor(
-      'Success/positive feedback color. Not standard shadcn: consumers fall back to primary when unset. Do not use as foreground color.',
+      'Success/positive feedback color. Not standard shadcn: falls back to the fixed Boxel status palette green (--boxel-success) when unset.',
+    ),
+  });
+  @field warning = contains(ColorField, {
+    description: describeColor(
+      'Warning/caution feedback color. Not standard shadcn: falls back to the fixed Boxel status palette yellow (--boxel-warning) when unset.',
     ),
   });
   @field border = contains(ColorField, {
@@ -632,6 +637,30 @@ export default class ThemeVarField extends FieldDef {
   @field trackingNormal = contains(CSSValueField, {
     description: 'Specifies letter-spacing base value.',
   });
+  // box-shadow primitives, stored so tweakcn themes round-trip losslessly.
+  // The composed shadow scale below does not derive from them; editing these
+  // has no effect on rendered shadows.
+  @field shadowX = contains(CSSValueField, {
+    description: 'Horizontal shadow offset (e.g. 0, 3px).',
+  });
+  @field shadowY = contains(CSSValueField, {
+    description: 'Vertical shadow offset (e.g. 1px, 3px).',
+  });
+  @field shadowBlur = contains(CSSValueField, {
+    description: 'Shadow blur radius (e.g. 3px, 0px).',
+  });
+  @field shadowSpread = contains(CSSValueField, {
+    description: 'Shadow spread radius (e.g. 0px, -1px).',
+  });
+  @field shadowOpacity = contains(CSSValueField, {
+    description: 'Shadow opacity as a 0-1 number (e.g. 0.1).',
+  });
+  @field shadowColor = contains(ColorField, {
+    description: describeColor(
+      'Shadow base color from tweakcn; not applied to the shadow scale.',
+    ),
+  });
+
   // box-shadow variables
   @field shadow2xs = contains(CSSValueField, {
     description: 'Smallest shadow depth.',
@@ -709,6 +738,7 @@ export default class ThemeVarField extends FieldDef {
     'destructive',
     'destructiveForeground',
     'success',
+    'warning',
   ];
   private chartColors = ['chart1', 'chart2', 'chart3', 'chart4', 'chart5'];
   private sidebarColors = [
@@ -721,7 +751,17 @@ export default class ThemeVarField extends FieldDef {
     'sidebarBorder',
     'sidebarRing',
   ];
-  private boxShadows = ['shadowSm', 'shadowMd', 'shadowLg', 'shadowXl'];
+  private boxShadows = [
+    'shadowColor',
+    'shadow2xs',
+    'shadowXs',
+    'shadowSm',
+    'shadow',
+    'shadowMd',
+    'shadowLg',
+    'shadowXl',
+    'shadow2xl',
+  ];
   get fieldGroups() {
     return [
       {
@@ -1015,6 +1055,13 @@ export default class ThemeVarField extends FieldDef {
             >
               <@fields.success />
             </FieldContainer>
+            <FieldContainer
+              @label='Warning'
+              @vertical={{true}}
+              data-test-field='warning'
+            >
+              <@fields.warning />
+            </FieldContainer>
           </div>
         </section>
 
@@ -1272,6 +1319,60 @@ export default class ThemeVarField extends FieldDef {
               <@fields.shadow2xl />
             </FieldContainer>
           </div>
+          <h5 class='theme-var-edit-subheading'>Imported shadow primitives</h5>
+          <p class='theme-var-edit-hint'>
+            Kept so a tweakcn export round-trips. The shadow scale above is not
+            derived from them, so editing these has no effect on rendered
+            shadows.
+          </p>
+          <div class='theme-var-edit-row theme-var-edit-row--2col'>
+            <FieldContainer
+              @label='X Offset'
+              @vertical={{true}}
+              data-test-field='shadowX'
+            >
+              <@fields.shadowX />
+            </FieldContainer>
+            <FieldContainer
+              @label='Y Offset'
+              @vertical={{true}}
+              data-test-field='shadowY'
+            >
+              <@fields.shadowY />
+            </FieldContainer>
+          </div>
+          <div class='theme-var-edit-row theme-var-edit-row--2col'>
+            <FieldContainer
+              @label='Blur'
+              @vertical={{true}}
+              data-test-field='shadowBlur'
+            >
+              <@fields.shadowBlur />
+            </FieldContainer>
+            <FieldContainer
+              @label='Spread'
+              @vertical={{true}}
+              data-test-field='shadowSpread'
+            >
+              <@fields.shadowSpread />
+            </FieldContainer>
+          </div>
+          <div class='theme-var-edit-row theme-var-edit-row--2col'>
+            <FieldContainer
+              @label='Opacity'
+              @vertical={{true}}
+              data-test-field='shadowOpacity'
+            >
+              <@fields.shadowOpacity />
+            </FieldContainer>
+            <FieldContainer
+              @label='Color'
+              @vertical={{true}}
+              data-test-field='shadowColor'
+            >
+              <@fields.shadowColor />
+            </FieldContainer>
+          </div>
         </section>
 
         <section class='theme-var-edit-section'>
@@ -1331,6 +1432,14 @@ export default class ThemeVarField extends FieldDef {
           padding-bottom: var(--boxel-sp-xs);
           border-bottom: 1px solid var(--border, var(--boxel-border-color));
         }
+        .theme-var-edit-subheading {
+          margin: var(--boxel-sp-sm) 0 0;
+          font-size: var(--boxel-font-size-xs);
+          font-weight: 600;
+          color: var(--muted-foreground, var(--boxel-400));
+          text-transform: uppercase;
+          letter-spacing: 0.04em;
+        }
         .theme-var-edit-row {
           display: flex;
           flex-direction: column;
diff --git a/packages/base/tsconfig.json b/packages/base/tsconfig.json
index d71e0728fdf..4a2aa5d06cb 100644
--- a/packages/base/tsconfig.json
+++ b/packages/base/tsconfig.json
@@ -21,6 +21,7 @@
     "baseUrl": ".",
     "strict": true,
     "experimentalDecorators": true,
+    "types": ["@cardstack/local-types"],
     "paths": {
       "@cardstack/boxel-ui": ["../boxel-ui/declarations"],
       "@cardstack/boxel-ui/*": ["../boxel-ui/declarations/*"],
diff --git a/packages/boxel-ui/src/components/switch/index.gts b/packages/boxel-ui/src/components/switch/index.gts
index 5556c1eb115..5363efe62d6 100644
--- a/packages/boxel-ui/src/components/switch/index.gts
+++ b/packages/boxel-ui/src/components/switch/index.gts
@@ -112,7 +112,7 @@ const Switch: TemplateOnlyComponent<SwitchSignature> = <template>
         --_switch-bg-color: var(--boxel-switch-background, var(--input));
         --_switch-active-color: var(
           --boxel-switch-active-background,
-          var(--success, var(--primary))
+          var(--primary)
         );
         --_switch-thumb-color: var(--boxel-switch-thumb, var(--background));
         --_switch-active-thumb-color: var(
diff --git a/packages/boxel-ui/src/styles/theme.css b/packages/boxel-ui/src/styles/theme.css
index e1bb50bc76d..dd7ba26db92 100644
--- a/packages/boxel-ui/src/styles/theme.css
+++ b/packages/boxel-ui/src/styles/theme.css
@@ -134,16 +134,23 @@
   --boxel-button-disabled-foreground: var(--boxel-450);
 }
 
-/* Themed-card boundary reset. The --theme-* typography knobs are deliberately
-   NOT reset here: a nested theme that omits them inherits the ambient
-   typography, and one that wants its own simply sets them — whereas a reset
-   would make inheriting impossible to express. */
+/* ── Themed-card boundary reset ─────────────────────────────────────────────
+
+  Which values: the component knobs the light or dark block above sets, so
+  they can't inherit into a themed card.
+
+  Not listed here, for two different reasons:
+  - --success and --warning are already declared with the rest of the contract
+    on the scope selector above. Do not re-declare them `initial` here: same
+    selector, later in the file, so `initial` would win and blank the token
+    inside every themed card.
+  - the --theme-* typography knobs are left undeclared on purpose, so a nested
+    theme that omits them inherits the ambient typography; one that wants its
+    own simply sets them.
+*/
 :where([data-boxel-theme-scope]) {
-  --boxel-switch-background: initial;
   --boxel-switch-thumb: initial;
-  --boxel-switch-active-thumb: initial;
   --boxel-switch-thumb-icon: initial;
-  --boxel-switch-active-thumb-icon: initial;
   --boxel-button-default-border: initial;
   --boxel-button-default-active-background: initial;
   --boxel-button-default-active-foreground: initial;
@@ -158,8 +165,6 @@
   --boxel-button-disabled-background: initial;
   --boxel-button-disabled-border: initial;
   --boxel-button-disabled-foreground: initial;
-  --success: initial;
-  --warning: initial;
 }
 
 /* ── Dark mode ──────────────────────────────────────────────────────────────
diff --git a/packages/host/tests/integration/number-field-test.gts b/packages/host/tests/integration/number-field-test.gts
index 504e69c887b..07e6201cf0b 100644
--- a/packages/host/tests/integration/number-field-test.gts
+++ b/packages/host/tests/integration/number-field-test.gts
@@ -252,4 +252,53 @@ module('Integration | number field configuration', function (hooks) {
       .hasAttribute('min', '0', 'Extracts min from options')
       .hasAttribute('max', '100', 'Extracts max from options');
   });
+
+  // ============================================
+  // Status Ramp Tests
+  // ============================================
+
+  test('progress fill follows the four-band status ramp with inclusive thresholds', async function (assert) {
+    const mix = 'color-mix(in oklch, var(--warning), var(--success))';
+    const bands: [number, string][] = [
+      [10, 'var(--destructive)'],
+      [25, 'var(--warning)'],
+      [30, 'var(--warning)'],
+      [50, mix],
+      [60, mix],
+      [75, 'var(--success)'],
+      [90, 'var(--success)'],
+    ];
+    for (const [value, color] of bands) {
+      await renderConfiguredField(
+        NumberField,
+        value,
+        { presentation: 'progress-bar', options: { min: 0, max: 100 } },
+        'embedded',
+      );
+      // the token string itself, not the computed color: the point is which
+      // band the value lands in
+      assert
+        .dom('[data-test-field-container] [data-test-progress-bar-fill]')
+        .hasAttribute(
+          'style',
+          `width: ${value}%; background: ${color};`,
+          `${value}% fills with ${color}`,
+        );
+    }
+  });
+
+  test('score badge uses the same status ramp as the progress fill', async function (assert) {
+    await renderConfiguredField(
+      NumberField,
+      60,
+      { presentation: 'score', options: { min: 0, max: 100 } },
+      'embedded',
+    );
+    assert
+      .dom('[data-test-field-container] [data-test-score-badge]')
+      .hasAttribute(
+        'style',
+        'background: color-mix(in oklch, var(--warning), var(--success))',
+      );
+  });
 });
diff --git a/packages/host/tests/integration/structured-theme-test.gts b/packages/host/tests/integration/structured-theme-test.gts
index 3c7fba0cc1e..0c622bc0ba5 100644
--- a/packages/host/tests/integration/structured-theme-test.gts
+++ b/packages/host/tests/integration/structured-theme-test.gts
@@ -233,8 +233,25 @@ module('Integration | structured-theme', function (hooks) {
       'Poppins, sans-serif',
       'the @theme inline self-reference (var(--font-sans)) does not clobber the :root value',
     );
+    // the shadow primitives exist so a tweakcn export round-trips losslessly;
+    // a name-derivation miss (shadowX → --shadow-x, shadow2xs → --shadow-2xs)
+    // would drop them silently rather than fail
+    assert.strictEqual(card.rootVariables.shadowX, '3px');
+    assert.strictEqual(card.rootVariables.shadowY, '3px');
+    assert.strictEqual(card.rootVariables.shadowBlur, '0px');
+    assert.strictEqual(card.rootVariables.shadowSpread, '0px');
+    assert.strictEqual(card.rootVariables.shadowOpacity, '1.0');
+    assert.strictEqual(
+      card.rootVariables.shadowColor,
+      'hsl(325.78 58.18% 56.86% / 0.5)',
+    );
+    assert.strictEqual(
+      card.rootVariables.shadow2xs,
+      '3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50)',
+    );
     assert.strictEqual(card.darkModeVariables.background, '#12242e');
     assert.strictEqual(card.darkModeVariables.fontMono, 'Fira Code, monospace');
+    assert.strictEqual(card.darkModeVariables.shadowColor, '#324859');
     assert.deepEqual(
       [...(card.cssImports ?? [])],
       [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 61ace58b9b5..21e94f805d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -916,6 +916,9 @@ importers:
       '@cardstack/boxel-ui':
         specifier: workspace:*
         version: link:../boxel-ui
+      '@cardstack/local-types':
+        specifier: workspace:*
+        version: link:../local-types
       '@cardstack/runtime-common':
         specifier: workspace:*
         version: link:../runtime-common