@rovela-ai/sdk 0.15.3 → 0.16.0

package/dist/admin/styles/admin-theme.css

@@ -7,8 +7,9 @@
  * Usage: Wrap admin content with class="rovela-admin-theme"
  */
 
-/* Load Plus Jakarta Sans font from Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
+/* Plus Jakarta Sans arrives via next/font (template app/admin/layout.tsx sets
+   --admin-font-jakarta on the segment). No render-blocking @import — the
+   system stack below is the graceful fallback for stores on older templates. */
 
 /* ═══════════════════════════════════════════════════════════════════════════
    DESIGN TOKENS - CSS Variables
@@ -19,11 +20,18 @@
      COLOR PALETTE - Rovela Brand
      ───────────────────────────────────────────────────────────────────────── */
 
-  /* Primary - Emerald */
+  /* Primary - Emerald. The accent is SCARCE by design: one primary button per
+     view, active nav, links. Status colors never borrow it. */
   --admin-primary: 163 86% 37%;           /* #0CAF7D */
   --admin-primary-hover: 163 86% 32%;     /* Darker on hover */
-  --admin-primary-light: 163 86% 95%;     /* Very light tint */
+  --admin-primary-active: 163 88% 28%;    /* Pressed */
+  --admin-primary-light: 163 60% 93%;     /* Tint for active nav / selections */
   --admin-primary-foreground: 0 0% 100%;  /* White text on primary */
+  /* Accent alias — several class families (setup guide, highlights) reference
+     --admin-accent; it was previously UNDEFINED and those tints silently
+     failed. It aliases primary: one accent, everywhere. */
+  --admin-accent: 163 86% 37%;
+  --admin-accent-deep: 163 88% 26%;       /* Readable accent text on tints */
 
   /* Backgrounds - Aligned with Rovela platform */
   --admin-background: 36 36% 95%;         /* Warm Cream #F7F3ED - matches platform */
@@ -32,15 +40,16 @@
   --admin-sidebar: 36 20% 97%;            /* Very light warm gray - blends with content */
   --admin-sidebar-hover: 36 15% 93%;      /* Subtle hover */
   --admin-sidebar-border: 36 15% 88%;     /* Very subtle border */
-  --admin-sidebar-active: 163 86% 95%;    /* Light primary bg for active */
-  --admin-sidebar-active-text: 163 86% 37%; /* Primary color text */
-
-  /* Text Colors */
-  --admin-foreground: 220 20% 14%;        /* Near-black text */
-  --admin-foreground-muted: 220 10% 46%;  /* Secondary text #6B7280 */
-  --admin-foreground-subtle: 220 10% 64%; /* Tertiary/placeholder */
-  --admin-sidebar-foreground: 220 15% 25%; /* Dark text for light sidebar */
-  --admin-sidebar-foreground-muted: 220 10% 50%; /* Medium gray for inactive */
+  --admin-sidebar-active: 163 60% 93%;    /* Tinted emerald for active */
+  --admin-sidebar-active-text: 163 88% 26%; /* Deep emerald — readable on tint */
+
+  /* Text Colors — warm ink family (matches the platform's #2D3436 lineage;
+     the previous cool 220-hue grays clashed with the cream ground). */
+  --admin-foreground: 190 12% 17%;        /* Warm near-black ink */
+  --admin-foreground-muted: 190 6% 42%;   /* Secondary text (4.5:1 on cream) */
+  --admin-foreground-subtle: 190 5% 58%;  /* Tertiary/placeholder */
+  --admin-sidebar-foreground: 190 10% 22%; /* Dark text for light sidebar */
+  --admin-sidebar-foreground-muted: 190 6% 44%; /* Medium gray for inactive */
   --admin-sidebar-logo-filter: none;      /* Colored logo on light sidebar */
 
   /* Borders - Warm gray to match Rovela platform */
@@ -48,39 +57,53 @@
   --admin-border-hover: 36 15% 82%;       /* Darker on hover */
   --admin-border-focus: 163 86% 37%;      /* Primary on focus */
 
-  /* Status Colors - Aligned with Rovela platform semantic colors */
-  --admin-success: 168 100% 36%;          /* Teal #00B894 - matches platform */
-  --admin-success-light: 168 100% 95%;    /* Light teal bg */
-  --admin-success-dark: 168 100% 26%;     /* Dark teal text */
-  --admin-warning: 43 97% 71%;            /* Warm yellow #FDCB6E - matches platform */
-  --admin-warning-light: 43 97% 95%;      /* Light yellow bg */
-  --admin-warning-dark: 43 97% 40%;       /* Dark yellow text */
-  --admin-error: 0 100% 71%;              /* Soft red #FF6B6B - matches platform */
-  --admin-error-light: 0 100% 96%;        /* Light red bg */
-  --admin-error-dark: 0 100% 50%;         /* Dark red text */
-  --admin-info: 199 89% 48%;              /* Blue #0984E3 - matches platform */
-  --admin-info-light: 199 89% 96%;        /* Light blue bg */
-  --admin-info-dark: 199 89% 35%;         /* Dark blue text */
+  /* Status TONES — ONE recipe everywhere: `-light` = tinted background,
+     `-dark` = darker readable foreground (4.5:1 on its tint). Badges,
+     alerts and status chips all consume these pairs; never raw base colors
+     as text and never `base / 0.1` alpha tints (the old second recipe). */
+  --admin-success: 160 84% 33%;           /* Green base (icons, accents) */
+  --admin-success-light: 152 48% 92%;     /* #E2F5EC tinted bg */
+  --admin-success-dark: 159 83% 26%;      /* #0B7A57 readable fg */
+  --admin-warning: 40 90% 50%;            /* Amber base */
+  --admin-warning-light: 40 86% 92%;      /* #FCF0D8 tinted bg */
+  --admin-warning-dark: 39 70% 31%;       /* #8A6116 readable fg */
+  --admin-error: 4 74% 52%;               /* Red base */
+  --admin-error-light: 5 81% 94%;         /* #FCE5E3 tinted bg */
+  --admin-error-dark: 5 61% 44%;          /* #B3372C readable fg */
+  --admin-error-foreground: 0 0% 100%;    /* On solid error surfaces */
+  --admin-info: 210 70% 46%;              /* Blue base */
+  --admin-info-light: 209 70% 94%;        /* #E3EFFA tinted bg */
+  --admin-info-dark: 211 63% 40%;         /* #2563A8 readable fg */
+  /* Attention — "needs a human" (unfulfilled, action required). Distinct from
+     warning: olive, calmer, non-alarming. New in the 2026-07 redesign. */
+  --admin-attention: 74 55% 40%;
+  --admin-attention-light: 70 48% 90%;    /* #EEF2D9 tinted bg */
+  --admin-attention-dark: 71 58% 27%;     /* #5F6E1D readable fg */
 
   /* ─────────────────────────────────────────────────────────────────────────
      TYPOGRAPHY - Plus Jakarta Sans
      ───────────────────────────────────────────────────────────────────────── */
