/*
 * Mobile semantic aliases for the active DevExpress Fluent theme.
 * --dxds-* remains the source of truth shared with HRM-WEBAPP. This file
 * owns only Mobile aliases, safe fallbacks and device-specific geometry.
 */
:root,
[data-theme="light"] {
    /* Fluent surface, content and action aliases. */
    --vnta-primary: var(--dxds-color-surface-primary-default-rest, #2563eb);
    --vnta-primary-hover: var(--dxds-color-surface-primary-default-hovered, #1d4ed8);
    --vnta-primary-light: var(--dxds-color-surface-brand-subtle-rest, #eff6ff);
    --vnta-primary-foreground: var(--dxds-color-content-on-primary-default-rest, var(--dxds-color-content-primary-on-primary-rest, #ffffff));
    --vnta-accent: var(--dxds-color-content-brand-default-rest, var(--vnta-primary));
    --vnta-accent-foreground: var(--vnta-primary-foreground);
    --vnta-background: var(--dxds-color-surface-neutral-subdued-rest, #f8fafc);
    --vnta-surface: var(--dxds-color-surface-neutral-default-rest, #ffffff);
    --vnta-surface-card: var(--vnta-surface);
    --vnta-border: var(--dxds-color-border-neutral-default-rest, #e2e8f0);
    --vnta-divider: color-mix(in srgb, var(--vnta-border) 58%, transparent);
    --vnta-separator: var(--vnta-border);
    --vnta-text-main: var(--dxds-color-content-neutral-default-rest, #0f172a);
    --vnta-text-muted: var(--dxds-color-content-neutral-subtle-rest, #64748b);
    --vnta-text-sub: color-mix(in srgb, var(--vnta-text-muted) 72%, transparent);

    /* Fluent semantic feedback aliases. */
    --vnta-success: var(--dxds-color-content-success-default-rest, #047857);
    --vnta-success-bg: var(--dxds-color-surface-success-subtle-rest, #ecfdf5);
    --vnta-success-foreground: var(--vnta-success);
    --vnta-success-soft: var(--vnta-success-bg);
    --vnta-success-border: var(--dxds-color-border-success-default-rest, #a7f3d0);
    --vnta-warning: var(--dxds-color-content-warning-default-rest, #b45309);
    --vnta-warning-bg: var(--dxds-color-surface-warning-subtle-rest, #fffbeb);
    --vnta-warning-foreground: var(--vnta-warning);
    --vnta-warning-soft: var(--vnta-warning-bg);
    --vnta-warning-border: var(--dxds-color-border-warning-default-rest, #fde68a);
    --vnta-danger: var(--dxds-color-content-danger-default-rest, #b91c1c);
    --vnta-danger-bg: var(--dxds-color-surface-danger-subtle-rest, #fef2f2);
    --vnta-danger-foreground: var(--vnta-danger);
    --vnta-danger-soft: var(--vnta-danger-bg);
    --vnta-danger-border: var(--dxds-color-border-danger-default-rest, #fecaca);
    --vnta-info: var(--dxds-color-content-info-default-rest, #0369a1);
    --vnta-info-bg: var(--dxds-color-surface-info-subtle-rest, #f0f9ff);
    --vnta-rising-value: var(--vnta-success);
    --vnta-falling-value: var(--vnta-danger);

    /* Mobile Standard Typography Scale (DevExpress Fluent 4px Grid) */
    --vnta-font-display: 24px;
    --vnta-font-title: 18px;
    --vnta-font-subtitle: 16px;
    --vnta-font-body: 14px;
    --vnta-font-caption: 12px;
    --vnta-font-badge: 11px;

    --vnta-line-height-display: 1.25;
    --vnta-line-height-title: 1.3;
    --vnta-line-height-subtitle: 1.35;
    --vnta-line-height-body: 1.45;
    --vnta-line-height-caption: 1.4;

    /* Mobile-only geometry, elevation and interaction. */
    --vnta-radius-sm: 8px;
    --vnta-radius-md: 12px;
    --vnta-radius-lg: 16px;
    --vnta-radius-full: 9999px;
    --vnta-shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
    --vnta-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 12%), 0 2px 4px -2px rgb(15 23 42 / 10%);
    --vnta-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 14%), 0 4px 6px -4px rgb(15 23 42 / 12%);
    --mobile-focus-ring: 0 0 0 3px color-mix(in srgb, var(--vnta-primary) 28%, transparent);
    --mobile-overlay: rgb(15 23 42 / 36%);
    --mobile-sheet-shadow: 0 -8px 28px rgb(15 23 42 / 15%);
    --mobile-bar-shadow: 0 -2px 10px rgb(15 23 42 / 8%);
    --mobile-disabled-opacity: 0.55;

    /* Mobile presentation aliases built from semantic tokens. */
    --vnta-on-hero: var(--vnta-primary-foreground);
    --vnta-hero-start: var(--vnta-primary);
    --vnta-hero-mid: color-mix(in srgb, var(--vnta-primary) 76%, var(--vnta-accent));
    --vnta-hero-end: color-mix(in srgb, var(--vnta-primary) 86%, #000000);
    --vnta-workshop-hero-start: color-mix(in srgb, var(--vnta-primary) 90%, #164e63);
    --vnta-workshop-hero-mid: color-mix(in srgb, var(--vnta-primary) 72%, var(--vnta-accent));
    --vnta-workshop-hero-end: color-mix(in srgb, var(--vnta-primary) 84%, #082f49);
    --vnta-on-hero-muted: rgb(255 255 255 / 78%);
    --vnta-on-hero-subtle: rgb(255 255 255 / 70%);
    --vnta-on-hero-divider: rgb(255 255 255 / 20%);
    --vnta-primary-shadow: color-mix(in srgb, var(--vnta-primary) 28%, transparent);
    --vnta-primary-shadow-strong: color-mix(in srgb, var(--vnta-primary) 38%, transparent);
    --vnta-status-shadow: color-mix(in srgb, var(--vnta-warning) 12%, transparent);
    --vnta-success-highlight: color-mix(in srgb, var(--vnta-success) 68%, #ffffff);

    /* Functional category aliases used by existing employee/workshop screens. */
    --vnta-orange-foreground: #9a3412;
    --vnta-orange-soft: #fff7ed;
    --vnta-orange-border: #fed7aa;
    --vnta-blue: var(--vnta-primary);
    --vnta-blue-foreground: var(--vnta-primary-hover);
    --vnta-blue-soft: var(--vnta-primary-light);
    --vnta-blue-light: var(--vnta-accent);
    --vnta-purple: #8b5cf6;
    --vnta-purple-foreground: #6d28d9;
    --vnta-purple-soft: #f5f3ff;
    --vnta-gray: #94a3b8;
    --vnta-gray-foreground: #475569;
    --vnta-gray-soft: #f1f5f9;
    --vnta-yellow: #eab308;
    --vnta-yellow-foreground: #a16207;
    --vnta-yellow-soft: #fef9c3;
}

[data-theme="dark"] {
    /* Fluent dark mode supplies the first value; the rest are standalone fallbacks. */
    --vnta-primary: var(--dxds-color-surface-primary-default-rest, #60a5fa);
    --vnta-primary-hover: var(--dxds-color-surface-primary-default-hovered, #93c5fd);
    --vnta-primary-light: var(--dxds-color-surface-brand-subtle-rest, #1e3a8a);
    --vnta-primary-foreground: var(--dxds-color-content-on-primary-default-rest, var(--dxds-color-content-primary-on-primary-rest, #082f49));
    --vnta-accent: var(--dxds-color-content-brand-default-rest, #7dd3fc);
    --vnta-background: var(--dxds-color-surface-neutral-subdued-rest, #0f172a);
    --vnta-surface: var(--dxds-color-surface-neutral-default-rest, #1e293b);
    --vnta-surface-card: var(--vnta-surface);
    --vnta-border: var(--dxds-color-border-neutral-default-rest, #334155);
    --vnta-text-main: var(--dxds-color-content-neutral-default-rest, #e2e8f0);
    --vnta-text-muted: var(--dxds-color-content-neutral-subtle-rest, #a6a7a9);
    --vnta-success: var(--dxds-color-content-success-default-rest, #34d399);
    --vnta-success-bg: var(--dxds-color-surface-success-subtle-rest, #064e3b);
    --vnta-success-border: var(--dxds-color-border-success-default-rest, #047857);
    --vnta-warning: var(--dxds-color-content-warning-default-rest, #fbbf24);
    --vnta-warning-bg: var(--dxds-color-surface-warning-subtle-rest, #78350f);
    --vnta-warning-border: var(--dxds-color-border-warning-default-rest, #b45309);
    --vnta-danger: var(--dxds-color-content-danger-default-rest, #f87171);
    --vnta-danger-bg: var(--dxds-color-surface-danger-subtle-rest, #7f1d1d);
    --vnta-danger-border: var(--dxds-color-border-danger-default-rest, #b91c1c);
    --vnta-info: var(--dxds-color-content-info-default-rest, #7dd3fc);
    --vnta-info-bg: var(--dxds-color-surface-info-subtle-rest, #0c4a6e);
    --vnta-orange-foreground: #fdba74;
    --vnta-orange-soft: #7c2d12;
    --vnta-orange-border: #c2410c;
    --vnta-purple: #a78bfa;
    --vnta-purple-foreground: #c4b5fd;
    --vnta-purple-soft: #4c1d95;
    --vnta-gray: #64748b;
    --vnta-gray-foreground: #cbd5e1;
    --vnta-gray-soft: #334155;
    --vnta-yellow: #facc15;
    --vnta-yellow-foreground: #fde047;
    --vnta-yellow-soft: #713f12;
    --vnta-success-highlight: #86efac;
    --mobile-overlay: rgb(2 6 23 / 58%);
    --mobile-sheet-shadow: 0 -8px 28px rgb(2 6 23 / 48%);
    --mobile-bar-shadow: 0 -2px 10px rgb(2 6 23 / 32%);
}

/* ==========================================================================
   Accessibility Standard (WCAG 2.1/2.2 AA & Front-End Checklist)
   ========================================================================== */

/* Focus Ring for Keyboard & Assistive Technology */
:focus-visible {
    outline: 2px solid var(--vnta-primary);
    outline-offset: 2px;
}

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