:root {
    --ao-canvas: #F7F9FC;
    --ao-surface: #FFFFFF;
    --ao-surface-subtle: #F8FAFC;
    --ao-surface-raised: #FFFFFF;

    --ao-text-strong: #172033;
    --ao-text-heading: #1E293B;
    --ao-text-body: #475569;
    --ao-text-muted: #64748B;
    --ao-text-inverse: #FFFFFF;

    --ao-border: #DCE3EE;
    --ao-border-strong: #C8D3E1;
    --ao-divider: #E8EDF4;

    --ao-blue: #3B82F6;
    --ao-blue-hover: #2563EB;
    --ao-blue-soft: #DBEAFE;
    --ao-blue-text: #1D4ED8;

    --ao-cyan: #06B6D4;
    --ao-indigo: #6366F1;
    --ao-violet: #8B5CF6;
    --ao-orange: #F97316;
    --ao-yellow: #FACC15;

    --ao-teal: #14B8A6;
    --ao-teal-hover: #0D9488;
    --ao-teal-soft: #CCFBF1;
    --ao-teal-text: #0F766E;

    --ao-green: #22C55E;
    --ao-green-hover: #16A34A;
    --ao-green-soft: #DCFCE7;
    --ao-green-text: #15803D;

    --ao-purple: #8B5CF6;
    --ao-purple-hover: #7C3AED;
    --ao-purple-soft: #EDE9FE;
    --ao-purple-text: #6D28D9;

    --ao-amber: #F59E0B;
    --ao-amber-hover: #D97706;
    --ao-amber-soft: #FEF3C7;
    --ao-amber-text: #92400E;

    --ao-red: #EF4444;
    --ao-red-hover: #DC2626;
    --ao-red-soft: #FEE2E2;
    --ao-red-text: #B91C1C;

    --ao-gray: #64748B;
    --ao-gray-soft: #F1F5F9;
    --ao-gray-text: #475569;

    --as-color-primary: var(--ao-blue);
    --as-color-primary-dark: var(--ao-blue-hover);
    --as-color-primary-light: var(--ao-blue-hover);
    --as-color-secondary: var(--ao-purple);
    --as-color-secondary-dark: var(--ao-purple-hover);
    --as-color-secondary-light: var(--ao-purple-soft);
    --as-color-accent: var(--ao-blue);
    --as-color-accent-dark: var(--ao-blue-hover);
    --as-color-accent-light: var(--ao-blue-soft);
    --as-color-success: var(--ao-green);
    --as-color-success-dark: var(--ao-green-text);
    --as-color-success-light: var(--ao-green-soft);
    --as-color-warning: var(--ao-orange);
    --as-color-warning-dark: var(--ao-amber-text);
    --as-color-warning-light: var(--ao-amber-soft);
    --as-color-danger: var(--ao-red);
    --as-color-danger-dark: var(--ao-red-text);
    --as-color-danger-light: var(--ao-red-soft);
    --as-color-info: var(--ao-cyan);
    --as-color-info-dark: var(--ao-blue-text);
    --as-color-info-light: var(--ao-blue-soft);
    --as-color-background: var(--ao-canvas);
    --as-color-surface: var(--ao-surface);
    --as-color-surface-muted: var(--ao-surface-subtle);
    --as-color-border: var(--ao-border);
    --as-color-border-strong: var(--ao-border-strong);
    --as-color-text: var(--ao-text-body);
    --as-color-text-strong: var(--ao-text-strong);
    --as-color-text-heading: var(--ao-text-heading);
    --as-color-text-muted: var(--ao-text-muted);
    --as-color-text-inverse: var(--ao-text-inverse);
    --as-sidebar-bg: #101827;
    --as-sidebar-bg-hover: rgba(59, 130, 246, 0.16);
    --as-sidebar-bg-active: var(--ao-blue);
    --as-sidebar-text: #F8FAFC;
    --as-sidebar-text-muted: #CBD5E1;
    --as-sidebar-border: rgba(203, 213, 225, 0.18);
    --as-topbar-bg: var(--ao-surface);
    --as-topbar-border: var(--ao-divider);
    --as-shadow-sm: 0 8px 22px rgba(23, 32, 51, 0.06);
    --as-shadow-md: 0 16px 38px rgba(23, 32, 51, 0.12);
    --as-focus-ring: 0 0 0 0.22rem rgba(59, 130, 246, 0.24);
    --as-radius-sm: 0.375rem;
    --as-radius-md: 0.625rem;
    --as-radius-lg: 0.875rem;
    --as-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="charcoal-coral"],
:root[data-theme="operations"] {
    --as-color-primary: var(--ao-blue);
    --as-color-primary-dark: var(--ao-blue-hover);
    --as-color-primary-light: var(--ao-blue-hover);
    --as-color-secondary: var(--ao-purple);
    --as-color-accent: var(--ao-blue);
    --as-color-background: var(--ao-canvas);
}