-  --admin-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --admin-font-sans: var(--admin-font-jakarta, 'Plus Jakarta Sans'), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --admin-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
 
   /* Override store font variables to use Rovela's Plus Jakarta Sans in admin */
   --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 
-  /* Font Sizes */
-  --admin-text-xs: 0.75rem;      /* 12px */
-  --admin-text-sm: 0.8125rem;    /* 13px */
-  --admin-text-base: 0.875rem;   /* 14px - base for admin */
-  --admin-text-md: 0.9375rem;    /* 15px */
-  --admin-text-lg: 1rem;         /* 16px */
-  --admin-text-xl: 1.125rem;     /* 18px */
-  --admin-text-2xl: 1.375rem;    /* 22px */
-  --admin-text-3xl: 1.625rem;    /* 26px */
+  /* Font Sizes — the Polaris inversion (2026-07 redesign): headings barely
+     bigger than body, hierarchy through WEIGHT. 13px is the working size;
+     20px page titles are the only large text. Deliberate collapses:
+     2xl == 3xl (both 20px) so legacy consumers of either land on the same
+     page-title size. */
+  --admin-text-2xs: 0.6875rem;   /* 11px - micro (counters, footnotes) */
+  --admin-text-xs: 0.75rem;      /* 12px - meta, badges, helper text */
+  --admin-text-sm: 0.8125rem;    /* 13px - body & tables (working size) */
+  --admin-text-base: 0.8125rem;  /* 13px - base for admin (was 14) */
+  --admin-text-md: 0.875rem;     /* 14px - card/section headings */
+  --admin-text-lg: 0.9375rem;    /* 15px - modal titles, prominent rows */
+  --admin-text-xl: 1rem;         /* 16px - rare emphasis */
+  --admin-text-2xl: 1.25rem;     /* 20px - stat values, page titles */
+  --admin-text-3xl: 1.25rem;     /* 20px - page titles (was 26) */
 
   /* Font Weights */
   --admin-font-normal: 400;
@@ -93,10 +116,10 @@
   --admin-leading-normal: 1.5;
   --admin-leading-relaxed: 1.625;
 
-  /* Letter Spacing */
-  --admin-tracking-tight: -0.025em;
+  /* Letter Spacing — negative tracking only at 20px+; eyebrows get +0.06em */
+  --admin-tracking-tight: -0.01em;
   --admin-tracking-normal: 0;
-  --admin-tracking-wide: 0.05em;
+  --admin-tracking-wide: 0.06em;
 
   /* ─────────────────────────────────────────────────────────────────────────
      SPACING SCALE (8px base)
@@ -123,13 +146,17 @@
   /* ─────────────────────────────────────────────────────────────────────────
      BORDERS & RADIUS - Aligned with Rovela platform scale
      ───────────────────────────────────────────────────────────────────────── */
+  /* One radius language (2026-07 redesign): 6px controls & badges, 10px
+     cards & tables, 12px modals. Never larger on functional surfaces — the
+     oversized-radius look is the #1 generic-dashboard tell. sm == md is a
+     deliberate collapse (both are "control" radius). */
   --admin-radius-none: 0;
-  --admin-radius-xs: 0.25rem;     /* 4px - XS - tiny elements */
-  --admin-radius-sm: 0.5rem;      /* 8px - SM - small elements, inputs */
-  --admin-radius-md: 0.75rem;     /* 12px - MD (default) - buttons, cards */
-  --admin-radius-lg: 1rem;        /* 16px - LG - large cards, modals */
-  --admin-radius-xl: 1.5rem;      /* 24px - XL - hero sections */
-  --admin-radius-2xl: 2rem;       /* 32px - 2XL - extra large */
+  --admin-radius-xs: 0.25rem;     /* 4px - tiny elements */
+  --admin-radius-sm: 0.375rem;    /* 6px - controls, badges, inputs */
+  --admin-radius-md: 0.375rem;    /* 6px - buttons (was 12) */
+  --admin-radius-lg: 0.625rem;    /* 10px - cards, tables (was 16) */
+  --admin-radius-xl: 0.75rem;     /* 12px - modals (was 24) */
+  --admin-radius-2xl: 1rem;       /* 16px (was 32) */
   --admin-radius-full: 9999px;    /* Pills, avatars */
 
   /* Border Widths */
@@ -139,19 +166,22 @@
   /* ─────────────────────────────────────────────────────────────────────────
      SHADOWS - Aligned with Rovela platform shadow system
      ───────────────────────────────────────────────────────────────────────── */
-  /* Fine-grained elevation scale */
-  --admin-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
-  --admin-shadow-sm: 0 2px 4px rgb(0 0 0 / 0.05);      /* Platform: shadow-rovela-sm */
-  --admin-shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);     /* Platform: shadow-rovela-md */
-  --admin-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.12);     /* Platform: shadow-rovela-lg */
-  --admin-shadow-xl: 0 16px 48px rgb(0 0 0 / 0.16);    /* Platform: shadow-rovela-xl */
-  --admin-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.20);
-
-  /* Platform shadow aliases for direct compatibility */
-  --shadow-rovela-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
-  --shadow-rovela-md: 0 4px 12px rgba(0, 0, 0, 0.08);
-  --shadow-rovela-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
-  --shadow-rovela-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
+  /* Fine-grained elevation scale — whispers, not drops. Hairline borders do
+     the separating; shadows only hint at elevation (cards) or float layers
+     (dropdowns, modals). */
+  --admin-shadow-xs: 0 1px 2px 0 rgb(24 34 33 / 0.03);
+  --admin-shadow-sm: 0 1px 2px rgb(24 34 33 / 0.04);
+  --admin-shadow-md: 0 2px 8px -2px rgb(24 34 33 / 0.08);
+  --admin-shadow-lg: 0 8px 24px -8px rgb(24 34 33 / 0.14);
+  --admin-shadow-xl: 0 16px 40px -12px rgb(24 34 33 / 0.18);
+  --admin-shadow-2xl: 0 24px 48px -12px rgb(24 34 33 / 0.22);
+
+  /* Platform shadow aliases — SAME values as the scale above (they were a
+     duplicated parallel system; now they alias). */
+  --shadow-rovela-sm: var(--admin-shadow-sm);
+  --shadow-rovela-md: var(--admin-shadow-md);
+  --shadow-rovela-lg: var(--admin-shadow-lg);
+  --shadow-rovela-xl: var(--admin-shadow-xl);
 
   /* Colored Shadows - Primary emerald glow */
   --admin-shadow-primary-sm: 0 2px 8px 0 hsl(163 86% 37% / 0.12);
@@ -168,17 +198,21 @@
   /* ─────────────────────────────────────────────────────────────────────────
      TRANSITIONS & ANIMATIONS - Aligned with Rovela platform timing
      ───────────────────────────────────────────────────────────────────────── */
