panda-core 0.12.2 → 1.1.0

data/app/assets/tailwind/application.css

@@ -1,30 +1,66 @@
 @import 'tailwindcss';
 
 @theme {
-  /* Legacy colors */
-  --color-white: var(--color-white);
-  --color-black: var(--color-black);
-  --color-light: var(--color-light);
-  --color-mid: var(--color-mid);
-  --color-dark: var(--color-dark);
-  --color-highlight: var(--color-highlight);
-  --color-active: var(--color-active);
-  --color-inactive: var(--color-inactive);
-  --color-warning: var(--color-warning);
-  --color-error: var(--color-error);
-
-  /* Tailwind UI compatible primary scale */
-  --color-primary-50: var(--color-primary-50);
-  --color-primary-100: var(--color-primary-100);
-  --color-primary-200: var(--color-primary-200);
-  --color-primary-300: var(--color-primary-300);
-  --color-primary-400: var(--color-primary-400);
-  --color-primary-500: var(--color-primary-500);
-  --color-primary-600: var(--color-primary-600);
-  --color-primary-700: var(--color-primary-700);
-  --color-primary-800: var(--color-primary-800);
-  --color-primary-900: var(--color-primary-900);
-  --color-primary-950: var(--color-primary-950);
+  /* Custom spacing for page tree indentation */
+  --spacing-18: 4.5rem;
+
+  /* Legacy colors - DEPRECATED: Use primary-* scale instead */
+  /* Fallback values ensure UI is visible even without data-theme attribute */
+  --color-white: #f9f9f9;
+  --color-black: #1a161d;
+  --color-light: #f1f9fa;
+  --color-mid: #3c879e;
+  --color-dark: #182934;
+  --color-highlight: #d04014;
+  --color-active: #16a34a;
+  --color-inactive: #dbeafe;
+  --color-warning: #f59e0b;
+  --color-error: #dc2626;
+
+  /* Primary color scale (Glacier/Teal) - with fallback values */
+  --color-primary-50: #f1f9fa;
+  --color-primary-100: #dbeef2;
+  --color-primary-200: #bcdde5;
+  --color-primary-300: #83bfcf;
+  --color-primary-400: #57a3b9;
+  --color-primary-500: #3c879e;
+  --color-primary-600: #346e86;
+  --color-primary-700: #305b6e;
+  --color-primary-800: #2e4d5c;
+  --color-primary-900: #2a424f;
+  --color-primary-950: #182934;
+
+  /* Semantic colors - Success (Green) */
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-200: #bbf7d0;
+  --color-success-300: #86efac;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-success-700: #15803d;
+
+  /* Semantic colors - Error (Red) */
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-200: #fecaca;
+  --color-error-300: #fca5a5;
+  --color-error-500: #ef4444;
+  --color-error-600: #dc2626;
+  --color-error-700: #b91c1c;
+
+  /* Semantic colors - Warning (Amber) */
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+
+  /* Semantic colors - Info (Blue) */
+  --color-info-50: #eff6ff;
+  --color-info-100: #dbeafe;
+  --color-info-500: #3b82f6;
+  --color-info-600: #2563eb;
+  --color-info-700: #1d4ed8;
 
   /* Map indigo to primary for Tailwind UI compatibility */
   --color-indigo-50: var(--color-primary-50);
@@ -39,18 +75,18 @@
   --color-indigo-900: var(--color-primary-900);
   --color-indigo-950: var(--color-primary-950);
 
-  /* Gray scale */
-  --color-gray-50: var(--color-gray-50);
-  --color-gray-100: var(--color-gray-100);
-  --color-gray-200: var(--color-gray-200);
-  --color-gray-300: var(--color-gray-300);
-  --color-gray-400: var(--color-gray-400);
-  --color-gray-500: var(--color-gray-500);
-  --color-gray-600: var(--color-gray-600);
-  --color-gray-700: var(--color-gray-700);
-  --color-gray-800: var(--color-gray-800);
-  --color-gray-900: var(--color-gray-900);
-  --color-gray-950: var(--color-gray-950);
+  /* Gray scale - with fallback values */
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
 }
 
 @layer base {
@@ -58,30 +94,62 @@
     --color-white: rgb(249, 249, 249); /* #F9F9F9 */
     --color-black: rgb(26, 22, 29); /* #1A161D */
 
-    /* Legacy color variables (kept for backwards compatibility) */
-    --color-light: rgb(238, 206, 230); /* #EECEE6 */
-    --color-mid: rgb(141, 94, 183); /* #8D5EB7 */
-    --color-dark: rgb(33, 29, 73); /* #211D49 */
+    /* Legacy color variables - DEPRECATED: Map to primary scale */
+    --color-light: rgb(241, 249, 250); /* Maps to primary-50 */
+    --color-mid: rgb(60, 135, 158); /* Maps to primary-500 */
+    --color-dark: rgb(24, 41, 52); /* Maps to primary-950 */
 
     --color-highlight: rgb(208, 64, 20); /* #D04014 */
 
-    --color-active: rgb(0, 135, 85); /* #008755 */
-    --color-warning: rgb(250, 207, 142); /* #FACF8E */
-    --color-inactive: rgb(216, 247, 245); /* #d6e4f7 */
-    --color-error: rgb(245, 129, 129); /* #F58181 */
-
-    /* Full Tailwind UI compatible color scale - Primary (Purple palette) */
-    --color-primary-50: rgb(250, 245, 255); /* Very light purple */
-    --color-primary-100: rgb(243, 232, 255); /* Lighter purple */
-    --color-primary-200: rgb(233, 213, 255); /* Light purple */
-    --color-primary-300: rgb(216, 180, 254); /* Medium light purple */
-    --color-primary-400: rgb(192, 132, 252); /* Medium purple */
-    --color-primary-500: rgb(141, 94, 183); /* Main brand color (mid) */
-    --color-primary-600: rgb(120, 80, 160); /* Darker purple */
-    --color-primary-700: rgb(100, 65, 140); /* Dark purple */
-    --color-primary-800: rgb(60, 45, 100); /* Very dark purple */
-    --color-primary-900: rgb(33, 29, 73); /* Darkest (dark) */
-    --color-primary-950: rgb(24, 20, 50); /* Ultra dark */
+    --color-active: rgb(22, 163, 74); /* green-600 - success */
+    --color-warning: rgb(245, 158, 11); /* amber-500 */
+    --color-inactive: rgb(219, 234, 254); /* blue-100 */
+    --color-error: rgb(220, 38, 38); /* red-600 */
+
+    /* Primary color scale - Glacier (Teal) */
+    --color-primary-50: rgb(241, 249, 250); /* #f1f9fa */
+    --color-primary-100: rgb(219, 238, 242); /* #dbeef2 */
+    --color-primary-200: rgb(188, 221, 229); /* #bcdde5 */
+    --color-primary-300: rgb(131, 191, 207); /* #83bfcf */
+    --color-primary-400: rgb(87, 163, 185); /* #57a3b9 */
+    --color-primary-500: rgb(60, 135, 158); /* #3c879e */
+    --color-primary-600: rgb(52, 110, 134); /* #346e86 */
+    --color-primary-700: rgb(48, 91, 110); /* #305b6e */
+    --color-primary-800: rgb(46, 77, 92); /* #2e4d5c */
+    --color-primary-900: rgb(42, 66, 79); /* #2a424f */
+    --color-primary-950: rgb(24, 41, 52); /* #182934 */
+
+    /* Semantic colors - Success (Green) */
+    --color-success-50: rgb(240, 253, 244); /* green-50 */
+    --color-success-100: rgb(220, 252, 231); /* green-100 */
+    --color-success-200: rgb(187, 247, 208); /* green-200 */
+    --color-success-300: rgb(134, 239, 172); /* green-300 */
+    --color-success-500: rgb(34, 197, 94); /* green-500 */
+    --color-success-600: rgb(22, 163, 74); /* green-600 */
+    --color-success-700: rgb(21, 128, 61); /* green-700 */
+
+    /* Semantic colors - Error (Red) */
+    --color-error-50: rgb(254, 242, 242); /* red-50 */
+    --color-error-100: rgb(254, 226, 226); /* red-100 */
+    --color-error-200: rgb(254, 202, 202); /* red-200 */
+    --color-error-300: rgb(252, 165, 165); /* red-300 */
+    --color-error-500: rgb(239, 68, 68); /* red-500 */
+    --color-error-600: rgb(220, 38, 38); /* red-600 */
+    --color-error-700: rgb(185, 28, 28); /* red-700 */
+
+    /* Semantic colors - Warning (Amber) */
+    --color-warning-50: rgb(255, 251, 235); /* amber-50 */
+    --color-warning-100: rgb(254, 243, 199); /* amber-100 */
+    --color-warning-500: rgb(245, 158, 11); /* amber-500 */
+    --color-warning-600: rgb(217, 119, 6); /* amber-600 */
+    --color-warning-700: rgb(180, 83, 9); /* amber-700 */
+
+    /* Semantic colors - Info (Blue) */
+    --color-info-50: rgb(239, 246, 255); /* blue-50 */
+    --color-info-100: rgb(219, 234, 254); /* blue-100 */
+    --color-info-500: rgb(59, 130, 246); /* blue-500 */
+    --color-info-600: rgb(37, 99, 235); /* blue-600 */
+    --color-info-700: rgb(29, 78, 216); /* blue-700 */
 
     /* Gray scale for UI elements */
     --color-gray-50: rgb(249, 250, 251);
@@ -95,35 +163,114 @@
     --color-gray-800: rgb(31, 41, 55);
     --color-gray-900: rgb(17, 24, 39);
     --color-gray-950: rgb(3, 7, 18);
+
+    /*
+     * Panda admin chrome tokens — opt-in theming for the residual gem-rendered
+     * admin surfaces (PanelComponent, TableComponent, TagComponent badges, form
+     * inputs, the custom-select trigger, checkbox accent). Every value below is
+     * a var() reference to an existing token, so it resolves to exactly today's
+     * literal colour — this block changes nothing visually for the default
+     * theme. Host apps (e.g. Panda CMS) that never set a theme, or that use
+     * "default"/"sky", are unaffected. A host app can override any of these
+     * tokens directly instead of adopting a whole new html[data-theme] block.
+     */
+    --panda-panel-bg: var(--color-white);
+    --panda-panel-border: var(--color-gray-200);
+    --panda-panel-radius: var(--radius-2xl);
+    --panda-table-header-bg: var(--color-gray-50);
+    --panda-table-border: var(--color-gray-200);
+    --panda-table-row-border: color-mix(in srgb, var(--color-gray-200) 70%, transparent);
+    --panda-table-cell-color: var(--color-gray-600);
+    --panda-badge-success-bg: var(--color-emerald-50);
+    --panda-badge-success-fg: var(--color-emerald-600);
+    --panda-badge-warning-bg: var(--color-amber-50);
+    --panda-badge-warning-fg: var(--color-amber-600);
+    --panda-badge-info-bg: var(--color-sky-50);
+    --panda-badge-info-fg: var(--color-sky-600);
+    --panda-badge-error-bg: var(--color-rose-50);
+    --panda-badge-error-fg: var(--color-rose-600);
+    --panda-badge-neutral-bg: var(--color-gray-100);
+    --panda-badge-neutral-fg: var(--color-gray-600);
+    --panda-input-border: var(--color-gray-300);
+    --panda-input-radius: var(--radius-xl);
+    --panda-input-focus-ring: var(--color-primary-500);
+    --panda-select-trigger-border: var(--color-gray-200);
+    --panda-checkbox-accent: var(--color-primary-500);
   }
 
