/*
 * Axima UI v2 semantic design tokens.
 *
 * Branding values are injected by the Yii layout. Product components should
 * consume the --ax-* semantic tokens instead of hard-coded light/dark colors.
 */
:root {
    color-scheme: light;

    --ax-font-sans: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ax-canvas: #f6f8fb;
    --ax-surface: #ffffff;
    --ax-surface-raised: #ffffff;
    --ax-surface-muted: #f1f5f9;
    --ax-surface-subtle: #f8fafc;
    --ax-text: #172033;
    --ax-text-muted: #64748b;
    --ax-text-subtle: #94a3b8;
    --ax-border: #e2e8f0;
    --ax-border-strong: #cbd5e1;
    --ax-overlay: rgba(15, 23, 42, 0.48);

    --ax-success: #15803d;
    --ax-success-soft: #dcfce7;
    --ax-warning: #b45309;
    --ax-warning-soft: #fef3c7;
    --ax-danger: #b91c1c;
    --ax-danger-soft: #fee2e2;
    --ax-info: #0369a1;
    --ax-info-soft: #e0f2fe;

    --ax-radius-sm: 0.625rem;
    --ax-radius-md: 0.875rem;
    --ax-radius-lg: 1.125rem;
    --ax-radius-xl: 1.5rem;
    --ax-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ax-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
    --ax-shadow-md: 0 18px 42px rgba(15, 23, 42, 0.09);
    --ax-focus-ring: 0 0 0 0.25rem rgba(var(--brand-primary-rgb, 14, 165, 233), 0.22);

    --brand-primary: #0ea5e9;
    --brand-primary-rgb: 14, 165, 233;
    --brand-on-primary: #ffffff;
    --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 86%, #0f172a);
    --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 12%, #ffffff);
    --brand-primary-muted: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    --brand-color: var(--brand-primary);
    --brand-color-soft: var(--brand-primary-soft);
    --brand-color-muted: var(--brand-primary-muted);
    --brand-gradient: linear-gradient(
        135deg,
        var(--brand-primary),
        color-mix(in srgb, var(--brand-primary) 76%, #ffffff)
    );
    --brand-gradient-strong: linear-gradient(
        135deg,
        color-mix(in srgb, var(--brand-primary) 72%, #0f172a),
        var(--brand-primary)
    );

    --nav-height: 64px;
    --nav-bg: #0f2942;
    --nav-bg-translucent: rgba(15, 41, 66, 0.96);
    --nav-foreground: #ffffff;
    --nav-link-color: rgba(255, 255, 255, 0.82);
    --nav-link-hover-color: #ffffff;
    --nav-hover-bg: rgba(255, 255, 255, 0.1);
    --nav-active-bg: rgba(255, 255, 255, 0.16);
    --nav-app-active-bg: rgba(255, 255, 255, 0.14);
    --nav-shadow-color: rgba(15, 23, 42, 0.16);
    --nav-drawer-active-color: var(--brand-primary);

    /* Compatibility tokens consumed by existing Bootstrap/Vuetify pages. */
    --light-bg: var(--ax-canvas);
    --light-panel: var(--ax-surface);
    --light-highlight: var(--ax-surface-muted);
    --light-hover: var(--brand-primary-soft);
    --dark-bg: #0b1220;
    --dark-panel: #111827;
    --dark-highlight: #1e293b;
    --dark-hover: #263247;
    --dark-surface: #111827;
    --dark-surface-muted: #1e293b;
    --dark-text: #f8fafc;
    --dark-text-muted: #94a3b8;
    --dark-border: #263247;
    --dark-primary: #38bdf8;
    --panel-bg: var(--ax-surface);
    --footer-bg: var(--ax-surface);
    --app-card-radius: var(--ax-radius-lg);
    --app-card-shadow: var(--ax-shadow-sm);
    --app-card-shadow-hover: var(--ax-shadow-md);
    --app-card-border: var(--ax-border);
    --app-card-accent: linear-gradient(
        135deg,
        var(--brand-primary-soft),
        var(--ax-surface)
    );
    --login-bg:
        radial-gradient(
            900px 620px at 88% -8%,
            color-mix(in srgb, var(--brand-primary) 15%, transparent),
            transparent 60%
        ),
        radial-gradient(
            760px 520px at -12% 108%,
            color-mix(in srgb, var(--brand-primary) 12%, transparent),
            transparent 62%
        ),
        var(--ax-canvas);
    --login-foreground: var(--ax-text);
    --login-card-bg: color-mix(in srgb, var(--ax-surface) 92%, transparent);
    --login-card-border: var(--ax-border);
    --login-card-shadow: var(--ax-shadow-md);
    --login-card-radius: var(--ax-radius-xl);

    --bs-body-bg: var(--ax-canvas);
    --bs-body-color: var(--ax-text);
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-secondary: #475569;
    --bs-secondary-rgb: 71, 85, 105;
    --bs-border-color: var(--ax-border);
    --bs-tertiary-bg: var(--ax-surface-muted);
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-hover);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --ax-canvas: #0b1220;
    --ax-surface: #111827;
    --ax-surface-raised: #182235;
    --ax-surface-muted: #1e293b;
    --ax-surface-subtle: #121c2c;
    --ax-text: #f8fafc;
    --ax-text-muted: #a6b2c4;
    --ax-text-subtle: #7f8da3;
    --ax-border: #263247;
    --ax-border-strong: #35435a;
    --ax-overlay: rgba(2, 6, 23, 0.72);

    --ax-success: #4ade80;
    --ax-success-soft: rgba(34, 197, 94, 0.14);
    --ax-warning: #fbbf24;
    --ax-warning-soft: rgba(245, 158, 11, 0.15);
    --ax-danger: #f87171;
    --ax-danger-soft: rgba(239, 68, 68, 0.14);
    --ax-info: #38bdf8;
    --ax-info-soft: rgba(14, 165, 233, 0.14);

    --ax-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
    --ax-shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.24);
    --ax-shadow-md: 0 24px 56px rgba(0, 0, 0, 0.3);

    --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 18%, #0b1220);
    --brand-primary-muted: color-mix(in srgb, var(--brand-primary) 32%, transparent);
    --nav-bg: #0a1626;
    --nav-bg-translucent: rgba(10, 22, 38, 0.96);
    --nav-shadow-color: rgba(0, 0, 0, 0.34);

    --panel-bg: var(--ax-surface);
    --footer-bg: var(--ax-surface);
    --login-bg:
        radial-gradient(
            900px 620px at 88% -8%,
            color-mix(in srgb, var(--brand-primary) 20%, transparent),
            transparent 60%
        ),
        radial-gradient(
            760px 520px at -12% 108%,
            color-mix(in srgb, var(--brand-primary) 13%, transparent),
            transparent 62%
        ),
        var(--ax-canvas);
    --login-foreground: var(--ax-text);
    --login-card-bg: color-mix(in srgb, var(--ax-surface) 88%, transparent);
    --login-card-border: var(--ax-border);

    --bs-body-bg: var(--ax-canvas);
    --bs-body-color: var(--ax-text);
    --bs-border-color: var(--ax-border);
    --bs-tertiary-bg: var(--ax-surface-muted);
    --bs-secondary-bg: var(--ax-surface-muted);
    --bs-emphasis-color: var(--ax-text);
    --bs-secondary-color: var(--ax-text-muted);
}

html[data-ui-density="compact"] {
    --ax-control-height: 2.375rem;
    --ax-content-gap: 0.875rem;
}

html:not([data-ui-density="compact"]) {
    --ax-control-height: 2.75rem;
    --ax-content-gap: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}