-  --admin-transition-fast: 150ms ease-out;    /* Platform: duration-fast */
-  --admin-transition-base: 250ms ease-out;    /* Platform: duration-normal */
-  --admin-transition-slow: 400ms ease-out;    /* Platform: duration-slow */
-  --admin-transition-slower: 500ms ease-out;  /* Extended slow */
-
-  /* Specific transitions - using aligned base timing */
-  --admin-transition-colors: color 250ms ease-out, background-color 250ms ease-out, border-color 250ms ease-out, fill 250ms ease-out, stroke 250ms ease-out;
-  --admin-transition-opacity: opacity 250ms ease-out;
-  --admin-transition-shadow: box-shadow 250ms ease-out;
-  --admin-transition-transform: transform 250ms ease-out;
-  --admin-transition-all: all 250ms ease-out;
+  /* Snappy, decisive timing (2026-07 redesign): 140ms for color/state
+     feedback, 180ms for anything that moves. 250ms read as laggy at admin
+     interaction density. */
+  --admin-ease: cubic-bezier(0.2, 0, 0.2, 1);
+  --admin-transition-fast: 140ms var(--admin-ease);
+  --admin-transition-base: 180ms var(--admin-ease);
+  --admin-transition-slow: 280ms var(--admin-ease);
+  --admin-transition-slower: 360ms var(--admin-ease);
+
+  /* Specific transitions */
+  --admin-transition-colors: color 140ms var(--admin-ease), background-color 140ms var(--admin-ease), border-color 140ms var(--admin-ease), fill 140ms var(--admin-ease), stroke 140ms var(--admin-ease);
+  --admin-transition-opacity: opacity 140ms var(--admin-ease);
+  --admin-transition-shadow: box-shadow 180ms var(--admin-ease);
+  --admin-transition-transform: transform 180ms var(--admin-ease);
+  --admin-transition-all: color 140ms var(--admin-ease), background-color 140ms var(--admin-ease), border-color 140ms var(--admin-ease), box-shadow 180ms var(--admin-ease), transform 120ms var(--admin-ease), opacity 140ms var(--admin-ease);
 
   /* Rovela Easing - matches platform timing */
   --admin-ease-rovela: cubic-bezier(0.25, 0.1, 0.25, 1);
@@ -221,230 +255,13 @@
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
-   DARK MODE SUPPORT - Aligned with Rovela platform .dark class
+   NO DARK MODE — deliberate (2026-07 redesign).
+   The Rovela platform is light-only (forcedTheme="light"); the admin matches.
+   The previous dark support was ~210 triplicated lines (media query + .dark
+   class + .dark ancestor) that fractured the brand and doubled the QA surface.
+   Do not reintroduce without a platform-wide dark-mode decision.
    ═══════════════════════════════════════════════════════════════════════════ */
 