+  /*
+   * NAMING NOTE (2026-07): this block was briefly named `html[data-theme='ocean']`
+   * (commit aa7f021, "Update color palette to Glacier/Teal theme"), diverging from
+   * `Panda::Core.config.available_themes`, which has always shipped
+   * `[["Default", "default"], ["Sky", "sky"]]` (since the auth migration from
+   * panda-cms). Since `available_themes` populates the theme <select> in
+   * my_profile/edit.html.erb, any user who picked the second theme before aa7f021
+   * — or since, via a host app that left available_themes at its default — has
+   * "sky" persisted in `current_theme`, not "ocean". Renaming the CSS block back
+   * to `sky` (rather than renaming the config to `ocean`) restores that match
+   * without silently losing anyone's saved preference. Do not rename this block
+   * without also migrating `Panda::Core::User#current_theme` data.
+   */
   html[data-theme='sky'] {
     --color-white: rgb(249, 249, 249); /* #F9F9F9 */
     --color-black: rgb(26, 22, 29); /* #1A161D */
 
-    /* Legacy color variables (kept for backwards compatibility) */
-    --color-light: rgb(204, 238, 242); /* #CCEEF2 */
-    --color-mid: rgb(42, 102, 159); /* #2A669F */
-    --color-dark: rgb(20, 32, 74); /* #14204A */
+    /* Legacy color variables - DEPRECATED: Map to primary scale */
+    --color-light: rgb(239, 246, 255); /* Maps to primary-50 (blue-50) */
+    --color-mid: rgb(59, 130, 246); /* Maps to primary-500 (blue-500) */
+    --color-dark: rgb(30, 58, 138); /* Maps to primary-950 (blue-950) */
+
     --color-highlight: rgb(208, 64, 20); /* #D04014 */
 
-    --color-active: rgb(69, 154, 89); /* #459A59 - darker green with better contrast */
-    --color-warning: rgb(244, 190, 102); /* #F4BE66 */
-    --color-inactive: rgb(216, 247, 245); /* #d6e4f7 */
-    --color-error: rgb(208, 64, 20); /* #D04014 */
-
-    /* Full Tailwind UI compatible color scale - Primary (Blue palette) */
-    --color-primary-50: rgb(240, 249, 255); /* Very light blue */
-    --color-primary-100: rgb(224, 242, 254); /* Lighter blue */
-    --color-primary-200: rgb(186, 230, 253); /* Light blue */
-    --color-primary-300: rgb(125, 211, 252); /* Medium light blue */
-    --color-primary-400: rgb(56, 189, 248); /* Medium blue */
-    --color-primary-500: rgb(42, 102, 159); /* Main brand color (mid) */
-    --color-primary-600: rgb(35, 85, 132); /* Darker blue */
-    --color-primary-700: rgb(28, 68, 106); /* Dark blue */
-    --color-primary-800: rgb(22, 52, 82); /* Very dark blue */
-    --color-primary-900: rgb(20, 32, 74); /* Darkest (dark) */
-    --color-primary-950: rgb(15, 24, 55); /* Ultra dark */
+    --color-active: rgb(22, 163, 74); /* green-600 - success */
+    --color-warning: rgb(245, 158, 11); /* amber-500 */
+    --color-inactive: rgb(219, 234, 254); /* blue-100 */
+    --color-error: rgb(220, 38, 38); /* red-600 */
+
+    /* Primary color scale - Sky (Blue) */
+    --color-primary-50: rgb(239, 246, 255); /* blue-50 */
+    --color-primary-100: rgb(219, 234, 254); /* blue-100 */
+    --color-primary-200: rgb(191, 219, 254); /* blue-200 */
+    --color-primary-300: rgb(147, 197, 253); /* blue-300 */
+    --color-primary-400: rgb(96, 165, 250); /* blue-400 */
+    --color-primary-500: rgb(59, 130, 246); /* blue-500 */
+    --color-primary-600: rgb(37, 99, 235); /* blue-600 */
+    --color-primary-700: rgb(29, 78, 216); /* blue-700 */
+    --color-primary-800: rgb(30, 64, 175); /* blue-800 */
+    --color-primary-900: rgb(30, 58, 138); /* blue-900 */
+    --color-primary-950: rgb(23, 37, 84); /* blue-950 */
+
+    /* Semantic colors - Success (Green) */
+    --color-success-50: rgb(240, 253, 244);
+    --color-success-100: rgb(220, 252, 231);
+    --color-success-200: rgb(187, 247, 208);
+    --color-success-300: rgb(134, 239, 172);
+    --color-success-500: rgb(34, 197, 94);
+    --color-success-600: rgb(22, 163, 74);
+    --color-success-700: rgb(21, 128, 61);
+
+    /* Semantic colors - Error (Red) */
+    --color-error-50: rgb(254, 242, 242);
+    --color-error-100: rgb(254, 226, 226);
+    --color-error-200: rgb(254, 202, 202);
+    --color-error-300: rgb(252, 165, 165);
+    --color-error-500: rgb(239, 68, 68);
+    --color-error-600: rgb(220, 38, 38);
+    --color-error-700: rgb(185, 28, 28);
+
+    /* Semantic colors - Warning (Amber) */
+    --color-warning-50: rgb(255, 251, 235);
+    --color-warning-100: rgb(254, 243, 199);
+    --color-warning-500: rgb(245, 158, 11);
+    --color-warning-600: rgb(217, 119, 6);
+    --color-warning-700: rgb(180, 83, 9);
+
+    /* Semantic colors - Info (Teal - different from primary for sky theme) */
+    --color-info-50: rgb(241, 249, 250);
+    --color-info-100: rgb(219, 238, 242);
+    --color-info-500: rgb(60, 135, 158);
+    --color-info-600: rgb(52, 110, 134);
+    --color-info-700: rgb(48, 91, 110);
 
     /* Gray scale for UI elements (same across themes) */
     --color-gray-50: rgb(249, 250, 251);
@@ -137,32 +284,74 @@
     --color-gray-800: rgb(31, 41, 55);
     --color-gray-900: rgb(17, 24, 39);
     --color-gray-950: rgb(3, 7, 18);
-  }
-
-  a.block-link:after {
-    position: absolute;
-    content: '';
-    inset: 0;
-  }
-
-  /* Admin gradient backgrounds */
-  html[data-theme='default'] .bg-gradient-admin {
-    background: linear-gradient(to bottom right, rgb(33, 29, 73), rgb(141, 94, 183));
-  }
 
