:root {
    /* Brand */
    /* Brand teal family, aligned with the landing page / brand identity
       (landing.css: accent #1a9c8d, light #25b6a4, dark #14817a). */
    --brand-primary: #1a9c8d;
    --brand-primary-strong: #14817a;
    --brand-primary-soft: #25b6a4;
    --brand-primary-deep: #0f6158;
    --brand-gradient: linear-gradient(135deg, #14817a 0%, #1a9c8d 50%, #25b6a4 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(20, 129, 122, 0.1) 0%, rgba(26, 156, 141, 0.1) 50%, rgba(37, 182, 164, 0.1) 100%);

    /* Neutrals */
    --gray-0: #ffffff;
    --gray-50: #f8fafc;
    --gray-75: #f3f4f6;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Semantic scales */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;

    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #92400e;

    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #991b1b;

    --info-50: #eff6ff;
    --info-100: #dbeafe;
    --info-200: #bfdbfe;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-700: #1d4ed8;

    /* Product accents */
    --accent-teal-50: #f0fdfa;
    --accent-teal-100: #ccfbf1;
    --accent-teal-200: #99f6e4;
    --accent-teal-300: #5eead4;
    --accent-teal-400: #14b8a6;
    --accent-teal-500: #0d9488;
    --accent-teal-600: #0f766e;
    --accent-teal-700: #115e59;

    --accent-purple-50: #f5f3ff;
    --accent-purple-100: #ede9fe;
    --accent-purple-200: #ddd6fe;
    --accent-purple-500: #7c3aed;
    --accent-purple-600: #6d28d9;
    --accent-purple-700: #4c1d95;

    --accent-cyan-50: #ecfeff;
    --accent-cyan-100: #cffafe;
    --accent-cyan-500: #06b6d4;
    --accent-cyan-600: #0891b2;
    --accent-cyan-700: #0e7490;

    --accent-orange-50: #fff7ed;
    --accent-orange-100: #ffedd5;
    --accent-orange-200: #fed7aa;
    --accent-orange-500: #f97316;
    --accent-orange-600: #ea580c;
    --accent-orange-700: #c2410c;

    --accent-sage-50: #f4f8f7;
    --accent-sage-100: #e7efed;
    --accent-sage-500: #7c9b95;
    --accent-sage-600: #64847e;
    --accent-sage-ring: rgba(124, 155, 149, 0.18);

    /* Surfaces */
    --surface-page: var(--gray-75);
    --surface-panel: var(--gray-0);
    --surface-panel-muted: var(--gray-75);
    --surface-panel-subtle: var(--gray-50);
    --surface-panel-soft: var(--gray-100);
    --surface-hover: var(--gray-100);
    --surface-info: var(--info-50);
    --surface-success: var(--success-50);
    --surface-warning: var(--warning-50);
    --surface-danger: var(--danger-50);
    --overlay-scrim: rgba(15, 23, 42, 0.5);

    /* Borders */
    --border-default: var(--gray-200);
    --border-strong: var(--gray-300);
    --border-muted: var(--gray-75);
    --border-badge: var(--gray-500);

    /* Text */
    --text-default: var(--gray-800);
    --text-strong: var(--gray-900);
    --text-muted: var(--gray-500);
    --text-soft: var(--gray-400);
    --text-placeholder: var(--gray-300);
    --text-inverse: var(--gray-0);

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-heading: 1.25;
    --line-height-body: 1.5;
    --line-height-relaxed: 1.6;

    --font-size-xs: 0.75rem;
    --font-size-2xs: 0.6875rem;
    --font-size-sm: 0.875rem;
    --font-size-sm-plus: 0.8125rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl-tight: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;

    /* Spacing (4px base, with 8px cadence preserved) */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Legacy spacing aliases */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: var(--space-12);
    --space-3xl: var(--space-16);

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-card: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* Shadows */
    --elevation-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);
    --elevation-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.06);
    --elevation-lg: 0 10px 15px rgba(15, 23, 42, 0.1), 0 4px 6px rgba(15, 23, 42, 0.05);
    --elevation-xl: 0 20px 25px rgba(15, 23, 42, 0.1), 0 8px 10px rgba(15, 23, 42, 0.04);
    --shadow-sm: var(--elevation-sm);
    --shadow-md: var(--elevation-md);
    --shadow-lg: var(--elevation-lg);
    --shadow-xl: var(--elevation-xl);
    --shadow-neutral-03: rgba(0, 0, 0, 0.03);
    --shadow-neutral-02: rgba(0, 0, 0, 0.02);
    --shadow-neutral-04: rgba(0, 0, 0, 0.04);
    --shadow-neutral-05: rgba(0, 0, 0, 0.05);
    --shadow-neutral-06: rgba(0, 0, 0, 0.06);
    --shadow-neutral-07: rgba(0, 0, 0, 0.07);
    --shadow-neutral-08: rgba(0, 0, 0, 0.08);
    --shadow-neutral-10: rgba(0, 0, 0, 0.1);
    --shadow-neutral-15: rgba(0, 0, 0, 0.15);
    --shadow-neutral-20: rgba(0, 0, 0, 0.2);
    --shadow-slate-15: rgba(15, 23, 42, 0.15);
    --shadow-slate-04: rgba(15, 23, 42, 0.04);
    --shadow-slate-12: rgba(15, 23, 42, 0.12);
    --shadow-slate-18: rgba(15, 23, 42, 0.18);
    --shadow-slate-20: rgba(15, 23, 42, 0.2);
    --shadow-slate-22: rgba(15, 23, 42, 0.22);
    --shadow-white-30: rgba(255, 255, 255, 0.3);
    --shadow-white-50: rgba(255, 255, 255, 0.5);

    /* Interaction */
    --interactive-color: var(--info-500);
    --interactive-color-hover: var(--info-600);
    --interactive-color-light: var(--info-50);
    --interactive-color-lighter: var(--info-100);
    --interactive-border: var(--interactive-color);
    --interactive-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    --interactive-shadow-hover: 0 4px 12px rgba(59, 130, 246, 0.3);
    --interactive-tint-08: rgba(37, 99, 235, 0.08);
    --interactive-tint-10: rgba(59, 130, 246, 0.1);
    --interactive-tint-12: rgba(37, 99, 235, 0.12);
    --interactive-tint-15: rgba(37, 99, 235, 0.15);
    --interactive-tint-20: rgba(37, 99, 235, 0.2);
    --interactive-tint-22: rgba(37, 99, 235, 0.22);
    --interactive-tint-25: rgba(37, 99, 235, 0.25);
    --interactive-tint-30: rgba(37, 99, 235, 0.3);
    --success-tint-10: rgba(34, 197, 94, 0.1);
    --success-tint-20: rgba(34, 197, 94, 0.2);
    --success-tint-strong-20: rgba(16, 185, 129, 0.2);
    --danger-tint-10: rgba(239, 68, 68, 0.1);
    --teal-tint-10: rgba(15, 118, 110, 0.1);
    --teal-tint-12: rgba(15, 118, 110, 0.12);
    --teal-tint-15: rgba(15, 118, 110, 0.15);
    --teal-tint-18: rgba(15, 118, 110, 0.18);
    --teal-tint-20: rgba(15, 118, 110, 0.2);
    --teal-tint-22: rgba(15, 118, 110, 0.22);
    --teal-tint-30: rgba(15, 118, 110, 0.3);
    --teal-tint-40: rgba(15, 118, 110, 0.4);
    --brand-tint-15: color-mix(in srgb, var(--brand-primary) 15%, transparent);
    --brand-tint-20: color-mix(in srgb, var(--brand-primary) 20%, transparent);
    --warning-tint-10: color-mix(in srgb, var(--warning-500) 10%, transparent);
    --warning-tint-20: color-mix(in srgb, var(--warning-500) 20%, transparent);
    --danger-tint-20: color-mix(in srgb, var(--danger-500) 20%, transparent);
    --surface-glass-70: color-mix(in srgb, var(--surface-panel) 70%, transparent);
    --surface-glass-80: color-mix(in srgb, var(--surface-panel) 80%, transparent);
    --surface-glass-95: color-mix(in srgb, var(--surface-panel) 95%, transparent);
    --surface-glass-08: color-mix(in srgb, var(--surface-panel) 8%, transparent);
    --surface-glass-12: color-mix(in srgb, var(--surface-panel) 12%, transparent);
    --surface-shimmer: color-mix(in srgb, var(--surface-panel) 20%, transparent);
    --brand-muted-tint-05: color-mix(in srgb, var(--brand-primary-soft) 5%, transparent);
    --brand-muted-tint-25: color-mix(in srgb, var(--brand-primary-soft) 25%, transparent);

    /* Admin brand facade: adjust these first for Choicery admin brand polish.
       Scoped to admin-UI (base.html-tree); survey participant theme stays
       customer-themable via _survey_theme_css.html. */
    --admin-brand-primary: var(--accent-teal-500);
    --admin-brand-primary-hover: var(--accent-teal-600);
    --admin-brand-primary-soft: var(--accent-teal-50);
    --admin-brand-primary-border: var(--accent-teal-200);
    --admin-brand-primary-text: var(--accent-teal-700);

    --admin-focus-ring: color-mix(in srgb, var(--admin-brand-primary) 22%, transparent);
    --admin-focus-ring-strong: color-mix(in srgb, var(--admin-brand-primary) 35%, transparent);
    --admin-card-hover-shadow: 0 4px 12px color-mix(in srgb, var(--admin-brand-primary) 14%, transparent);
    --admin-motion-standard: 0.2s ease;

    /* Component theme aliases */
    --button-primary-bg: var(--brand-primary);
    --button-primary-bg-hover: var(--brand-primary-deep);
    --button-primary-border: var(--brand-primary);
    --button-primary-border-hover: var(--brand-primary-deep);
    --button-primary-text: var(--text-inverse);
    --button-secondary-bg: var(--surface-panel);
    --button-secondary-bg-hover: var(--surface-hover);
    --button-secondary-border: var(--border-strong);
    --button-secondary-border-hover: var(--gray-400);
    --button-secondary-text: var(--text-default);
    --button-success-bg: var(--success-500);
    --button-success-bg-hover: var(--success-600);
    --button-success-border: var(--success-500);
    --button-success-border-hover: var(--success-600);
    --button-success-text: var(--text-inverse);
    --button-success-shadow: 0 1px 3px rgba(16, 185, 129, 0.18);
    --button-success-shadow-hover: 0 2px 6px rgba(16, 185, 129, 0.25);
    --button-danger-bg: var(--danger-500);
    --button-danger-bg-hover: var(--danger-600);
    --button-danger-border: var(--danger-500);
    --button-danger-border-hover: var(--danger-600);
    --button-danger-text: var(--text-inverse);
    --button-accent-bg: var(--accent-teal-500);
    --button-accent-bg-hover: var(--accent-teal-600);
    --button-accent-border: var(--accent-teal-500);
    --button-accent-border-hover: var(--accent-teal-600);
    --button-accent-text: var(--text-inverse);
    --button-utility-bg: var(--gray-800);
    --button-utility-bg-hover: var(--gray-900);
    --button-utility-border: var(--gray-800);
    --button-utility-border-hover: var(--gray-900);
    --button-utility-text: var(--text-inverse);
    --button-ghost-bg-hover: var(--surface-hover);
    --button-ghost-text: var(--text-default);

    --pill-default-bg: var(--surface-panel-muted);
    --pill-default-text: var(--text-muted);
    --pill-default-border: var(--border-default);
    --pill-primary-bg: var(--info-50);
    --pill-primary-text: var(--info-700);
    --pill-primary-border: var(--info-200);
    --pill-success-bg: var(--success-50);
    --pill-success-text: var(--success-700);
    --pill-success-border: var(--success-200);
    --pill-warning-bg: var(--warning-50);
    --pill-warning-text: var(--warning-700);
    --pill-warning-border: var(--warning-200);
    --pill-danger-bg: var(--danger-50);
    --pill-danger-text: var(--danger-700);
    --pill-danger-border: var(--danger-200);

    --badge-default-bg: var(--pill-default-bg);
    --badge-default-text: var(--pill-default-text);
    --badge-default-border: var(--pill-default-border);
    --badge-primary-bg: var(--pill-primary-bg);
    --badge-primary-text: var(--pill-primary-text);
    --badge-primary-border: var(--pill-primary-border);
    --badge-success-bg: var(--pill-success-bg);
    --badge-success-text: var(--pill-success-text);
    --badge-success-border: var(--pill-success-border);
    --badge-warning-bg: var(--pill-warning-bg);
    --badge-warning-text: var(--pill-warning-text);
    --badge-warning-border: var(--pill-warning-border);
    --badge-danger-bg: var(--pill-danger-bg);
    --badge-danger-text: var(--pill-danger-text);
    --badge-danger-border: var(--pill-danger-border);

    --focus-ring-color: rgba(59, 130, 246, 0.25);
    --focus-ring-success: rgba(16, 185, 129, 0.1);
    --focus-ring-teal: rgba(15, 118, 110, 0.12);
    --focus-ring-sage: var(--accent-sage-ring);
    --input-inset-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    --state-success-row-bg: rgba(16, 185, 129, 0.08);
    --state-success-row-bg-hover: rgba(16, 185, 129, 0.14);
    --state-danger-row-bg: rgba(153, 27, 27, 0.06);
    --selected-bg: var(--info-50);
    --selected-border: var(--info-500);
    --selected-text: var(--info-700);

    --sidebar-active-bg: var(--info-500);
    --sidebar-active-bg-hover: var(--info-600);
    --sidebar-active-color: var(--text-inverse);
    --sidebar-active-text: var(--text-inverse);
    --sidebar-active-shadow: var(--interactive-shadow);
    --sidebar-hover-bg: var(--surface-hover);
    --sidebar-hover-border: var(--border-default);

    --config-accent: var(--accent-orange-500);
    --config-accent-bg: var(--accent-orange-50);
    --config-accent-border: var(--accent-orange-200);
    --config-card-bg: var(--surface-panel);
    --config-card-border: var(--border-default);
    --config-card-hover-border: var(--border-strong);
    --config-card-active-bg: var(--success-50);
    --config-card-active-border: var(--success-500);
    --config-label-text: var(--text-default);
    --config-hint-text: var(--text-muted);

    /* CBC Shop preview palette */
    --shop-preview-accent-orange: #ff9900;
    --shop-preview-accent-orange-rgb: 255, 153, 0;
    --shop-preview-accent-blue-rgb: 0, 123, 255;
    --shop-preview-accent-green-rgb: 40, 167, 69;
    --shop-preview-accent-purple: #6f42c1;
    --shop-preview-accent-purple-rgb: 111, 66, 193;
    --shop-preview-accent-red-rgb: 220, 53, 69;
    --shop-preview-price-red: #b12704;
    --shop-preview-price-green: #067d17;
    --shop-preview-price-orange: #ff6600;
    --shop-preview-price-black: #111111;
    --shop-preview-shelf-wood-bg: #f2e6d5;
    --shop-preview-shelf-wood-rail: #8b7355;
    --shop-preview-shelf-wood-text: #6b5a4a;
    --shop-preview-shelf-wood-placeholder-bg: #e8e0d5;
    --shop-preview-shelf-wood-placeholder-color: #a08c7a;
    --shop-preview-shelf-wood-label-border: #d1bfa6;
    --shop-preview-shelf-dark-bg: #2f2f2f;
    --shop-preview-shelf-dark-rail: #1f1f1f;
    --shop-preview-shelf-dark-text: #d1d1d1;
    --shop-preview-shelf-dark-placeholder-bg: #3b3b3b;
    --shop-preview-shelf-dark-placeholder-color: #888888;
    --shop-preview-shelf-metal-light: #e0e0e0;
    --shop-preview-shelf-metal-dark: #c0c0c0;
    --shop-preview-shelf-wood-light: #e8e0d5;
    --shop-preview-shelf-wood-dark: #d4c4a8;
    --shop-preview-brand-dark: #232f3e;
    --shop-preview-brand-slate: #37475a;

    --hub-maxdiff-accent: var(--accent-purple-500);
    --hub-maxdiff-accent-strong: var(--accent-purple-700);
    --hub-drcbc-accent: var(--accent-cyan-500);
    --hub-bwcbc-accent: var(--warning-500);

    /* Layout */
    --layout-gap: var(--space-6);
    --layout-bg: var(--surface-page);
    --content-bg: transparent;
    --content-max-width: none;
    --content-padding: 30px 40px;
    --sidebar-bg: var(--surface-panel);

    /* Page max-width scale: every page uses one of these three steps so the
       content width no longer jumps between sections on large monitors. */
    --page-width-narrow: 960px;    /* item editors, logic editors, diagnostics */
    --page-width-standard: 1320px; /* boxed workspaces (data/settings/admin), survey-flow hub, dashboard */
    --page-width-wide: 1400px;     /* configurators, analysis container, market simulation */
}