-/* Dark mode via prefers-color-scheme media query */
-@media (prefers-color-scheme: dark) {
-  .rovela-admin-theme:not(.light) {
-    /* Backgrounds - Dark blue-gray palette */
-    --admin-background: 200 10% 10%;         /* Dark blue-gray */
-    --admin-background-subtle: 200 10% 14%;  /* Slightly lighter */
-    --admin-card: 200 10% 14%;               /* Card surfaces */
-    --admin-sidebar: 200 10% 12%;            /* Slightly lighter than content bg */
-    --admin-sidebar-hover: 200 10% 18%;      /* Visible hover */
-    --admin-sidebar-border: 200 10% 20%;     /* Subtle border */
-    --admin-sidebar-active: 163 86% 15%;     /* Dark primary bg for active */
-    --admin-sidebar-active-text: 163 86% 45%; /* Primary color text */
-
-    /* Text Colors - Inverted for dark mode */
-    --admin-foreground: 36 36% 95%;          /* Cream text */
-    --admin-foreground-muted: 196 6% 60%;    /* Muted text */
-    --admin-foreground-subtle: 196 6% 50%;   /* Subtle text */
-    --admin-sidebar-foreground: 200 10% 90%; /* Light text for dark sidebar */
-    --admin-sidebar-foreground-muted: 200 10% 60%; /* Muted gray for inactive */
-    --admin-sidebar-logo-filter: brightness(0) invert(1); /* White logo on dark sidebar */
-
-    /* Primary - Brighter emerald for dark mode */
-    --admin-primary: 163 86% 45%;            /* Brighter emerald */
-    --admin-primary-hover: 163 86% 50%;      /* Even brighter on hover */
-    --admin-primary-light: 163 86% 20%;      /* Muted primary for backgrounds */
-    --admin-primary-foreground: 200 10% 10%; /* Dark text on primary */
-
-    /* Borders - Darker warm gray */
-    --admin-border: 200 10% 20%;             /* Dark border */
-    --admin-border-hover: 200 10% 25%;       /* Slightly lighter on hover */
-    --admin-border-focus: 163 86% 45%;       /* Brighter primary on focus */
-
-    /* Status Colors - Adjusted for dark mode visibility */
-    --admin-success: 168 100% 40%;           /* Brighter teal */
-    --admin-success-light: 168 100% 15%;     /* Dark teal bg */
-    --admin-success-dark: 168 100% 60%;      /* Light teal text */
-    --admin-warning: 43 97% 50%;             /* Adjusted yellow */
-    --admin-warning-light: 43 97% 15%;       /* Dark yellow bg */
-    --admin-warning-dark: 43 97% 70%;        /* Light yellow text */
-    --admin-error: 0 100% 65%;               /* Brighter red */
-    --admin-error-light: 0 100% 15%;         /* Dark red bg */
-    --admin-error-dark: 0 100% 75%;          /* Light red text */
-    --admin-info: 199 89% 55%;               /* Brighter blue */
-    --admin-info-light: 199 89% 15%;         /* Dark blue bg */
-    --admin-info-dark: 199 89% 70%;          /* Light blue text */
-
-    /* Shadows - More visible in dark mode */
-    --admin-shadow-sm: 0 2px 4px rgb(0 0 0 / 0.3);
-    --admin-shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
-    --admin-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
-    --admin-shadow-xl: 0 16px 48px rgb(0 0 0 / 0.6);
-
-    /* Standard variable mappings for dark mode */
-    --background: var(--admin-background);
-    --foreground: var(--admin-foreground);
-    --card: var(--admin-card);
-    --card-foreground: var(--admin-foreground);
-    --popover: var(--admin-card);
-    --popover-foreground: var(--admin-foreground);
-    --primary: var(--admin-primary);
-    --primary-foreground: var(--admin-primary-foreground);
-    --secondary: var(--admin-background-subtle);
-    --secondary-foreground: var(--admin-foreground);
-    --muted: var(--admin-background-subtle);
-    --muted-foreground: var(--admin-foreground-muted);
-    --accent: var(--admin-primary-light);
-    --accent-foreground: var(--admin-primary);
-    --border: var(--admin-border);
-    --input: var(--admin-border);
-    --ring: var(--admin-primary);
-    --destructive: var(--admin-error);
-    --destructive-foreground: 0 0% 100%;
-  }
-}
-
-/* Explicit dark mode class (for manual toggle) */
-.rovela-admin-theme.dark {
-  /* Backgrounds - Dark blue-gray palette */
-  --admin-background: 200 10% 10%;
-  --admin-background-subtle: 200 10% 14%;
-  --admin-card: 200 10% 14%;
-  --admin-sidebar: 200 10% 12%;            /* Slightly lighter than content bg */
-  --admin-sidebar-hover: 200 10% 18%;      /* Visible hover */
-  --admin-sidebar-border: 200 10% 20%;     /* Subtle border */
-  --admin-sidebar-active: 163 86% 15%;     /* Dark primary bg for active */
-  --admin-sidebar-active-text: 163 86% 45%; /* Primary color text */
-
-  /* Text Colors */
-  --admin-foreground: 36 36% 95%;
-  --admin-foreground-muted: 196 6% 60%;
-  --admin-foreground-subtle: 196 6% 50%;
-  --admin-sidebar-foreground: 200 10% 90%; /* Light text for dark sidebar */
-  --admin-sidebar-foreground-muted: 200 10% 60%; /* Muted gray for inactive */
-  --admin-sidebar-logo-filter: brightness(0) invert(1); /* White logo on dark sidebar */
-
-  /* Primary */
-  --admin-primary: 163 86% 45%;
-  --admin-primary-hover: 163 86% 50%;
-  --admin-primary-light: 163 86% 20%;
-  --admin-primary-foreground: 200 10% 10%;
-
-  /* Borders */
-  --admin-border: 200 10% 20%;
-  --admin-border-hover: 200 10% 25%;
-  --admin-border-focus: 163 86% 45%;
-
-  /* Status Colors */
-  --admin-success: 168 100% 40%;
-  --admin-success-light: 168 100% 15%;
-  --admin-success-dark: 168 100% 60%;
-  --admin-warning: 43 97% 50%;
-  --admin-warning-light: 43 97% 15%;
-  --admin-warning-dark: 43 97% 70%;
-  --admin-error: 0 100% 65%;
-  --admin-error-light: 0 100% 15%;
-  --admin-error-dark: 0 100% 75%;
-  --admin-info: 199 89% 55%;
-  --admin-info-light: 199 89% 15%;
-  --admin-info-dark: 199 89% 70%;
-
-  /* Shadows */
-  --admin-shadow-sm: 0 2px 4px rgb(0 0 0 / 0.3);
-  --admin-shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
-  --admin-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
-  --admin-shadow-xl: 0 16px 48px rgb(0 0 0 / 0.6);
-
-  /* Standard variable mappings */
-  --background: var(--admin-background);
-  --foreground: var(--admin-foreground);
-  --card: var(--admin-card);
-  --card-foreground: var(--admin-foreground);
-  --popover: var(--admin-card);
-  --popover-foreground: var(--admin-foreground);
-  --primary: var(--admin-primary);
-  --primary-foreground: var(--admin-primary-foreground);
-  --secondary: var(--admin-background-subtle);
-  --secondary-foreground: var(--admin-foreground);
-  --muted: var(--admin-background-subtle);
-  --muted-foreground: var(--admin-foreground-muted);
-  --accent: var(--admin-primary-light);
-  --accent-foreground: var(--admin-primary);
-  --border: var(--admin-border);
-  --input: var(--admin-border);
-  --ring: var(--admin-primary);
-  --destructive: var(--admin-error);
-  --destructive-foreground: 0 0% 100%;
-}
-
-/* Dark mode when .dark class is on ancestor (next-themes pattern) */
-.dark .rovela-admin-theme {
-  /* Backgrounds - Dark blue-gray palette */
-  --admin-background: 200 10% 10%;
-  --admin-background-subtle: 200 10% 14%;
-  --admin-card: 200 10% 14%;
-  --admin-sidebar: 200 10% 12%;            /* Slightly lighter than content bg */
-  --admin-sidebar-hover: 200 10% 18%;      /* Visible hover */
-  --admin-sidebar-border: 200 10% 20%;     /* Subtle border */
-  --admin-sidebar-active: 163 86% 15%;     /* Dark primary bg for active */
-  --admin-sidebar-active-text: 163 86% 45%; /* Primary color text */
-
-  /* Text Colors */
-  --admin-foreground: 36 36% 95%;
-  --admin-foreground-muted: 196 6% 60%;
-  --admin-foreground-subtle: 196 6% 50%;
-  --admin-sidebar-foreground: 200 10% 90%; /* Light text for dark sidebar */
-  --admin-sidebar-foreground-muted: 200 10% 60%; /* Muted gray for inactive */
-  --admin-sidebar-logo-filter: brightness(0) invert(1); /* White logo on dark sidebar */
-
-  /* Primary */
-  --admin-primary: 163 86% 45%;
-  --admin-primary-hover: 163 86% 50%;
-  --admin-primary-light: 163 86% 20%;
-  --admin-primary-foreground: 200 10% 10%;
-
-  /* Borders */
-  --admin-border: 200 10% 20%;
-  --admin-border-hover: 200 10% 25%;
-  --admin-border-focus: 163 86% 45%;
-
-  /* Status Colors */
-  --admin-success: 168 100% 40%;
-  --admin-success-light: 168 100% 15%;
-  --admin-success-dark: 168 100% 60%;
-  --admin-warning: 43 97% 50%;
-  --admin-warning-light: 43 97% 15%;
-  --admin-warning-dark: 43 97% 70%;
-  --admin-error: 0 100% 65%;
-  --admin-error-light: 0 100% 15%;
-  --admin-error-dark: 0 100% 75%;
-  --admin-info: 199 89% 55%;
-  --admin-info-light: 199 89% 15%;
-  --admin-info-dark: 199 89% 70%;
-
-  /* Shadows */
-  --admin-shadow-sm: 0 2px 4px rgb(0 0 0 / 0.3);
-  --admin-shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
-  --admin-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
-  --admin-shadow-xl: 0 16px 48px rgb(0 0 0 / 0.6);
-
-  /* Standard variable mappings */
-  --background: var(--admin-background);
-  --foreground: var(--admin-foreground);
-  --card: var(--admin-card);
-  --card-foreground: var(--admin-foreground);
-  --popover: var(--admin-card);
-  --popover-foreground: var(--admin-foreground);
-  --primary: var(--admin-primary);
-  --primary-foreground: var(--admin-primary-foreground);
-  --secondary: var(--admin-background-subtle);
-  --secondary-foreground: var(--admin-foreground);
-  --muted: var(--admin-background-subtle);
-  --muted-foreground: var(--admin-foreground-muted);
-  --accent: var(--admin-primary-light);
-  --accent-foreground: var(--admin-primary);
-  --border: var(--admin-border);
-  --input: var(--admin-border);
-  --ring: var(--admin-primary);
-  --destructive: var(--admin-error);
-  --destructive-foreground: 0 0% 100%;
-}
-
 /* ═══════════════════════════════════════════════════════════════════════════
    BASE STYLES
    ═══════════════════════════════════════════════════════════════════════════ */