-  html[data-theme='sky'] .bg-gradient-admin {
-    background: linear-gradient(to bottom right, rgb(20, 32, 74), rgb(42, 102, 159));
+    /* Panda admin chrome tokens — see html[data-theme='default'] for the
+       full explanation. Same literal colours as default: these are
+       theme-agnostic chrome tokens, unaffected by the sky/default primary
+       colour split. */
+    --panda-panel-bg: var(--color-white);
+    --panda-panel-border: var(--color-gray-200);
+    --panda-panel-radius: var(--radius-2xl);
+    --panda-table-header-bg: var(--color-gray-50);
+    --panda-table-border: var(--color-gray-200);
+    --panda-table-row-border: color-mix(in srgb, var(--color-gray-200) 70%, transparent);
+    --panda-table-cell-color: var(--color-gray-600);
+    --panda-badge-success-bg: var(--color-emerald-50);
+    --panda-badge-success-fg: var(--color-emerald-600);
+    --panda-badge-warning-bg: var(--color-amber-50);
+    --panda-badge-warning-fg: var(--color-amber-600);
+    --panda-badge-info-bg: var(--color-sky-50);
+    --panda-badge-info-fg: var(--color-sky-600);
+    --panda-badge-error-bg: var(--color-rose-50);
+    --panda-badge-error-fg: var(--color-rose-600);
+    --panda-badge-neutral-bg: var(--color-gray-100);
+    --panda-badge-neutral-fg: var(--color-gray-600);
+    --panda-input-border: var(--color-gray-300);
+    --panda-input-radius: var(--radius-xl);
+    --panda-input-focus-ring: var(--color-primary-500);
+    --panda-select-trigger-border: var(--color-gray-200);
+    --panda-checkbox-accent: var(--color-primary-500);
   }
 