@@ -465,6 +282,53 @@
   border-color: hsl(var(--admin-border));
 }
 
+/* ═══════════════════════════════════════════════════════════════════════════
+   SCOPE FENCE — storefront-bleed isolation (2026-07 redesign, load-bearing)
+
+   The admin renders inside the merchant's own Next app: the storefront's
+   globals.css (brand fonts, `@layer base` heading sizes — often display
+   clamp() sizes of 56-96px) is in scope on /admin. Historically only
+   .admin-page-title / .admin-card-title neutralized this, so any BARE
+   heading inherited merchant typography (the documented giant-h1 bug class).
+
+   This fence pins every bare element to the admin system STRUCTURALLY:
+   selectors here are (0,1,1) — they beat the store's layered base rules AND
+   single-class Tailwind utilities regardless of load order, while any
+   .admin-* class (0,2,0) still wins over the fence. Bare headings are
+   deliberately modest (hierarchy through weight — the Polaris inversion);
+   pages that want the real page-title anatomy use .admin-page-title.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme :is(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--admin-font-sans);
+  color: hsl(var(--admin-foreground));
+  line-height: 1.35;
+  letter-spacing: var(--admin-tracking-normal);
+}
+.rovela-admin-theme h1 {
+  font-size: var(--admin-text-2xl);   /* 20px */
+  font-weight: var(--admin-font-semibold);
+  letter-spacing: var(--admin-tracking-tight);
+}
+.rovela-admin-theme h2 {
+  font-size: var(--admin-text-lg);    /* 15px */
+  font-weight: var(--admin-font-semibold);
+}
+.rovela-admin-theme h3 {
+  font-size: var(--admin-text-md);    /* 14px */
+  font-weight: var(--admin-font-semibold);
+}
+.rovela-admin-theme :is(h4, h5, h6) {
+  font-size: var(--admin-text-base);  /* 13px */
+  font-weight: var(--admin-font-semibold);
+}
+.rovela-admin-theme :is(p, span, li, td, th, dt, dd, label, a) {
+  font-family: var(--admin-font-sans);
+}
+.rovela-admin-theme :is(button, input, select, textarea) {
+  font-family: var(--admin-font-sans);
+}
+
 /* ═══════════════════════════════════════════════════════════════════════════
    LAYOUT STRUCTURE
    ═══════════════════════════════════════════════════════════════════════════ */