-  /* Remove rounded bottom-left corner on admin sidebar */
+  /*
+   * Bring-your-own theme: host apps can supply additional theme blocks in
+   * their own stylesheets — the gem does not need to know about them. A
+   * consuming app:
+   *
+   *   1. Registers the theme so it appears in the My Profile dropdown and
+   *      can be the default:
+   *        config.available_themes = [["Default", "default"], ["Acme", "acme"]]
+   *        config.default_theme = "acme"
+   *      (assigning available_themes REPLACES the gem's default list)
+   *   2. Ships a stylesheet defining the variables, loaded on gem-rendered
+   *      pages via config.additional_head_content (rendered in the <head>
+   *      of every admin layout, including the login page):
+   *        html[data-theme='acme'] {
+   *          --color-primary-500: ...;    /- brand scale, if desired -/
+   *          --gradient-admin-from: ...;  /- sidebar/login gradient -/
+   *          --panda-panel-bg: ...;       /- any of the chrome tokens -/
+   *        }
+   *
+   * HeaderComponent stamps data-theme from Current.user&.current_theme ||
+   * config.default_theme on <html>, so the block activates automatically.
+   * Any token left undefined falls back to the gem default.
+   */
+
+  /* Admin gradient backgrounds - customizable via CSS custom properties */
   .bg-gradient-admin {
+    background: linear-gradient(to bottom right, var(--gradient-admin-from, rgb(17, 24, 39)), var(--gradient-admin-to, rgb(55, 65, 81)));
     border-bottom-left-radius: 0;
   }
+
+  /* Clickable table rows containing a block-link */
+  .table-row:has(a.block-link) {
+    cursor: pointer;
+  }
 }
 
 /* Form input styles */
 @layer components {
-  /* Base form field styles - matches panda-cms admin pattern */
+  /* Base form field styles */
   input[type='text'],
   input[type='email'],
   input[type='password'],
@@ -174,33 +363,61 @@
   input[type='month'],
   input[type='week'],
   input[type='time'],
-  input[type='search'],
+  input[type='search'] {
+    @apply block w-full h-11 rounded-xl border border-gray-300 px-3 py-2 text-gray-900;
+    @apply placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-500;
+    @apply dark:bg-white/5 dark:text-white dark:border-white/10 dark:placeholder:text-gray-500;
+    @apply disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed;
+    background-color: #fff;
+    /* Themeable border/radius/focus-ring — see --panda-input-* tokens above.
+       Fallbacks match the @apply values on this rule exactly, so this is a
+       no-op for consumers that never set a data-theme. */
+    border-color: var(--panda-input-border, var(--color-gray-300));
+    border-radius: var(--panda-input-radius, var(--radius-xl));
+
+    &:focus {
+      outline-color: var(--panda-input-focus-ring, var(--color-primary-500));
+    }
+  }
+
   textarea {
-    @apply block w-full rounded-md border-0 p-2 text-gray-900 bg-white;
-    @apply ring-1 ring-inset ring-mid placeholder:text-gray-300;
-    @apply focus:ring-1 focus:ring-inset focus:ring-dark;
-    @apply hover:cursor-pointer sm:leading-6;
-    @apply disabled:ring-gray-300 disabled:focus:ring-gray-300 disabled:bg-gray-50 disabled:cursor-not-allowed;
+    @apply block w-full rounded-xl border border-gray-300 px-3 py-2 text-gray-900;
+    @apply placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-500;
+    @apply dark:bg-white/5 dark:text-white dark:border-white/10 dark:placeholder:text-gray-500;
+    @apply disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed;
+    background-color: #fff;
+    border-color: var(--panda-input-border, var(--color-gray-300));
+    border-radius: var(--panda-input-radius, var(--radius-xl));
+
+    &:focus {
+      outline-color: var(--panda-input-focus-ring, var(--color-primary-500));
+    }
   }
 
-  /* Select specific styling - matches panda-cms admin pattern */
+  /* Select specific styling */
   select {
-    @apply block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 bg-white;
-    @apply ring-1 ring-inset ring-mid;
-    @apply focus:ring-1 focus:ring-inset focus:ring-dark;
-    @apply hover:cursor-pointer sm:leading-6;
-    @apply disabled:ring-gray-300 disabled:focus:ring-gray-300 disabled:bg-gray-50 disabled:cursor-not-allowed;
+    @apply block w-full h-11 rounded-xl border border-gray-300 px-3 py-2 text-gray-900;
+    @apply focus:outline-2 focus:-outline-offset-2 focus:outline-primary-500;
+    @apply dark:bg-white/5 dark:text-white dark:border-white/10;
+    @apply disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed;
     @apply appearance-none bg-right bg-no-repeat;
+    background-color: #fff;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-    background-position: right 0.5rem center;
-    background-size: 1.5em 1.5em;
+    background-position: right 0.75rem center;
+    background-size: 1.25em 1.25em;
+    border-color: var(--panda-input-border, var(--color-gray-300));
+    border-radius: var(--panda-input-radius, var(--radius-xl));
+
+    &:focus {
+      outline-color: var(--panda-input-focus-ring, var(--color-primary-500));
+    }
   }
 
   /* Checkbox and radio styling */
   input[type='checkbox'],
   input[type='radio'] {
-    @apply w-4 h-4 text-indigo-600 bg-white border-gray-300 rounded transition-colors duration-200;
-    @apply focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
+    @apply w-5 h-5 text-primary-600 bg-white border-gray-300 rounded-md transition-colors duration-200;
+    @apply focus:outline-2 focus:outline-offset-2 focus:outline-primary-500;
     @apply disabled:bg-gray-100 disabled:cursor-not-allowed;
   }
 
@@ -208,9 +425,16 @@
     @apply rounded-full;
   }
 