@@ -531,7 +395,7 @@
 
 .rovela-admin-theme .admin-heading-1 {
   font-size: var(--admin-text-3xl);
-  font-weight: var(--admin-font-bold);
+  font-weight: var(--admin-font-semibold);
   line-height: var(--admin-leading-tight);
   letter-spacing: var(--admin-tracking-tight);
   color: hsl(var(--admin-foreground));
@@ -554,8 +418,8 @@
    unlayered (like the rest of admin-theme.css), so it wins over the store's
    layered base heading regardless of the store's typography. */
 .rovela-admin-theme .admin-page-title {
-  font-size: var(--admin-text-3xl);
-  font-weight: var(--admin-font-bold);
+  font-size: var(--admin-text-3xl);          /* 20px — the only large text */
+  font-weight: var(--admin-font-semibold);
   line-height: var(--admin-leading-tight);
   letter-spacing: var(--admin-tracking-tight);
   color: hsl(var(--admin-foreground));
@@ -586,7 +450,7 @@
    Without this rule, browsers render the bare <h3> at ~1.17em and the title
    reads oversized against the .admin-text-sm body. */
 .rovela-admin-theme .admin-card-title {
-  font-size: var(--admin-text-lg);
+  font-size: var(--admin-text-md);           /* 14px semibold — card headings */
   font-weight: var(--admin-font-semibold);
   line-height: var(--admin-leading-tight);
   color: hsl(var(--admin-foreground));
@@ -645,19 +509,21 @@
   border-color: hsl(var(--admin-border-hover));
 }
 
+/* Card anatomy: 16px internal metrics everywhere (Polaris card spec) so
+   sibling cards share a baseline grid. */
 .rovela-admin-theme .admin-card-header {
-  padding: var(--admin-space-5) var(--admin-space-6);
-  border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
+  padding: var(--admin-space-4);
+  border-bottom: var(--admin-border-width) solid hsl(var(--admin-border) / 0.6);
 }
 
 .rovela-admin-theme .admin-card-body {
-  padding: var(--admin-space-6);
+  padding: var(--admin-space-4);
 }
 
 .rovela-admin-theme .admin-card-footer {
-  padding: var(--admin-space-4) var(--admin-space-6);
-  border-top: var(--admin-border-width) solid hsl(var(--admin-border));
-  background: hsl(var(--admin-background-subtle) / 0.5);
+  padding: var(--admin-space-3) var(--admin-space-4);
+  border-top: var(--admin-border-width) solid hsl(var(--admin-border) / 0.6);
+  background: hsl(var(--admin-background-subtle) / 0.35);
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -667,7 +533,7 @@
 .rovela-admin-theme .admin-input {
   display: flex;
   width: 100%;
-  height: 2.5rem; /* 40px */
+  height: 2.25rem; /* 36px — form-context control height */
   padding: 0 var(--admin-space-3);
   font-family: var(--admin-font-sans);
   font-size: var(--admin-text-base);
@@ -786,13 +652,18 @@
    BUTTON COMPONENTS
    ═══════════════════════════════════════════════════════════════════════════ */
 
+/* Buttons — the premium press model (2026-07 redesign): NO glows, NO upward
+   hover lift (both read as template flair). Feedback is a decisive shade
+   change on hover, a 0.5px downward press + darker shade on :active (the
+   button physically responds under the cursor), and a soft accent ring on
+   keyboard focus. One primary per view. */
 .rovela-admin-theme .admin-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--admin-space-2);
-  height: 2.5rem;
-  padding: 0 var(--admin-space-4);
+  height: 2.25rem;                 /* 36px form-context (was 40) */
+  padding: 0 var(--admin-space-3-5);
   font-family: var(--admin-font-sans);
   font-size: var(--admin-text-base);
   font-weight: var(--admin-font-medium);
@@ -810,73 +681,75 @@
   cursor: not-allowed;
 }
 
+.rovela-admin-theme .admin-btn:active:not(:disabled) {
+  transform: translateY(0.5px);
+}
+
 .rovela-admin-theme .admin-btn:focus-visible {
-  outline: 2px solid hsl(var(--admin-primary));
-  outline-offset: 2px;
+  outline: none;
+  box-shadow: 0 0 0 3px hsl(var(--admin-primary) / 0.25);
 }
 
-/* Primary Button - Enhanced with Rovela glow */
+/* Primary Button */
 .rovela-admin-theme .admin-btn-primary {
   background: hsl(var(--admin-primary));
   color: hsl(var(--admin-primary-foreground));
-  box-shadow: 0 1px 3px 0 hsl(var(--admin-primary) / 0.2);
+  box-shadow: var(--admin-shadow-xs);
 }
 
 .rovela-admin-theme .admin-btn-primary:hover:not(:disabled) {
   background: hsl(var(--admin-primary-hover));
-  box-shadow: 0 0 20px hsl(var(--admin-primary) / 0.4), 0 4px 12px hsl(var(--admin-primary) / 0.25);
-  transform: translateY(-1px);
 }
 
 .rovela-admin-theme .admin-btn-primary:active:not(:disabled) {
-  background: hsl(var(--admin-primary-hover));
-  box-shadow: 0 0 10px hsl(var(--admin-primary) / 0.3);
-  transform: translateY(0);
+  background: hsl(var(--admin-primary-active));
 }
 
-/* Secondary Button */
+/* Secondary Button — white + hairline */
 .rovela-admin-theme .admin-btn-secondary {
   background: hsl(var(--admin-card));
   color: hsl(var(--admin-foreground));
   border-color: hsl(var(--admin-border));
+  box-shadow: var(--admin-shadow-xs);
 }
 
 .rovela-admin-theme .admin-btn-secondary:hover:not(:disabled) {
-  background: hsl(var(--admin-background-subtle));
+  background: hsl(36 30% 98%);
   border-color: hsl(var(--admin-border-hover));
 }
 
 .rovela-admin-theme .admin-btn-secondary:active:not(:disabled) {
-  background: hsl(var(--admin-background-subtle));
-  box-shadow: var(--admin-shadow-inner);
+  background: hsl(var(--admin-background-subtle) / 0.6);
 }
 
 /* Ghost Button */
 .rovela-admin-theme .admin-btn-ghost {
   background: transparent;
-  color: hsl(var(--admin-foreground));
+  color: hsl(var(--admin-foreground-muted));
 }
 
 .rovela-admin-theme .admin-btn-ghost:hover:not(:disabled) {
-  background: hsl(var(--admin-background-subtle));
+  background: hsl(var(--admin-foreground) / 0.05);
+  color: hsl(var(--admin-foreground));
 }
 
-/* Destructive Button - Enhanced with glow */
+/* Destructive Button — solid error surface */
 .rovela-admin-theme .admin-btn-destructive {
   background: hsl(var(--admin-error));
-  color: white;
-  box-shadow: 0 1px 3px 0 hsl(var(--admin-error) / 0.2);
+  color: hsl(var(--admin-error-foreground));
+  box-shadow: var(--admin-shadow-xs);
 }
 
 .rovela-admin-theme .admin-btn-destructive:hover:not(:disabled) {
   background: hsl(var(--admin-error-dark));
-  box-shadow: 0 0 20px hsl(var(--admin-error) / 0.4), 0 4px 12px hsl(var(--admin-error) / 0.25);
-  transform: translateY(-1px);
 }
 
 .rovela-admin-theme .admin-btn-destructive:active:not(:disabled) {
-  box-shadow: 0 0 10px hsl(var(--admin-error) / 0.3);
-  transform: translateY(0);
+  background: hsl(var(--admin-error-dark));
+}
+
+.rovela-admin-theme .admin-btn-destructive:focus-visible {
+  box-shadow: 0 0 0 3px hsl(var(--admin-error) / 0.3);
 }
 
 /* Button Sizes */
@@ -906,6 +779,9 @@
    BADGE COMPONENTS
    ═══════════════════════════════════════════════════════════════════════════ */
 
+/* Badges — six tones, ONE recipe (tinted bg + darker fg), 6px radius (a
+   soft rectangle, not a pill — pills at 12px read as noise in dense tables),
+   past-tense ≤2-word labels. The same status is the same color everywhere. */
 .rovela-admin-theme .admin-badge {
   display: inline-flex;
   align-items: center;
@@ -914,10 +790,15 @@
   font-size: var(--admin-text-xs);
   font-weight: var(--admin-font-medium);
   line-height: var(--admin-leading-normal);
-  border-radius: var(--admin-radius-full);
+  border-radius: var(--admin-radius-sm);
   white-space: nowrap;
 }
 
+.rovela-admin-theme .admin-badge-attention {
+  background: hsl(var(--admin-attention-light));
+  color: hsl(var(--admin-attention-dark));
+}
+
 .rovela-admin-theme .admin-badge-success {
   background: hsl(var(--admin-success-light));
   color: hsl(var(--admin-success-dark));
@@ -1042,28 +923,31 @@
   background: hsl(var(--admin-card));
 }
 
+/* Index-table anatomy (2026-07 redesign): 13px cells with tabular numerals,
+   ~38px rows (8px vertical padding), 1px hairline separators — never zebra —
+   quiet row hover, sentence-case 12px header labels (uppercase shouting was
+   the old look; weight + color carry the hierarchy now). */
 .rovela-admin-theme .admin-table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--admin-text-base);
+  font-variant-numeric: tabular-nums;
 }
 
 .rovela-admin-theme .admin-table th {
-  padding: var(--admin-space-3) var(--admin-space-4);
+  padding: var(--admin-space-2-5) var(--admin-space-4);
   font-size: var(--admin-text-xs);
   font-weight: var(--admin-font-semibold);
-  text-transform: uppercase;
-  letter-spacing: var(--admin-tracking-wide);
   color: hsl(var(--admin-foreground-muted));
   background: transparent;
   text-align: left;
-  border-bottom: 2px solid hsl(var(--admin-border));
+  border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
 }
 
 .rovela-admin-theme .admin-table td {
-  padding: var(--admin-space-4);
+  padding: var(--admin-space-2) var(--admin-space-4);
   color: hsl(var(--admin-foreground));
-  border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
+  border-bottom: var(--admin-border-width) solid hsl(var(--admin-border) / 0.6);
   vertical-align: middle;
 }
 
@@ -1072,11 +956,11 @@
 }
 
 .rovela-admin-theme .admin-table tbody tr {
-  transition: var(--admin-transition-colors);
+  transition: background-color 100ms var(--admin-ease);
 }
 
 .rovela-admin-theme .admin-table tbody tr:hover {
-  background: hsl(var(--admin-background-subtle) / 0.5);
+  background: hsl(36 30% 97.5%);
 }
 
 .rovela-admin-theme .admin-table-empty {
@@ -1089,13 +973,18 @@
    SIDEBAR COMPONENTS
    ═══════════════════════════════════════════════════════════════════════════ */
 
+/* Sidebar (2026-07 redesign): 240px light surface, 32px rows, 18px icons,
+   tinted-emerald active state (one of the few sanctioned accent uses),
+   uppercase 11px eyebrow group labels. Labels always visible — no icon rail
+   for a merchant audience. */
 .rovela-admin-theme .admin-sidebar {
   display: flex;
   flex-direction: column;
-  width: 16rem;
+  width: 15rem;                     /* 240px (was 256) */
   min-height: 100vh;
   background: hsl(var(--admin-sidebar));
   color: hsl(var(--admin-sidebar-foreground));
+  border-right: var(--admin-border-width) solid hsl(var(--admin-sidebar-border));
   flex-shrink: 0;
 }
 
@@ -1190,28 +1079,27 @@
 }
 
 .rovela-admin-theme .admin-sidebar-section-title {
-  /* Tightened from 8/16px → 4/8px vertical, saves 12px per section heading
-     across the four groups (Main / Catalog / Sales + the optional Features). */
-  padding: var(--admin-space-1) var(--admin-space-3);
-  padding-top: var(--admin-space-2);
-  font-size: var(--admin-text-xs);
-  font-weight: var(--admin-font-medium);
-  text-transform: none;
-  letter-spacing: var(--admin-tracking-normal);
-  color: hsl(var(--admin-sidebar-foreground-muted) / 0.7);
+  /* Eyebrow group label — the platform's signature uppercase-tracked micro
+     type. Encodes grouping structurally instead of extra whitespace. */
+  padding: var(--admin-space-1) var(--admin-space-2-5);
+  padding-top: var(--admin-space-3);
+  font-size: var(--admin-text-2xs);
+  font-weight: var(--admin-font-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--admin-tracking-wide);
+  color: hsl(var(--admin-sidebar-foreground-muted) / 0.75);
 }
 
 .rovela-admin-theme .admin-sidebar-item {
   display: flex;
   align-items: center;
-  gap: var(--admin-space-3);
-  /* Tightened from space-2-5 (10px) → space-1-5 (6px) vertical, saves ~8px
-     per row across 12 rows (~96px). Tap target stays at ~36px (icon 20px +
-     padding 12px + leading) — well above the 32px admin standard. */
-  padding: var(--admin-space-1-5) var(--admin-space-3);
+  gap: var(--admin-space-2-5);
+  /* 32px row: 13px/500 label + 18px icon + 7px vertical padding. */
+  padding: 0.4375rem var(--admin-space-2-5);
   font-size: var(--admin-text-sm);
+  font-weight: var(--admin-font-medium);
   color: hsl(var(--admin-sidebar-foreground-muted));
-  border-radius: var(--admin-radius-md);
+  border-radius: var(--admin-radius-sm);
   transition: var(--admin-transition-colors);
   cursor: pointer;
   text-decoration: none;
@@ -1219,14 +1107,23 @@
 }
 
 .rovela-admin-theme .admin-sidebar-item:hover {
-  background: hsl(var(--admin-sidebar-hover));
+  background: hsl(var(--admin-foreground) / 0.04);
   color: hsl(var(--admin-sidebar-foreground));
 }
 
+.rovela-admin-theme .admin-sidebar-item:active {
+  background: hsl(var(--admin-foreground) / 0.07);
+}
+
+.rovela-admin-theme .admin-sidebar-item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px hsl(var(--admin-primary) / 0.35);
+}
+
 .rovela-admin-theme .admin-sidebar-item.active {
   background: hsl(var(--admin-sidebar-active));
   color: hsl(var(--admin-sidebar-active-text));
-  font-weight: var(--admin-font-medium);
+  font-weight: var(--admin-font-semibold);
 }
 
 .rovela-admin-theme .admin-sidebar-item.active .admin-sidebar-item-icon {
@@ -1234,16 +1131,16 @@
 }
 
 .rovela-admin-theme .admin-sidebar-item-icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
   flex-shrink: 0;
 }
 
 /* Sidebar item icon (svg) - ensure consistent sizing */
 .rovela-admin-theme .admin-sidebar-item svg,
 .rovela-admin-theme .admin-sidebar-item-svg {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
   flex-shrink: 0;
 }
 
@@ -1271,18 +1168,24 @@
   gap: var(--admin-space-1-5);
 }
 
+/* Footer links behave like nav rows (hover surface, radius) — consistent
+   interaction grammar top to bottom of the sidebar. */
 .rovela-admin-theme .admin-sidebar-footer-link {
   display: flex;
   align-items: center;
-  gap: var(--admin-space-2);
+  gap: var(--admin-space-2-5);
+  padding: 0.375rem var(--admin-space-2-5);
   font-size: var(--admin-text-sm);
-  color: hsl(var(--admin-sidebar-foreground-muted) / 0.6);
+  font-weight: var(--admin-font-medium);
+  border-radius: var(--admin-radius-sm);
+  color: hsl(var(--admin-sidebar-foreground-muted));
   text-decoration: none;
   transition: var(--admin-transition-colors);
 }
 
 .rovela-admin-theme .admin-sidebar-footer-link:hover {
-  color: hsl(var(--admin-sidebar-foreground-muted));
+  background: hsl(var(--admin-foreground) / 0.04);
+  color: hsl(var(--admin-sidebar-foreground));
 }
 
 /* Powered by Rovela link */
@@ -2017,10 +1920,13 @@
   min-width: 0;
 }
 
+/* Stat/KPI card — the calm band (2026-07 redesign): 11px uppercase label,
+   20px tabular value, no gradient washes (functional surfaces stay flat),
+   hover only hints when the card links somewhere. */
 .rovela-admin-theme .admin-stat-card {
   display: block;
   position: relative;
-  padding: var(--admin-space-6);
+  padding: var(--admin-space-4);
   background: hsl(var(--admin-card));
   border: var(--admin-border-width) solid hsl(var(--admin-border));
   border-radius: var(--admin-radius-lg);
@@ -2035,46 +1941,37 @@
   border-color: hsl(var(--admin-border-hover));
 }
 
-.rovela-admin-theme .admin-stat-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, hsl(var(--admin-primary) / 0.03) 0%, transparent 60%);
-  opacity: 0;
-  transition: var(--admin-transition-opacity);
-  pointer-events: none;
-}
-
-.rovela-admin-theme .admin-stat-card:hover::before {
-  opacity: 1;
-}
-
 .rovela-admin-theme .admin-stat-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 2.75rem;
-  height: 2.75rem;
-  background: hsl(var(--admin-primary-light));
-  color: hsl(var(--admin-primary));
-  border-radius: var(--admin-radius-lg);
+  width: 2.25rem;
+  height: 2.25rem;
+  background: hsl(var(--admin-primary) / 0.08);
+  color: hsl(var(--admin-accent-deep));
+  border-radius: var(--admin-radius-sm);
 }
 
 .rovela-admin-theme .admin-stat-icon svg {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
 }
 
 .rovela-admin-theme .admin-stat-value {
   font-size: var(--admin-text-2xl);
-  font-weight: var(--admin-font-bold);
+  font-weight: var(--admin-font-semibold);
+  letter-spacing: var(--admin-tracking-tight);
+  font-variant-numeric: tabular-nums;
   color: hsl(var(--admin-foreground));
   line-height: 1.2;
 }
 
 .rovela-admin-theme .admin-stat-label {
-  font-size: var(--admin-text-sm);
+  font-size: var(--admin-text-2xs);
+  font-weight: var(--admin-font-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--admin-tracking-wide);
   color: hsl(var(--admin-foreground-muted));
 }
 