+  /* Ensure form controls use primary brand color. Checkbox/radio accent is
+     themeable independently of primary-500 via --panda-checkbox-accent
+     (falls back to primary-500, today's behaviour, when unset). */
+  input, select, textarea {
+    accent-color: var(--panda-checkbox-accent, var(--color-primary-500));
+  }
+
   /* Label styling */
   label {
-    @apply block text-sm font-medium text-gray-700 mb-1;
+    @apply block text-xs font-semibold text-gray-500 mb-1;
   }
 
   /* Field wrapper styling */
@@ -222,43 +446,47 @@
   input.error,
   textarea.error,
   select.error {
-    @apply ring-red-500 focus:ring-red-500;
+    @apply outline-error-500 focus:outline-error-500;
   }
 
   .field-error {
-    @apply text-sm text-red-600 mt-1;
+    @apply text-sm text-error-600 mt-1;
   }
 
   /* Button styling */
   .btn {
-    @apply inline-flex items-center justify-center px-6 py-3 text-base font-semibold rounded-md transition-colors duration-200;
-    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-xl transition-colors duration-200;
+    @apply focus-visible:outline-2 focus-visible:outline-offset-2 shadow-sm;
     @apply disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
   .btn-primary {
-    @apply bg-mid text-white hover:opacity-90 focus:ring-mid;
+    @apply bg-primary-500 text-white hover:bg-primary-600 focus-visible:outline-primary-600;
   }
 
   .btn-secondary {
-    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500;
+    @apply border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 focus-visible:outline-gray-300;
   }
 
   .btn-danger {
-    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
+    @apply border border-error-200 bg-error-50 text-error-600 hover:bg-error-100 focus-visible:outline-error-300;
   }
 
-  a.block-link:after {
-    position: absolute;
-    content: '';
-    inset: 0;
+  .btn-success {
+    @apply border border-success-200 bg-success-50 text-success-600 hover:bg-success-100 focus-visible:outline-success-300;
   }
+
+  /* Custom select dropdown */
+  [data-controller="custom-select"] {
+    position: relative;
+  }
+
 }
 
 /* EditorJS content styles */
 @layer components {
   .codex-editor__redactor .ce-block .ce-block__content {
-    @apply text-base font-normal font-sans text-dark leading-[1.6] space-y-[1.6rem];
+    @apply text-base font-normal font-sans text-gray-900 leading-[1.6] space-y-[1.6rem];
 
     h1.ce-header {
       @apply text-3xl md:text-4xl font-semibold font-sans leading-[1.2];
@@ -277,7 +505,7 @@
       @apply leading-[1.6] tracking-wide max-w-[85ch];
 
       a {
-        @apply text-[#1A9597] underline underline-offset-2 hover:text-[#158486] focus:outline-2 focus:outline-offset-2 focus:outline-[#1A9597];
+        @apply text-primary-600 underline underline-offset-2 hover:text-primary-700 focus:outline-2 focus:outline-offset-2 focus:outline-primary-600;
       }
 
       strong,
@@ -291,10 +519,10 @@
     }
 
     .cdx-quote {
-      @apply bg-[#eef0f3] border-l-inactive border-l-8 p-6 mb-4;
+      @apply bg-gray-100 border-l-primary-300 border-l-8 p-6 mb-4;
 
       .cdx-quote__caption {
-        @apply block ml-6 mt-2 text-sm text-dark;
+        @apply block ml-6 mt-2 text-sm text-gray-600;
       }
 
       .cdx-quote__text {
@@ -302,7 +530,7 @@
         @apply pl-6;
 
         &:before {
-          @apply -ml-8 mr-2 text-dark text-6xl leading-4 align-text-bottom font-serif;
+          @apply -ml-8 mr-2 text-primary-600 text-6xl leading-4 align-text-bottom font-serif;
           content: open-quote;
         }
 
@@ -353,18 +581,18 @@
     }
 
     .cdx-table {
-      @apply w-full border-collapse border-2 border-dark my-6;
+      @apply w-full border-collapse border-2 border-gray-300 my-6;
 
       &__head {
-        @apply font-semibold border-dark border-r-2 p-3 bg-light;
+        @apply font-semibold border-gray-300 border-r-2 p-3 bg-gray-100;
       }
 
       &__row {
-        @apply border-dark border-b-2;
+        @apply border-gray-300 border-b-2;
       }
 
       &__cell {
-        @apply border-dark border-r-2 p-3;
+        @apply border-gray-300 border-r-2 p-3;
       }
     }
 
@@ -375,3 +603,57 @@
     }
   }
 }
+
+/* Page tree indentation utilities - must be explicitly defined because
+   they're used in panda-cms views which aren't scanned by this build */
+@layer utilities {
+  .ml-18 {
+    margin-left: var(--spacing-18, 4.5rem);
+  }
+
+  /* ButtonComponent action classes - generated dynamically in Ruby, so must be explicitly defined */
+  .bg-primary-500 {
+    background-color: var(--color-primary-500);
+  }
+
+  .bg-primary-600 {
+    background-color: var(--color-primary-600);
+  }
+
+  .hover\:bg-primary-600:hover {
+    background-color: var(--color-primary-600);
+  }
+
+  .focus-visible\:outline-primary-600:focus-visible {
+    outline-color: var(--color-primary-600);
+  }
+
+  /* Sidebar navigation classes - used in dynamic Ruby string interpolation */
+  .space-y-0\.5 > :not(:last-child) {
+    margin-bottom: 0.125rem;
+  }
+
+  .pl-6 {
+    padding-left: 1.5rem;
+  }
+
+  .pl-8 {
+    padding-left: 2rem;
+  }
+
+  .pr-2 {
+    padding-right: 0.5rem;
+  }
+
+  .text-white\/90 {
+    color: rgb(255 255 255 / 0.9);
+  }
+
+  .border-white\/20 {
+    border-color: rgb(255 255 255 / 0.2);
+  }
+
+  .hover\:bg-primary-500\/40:hover {
+    background-color: color-mix(in srgb, var(--color-primary-500) 40%, transparent);
+  }
+}