@@ -2273,21 +2170,11 @@
 }
 
 /* Active indicator bar for nav items */
+/* Left indicator bar RETIRED (2026-07 redesign): the tinted active surface
+   carries the state on its own; bar + tint was double signaling. Rule kept
+   (display:none) because AdminNav still renders the element. */
 .rovela-admin-theme .admin-sidebar-indicator {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 1.5rem;
-  width: 3px;
-  border-radius: 0 var(--admin-radius-full) var(--admin-radius-full) 0;
-  background: hsl(var(--admin-sidebar-active-text));
-  opacity: 0;
-  transition: opacity 0.2s var(--admin-ease-rovela);
-}
-
-.rovela-admin-theme .admin-sidebar-item.active .admin-sidebar-indicator {
-  opacity: 1;
+  display: none;
 }
 
 /* View store link button */
@@ -2444,28 +2331,28 @@
 
 /* Status-specific badge variants for orders */
 .rovela-admin-theme .admin-badge-pending {
-  background: hsl(var(--admin-warning) / 0.1);
-  color: hsl(var(--admin-warning));
+  background: hsl(var(--admin-warning-light));
+  color: hsl(var(--admin-warning-dark));
 }
 
 .rovela-admin-theme .admin-badge-paid {
-  background: hsl(var(--admin-success) / 0.1);
-  color: hsl(var(--admin-success));
+  background: hsl(var(--admin-success-light));
+  color: hsl(var(--admin-success-dark));
 }
 
 .rovela-admin-theme .admin-badge-shipped {
-  background: hsl(var(--admin-info) / 0.1);
-  color: hsl(var(--admin-info));
+  background: hsl(var(--admin-info-light));
+  color: hsl(var(--admin-info-dark));
 }
 
 .rovela-admin-theme .admin-badge-delivered {
-  background: hsl(var(--admin-primary) / 0.1);
-  color: hsl(var(--admin-primary));
+  background: hsl(var(--admin-success-light));
+  color: hsl(var(--admin-success-dark));
 }
 
 .rovela-admin-theme .admin-badge-cancelled {
-  background: hsl(var(--admin-error) / 0.1);
-  color: hsl(var(--admin-error));
+  background: hsl(var(--admin-error-light));
+  color: hsl(var(--admin-error-dark));
 }
 
 .rovela-admin-theme .admin-badge-refunded {
@@ -2475,13 +2362,13 @@
 
 /* Out of stock variant */
 .rovela-admin-theme .admin-badge-out-of-stock {
-  background: hsl(var(--admin-error) / 0.1);
-  color: hsl(var(--admin-error));
+  background: hsl(var(--admin-error-light));
+  color: hsl(var(--admin-error-dark));
 }
 
 .rovela-admin-theme .admin-badge-low-stock {
-  background: hsl(var(--admin-warning) / 0.1);
-  color: hsl(var(--admin-warning));
+  background: hsl(var(--admin-warning-light));
+  color: hsl(var(--admin-warning-dark));
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -2583,17 +2470,18 @@
    TABLE HEADER STYLES
    ═══════════════════════════════════════════════════════════════════════════ */
 
+/* Duplicate of .admin-table th kept for the components that target
+   .admin-table-header directly — values MUST stay in lockstep with the
+   canonical table header above. */
 .rovela-admin-theme .admin-table-header {
   background: transparent;
-  border-bottom: 2px solid hsl(var(--admin-border));
+  border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
 }
 
 .rovela-admin-theme .admin-table-header th {
-  padding: var(--admin-space-3) var(--admin-space-4);
+  padding: var(--admin-space-2-5) var(--admin-space-4);
   font-size: var(--admin-text-xs);
   font-weight: var(--admin-font-semibold);
-  text-transform: uppercase;
-  letter-spacing: var(--admin-tracking-wide);
   color: hsl(var(--admin-foreground-muted));
   text-align: left;
   background: transparent;
@@ -2655,13 +2543,13 @@
 }
 
 .rovela-admin-theme .admin-badge-active {
-  background: hsl(var(--admin-success) / 0.1);
-  color: hsl(var(--admin-success));
+  background: hsl(var(--admin-success-light));
+  color: hsl(var(--admin-success-dark));
 }
 
 .rovela-admin-theme .admin-badge-archived {
-  background: hsl(var(--admin-error) / 0.1);
-  color: hsl(var(--admin-error));
+  background: hsl(var(--admin-error-light));
+  color: hsl(var(--admin-error-dark));
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -2669,13 +2557,13 @@
    ═══════════════════════════════════════════════════════════════════════════ */
 
 .rovela-admin-theme .admin-badge-verified {
-  background: hsl(var(--admin-success) / 0.1);
-  color: hsl(var(--admin-success));
+  background: hsl(var(--admin-success-light));
+  color: hsl(var(--admin-success-dark));
 }
 
 .rovela-admin-theme .admin-badge-unverified {
-  background: hsl(var(--admin-warning) / 0.1);
-  color: hsl(var(--admin-warning));
+  background: hsl(var(--admin-warning-light));
+  color: hsl(var(--admin-warning-dark));
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -3500,16 +3388,18 @@
   cursor: not-allowed;
 }
 
+/* Active chip: solid emerald (the ops-console + platform pill grammar) —
+   unambiguous selected state, no squinting at outline tints. */
 .rovela-admin-theme .admin-chip-active {
   border-color: hsl(var(--admin-primary));
-  color: hsl(var(--admin-primary));
-  background: hsl(var(--admin-primary) / 0.08);
+  color: hsl(var(--admin-primary-foreground));
+  background: hsl(var(--admin-primary));
 }
 
 .rovela-admin-theme .admin-chip-active:hover:not(:disabled) {
-  border-color: hsl(var(--admin-primary));
-  background: hsl(var(--admin-primary) / 0.12);
-  color: hsl(var(--admin-primary));
+  border-color: hsl(var(--admin-primary-hover));
+  background: hsl(var(--admin-primary-hover));
+  color: hsl(var(--admin-primary-foreground));
 }
 
 /* Bulk action bar — replaces the filter row when one or more rows are
@@ -3658,15 +3548,17 @@
   color: hsl(var(--admin-foreground-muted));
 }
 
-/* Danger button (used for the bulk Delete action) */
+/* Danger button — ALIAS of .admin-btn-destructive (it was a redundant near
+   duplicate; values must stay in lockstep with the destructive button). */
 .rovela-admin-theme .admin-btn-danger {
   background: hsl(var(--admin-error));
-  color: hsl(var(--admin-error-foreground, 0 0% 100%));
-  border: 1px solid hsl(var(--admin-error));
+  color: hsl(var(--admin-error-foreground));
+  border: 1px solid transparent;
+  box-shadow: var(--admin-shadow-xs);
 }
 
 .rovela-admin-theme .admin-btn-danger:hover:not(:disabled) {
-  background: hsl(var(--admin-error) / 0.9);
+  background: hsl(var(--admin-error-dark));
 }
 
 .rovela-admin-theme .admin-btn-danger:disabled {