/* HRConnect Design System — semantic light/dark themes. */
@layer base {
    body.hrc-design-system-v1:where(.hrc-theme-profile-semantic) {
        --hrc-color-brand: var(--hrc-brand-600);
        --hrc-color-brand-hover: var(--hrc-brand-700);
        --hrc-color-brand-soft: var(--hrc-brand-50);
        --hrc-color-bg-app: #f3f7fb;
        --hrc-color-surface: var(--hrc-neutral-0);
        --hrc-color-surface-soft: var(--hrc-neutral-50);
        --hrc-color-surface-raised: var(--hrc-neutral-0);
        --hrc-color-text: var(--hrc-neutral-900);
        --hrc-color-text-soft: var(--hrc-neutral-700);
        --hrc-color-text-muted: var(--hrc-neutral-600);
        --hrc-color-border: var(--hrc-neutral-200);
        --hrc-color-border-strong: var(--hrc-neutral-300);
        --hrc-color-focus: var(--hrc-brand-700);
        --hrc-color-success: var(--hrc-success-600);
        --hrc-color-success-soft: var(--hrc-success-50);
        --hrc-color-warning: var(--hrc-warning-600);
        --hrc-color-warning-soft: var(--hrc-warning-50);
        --hrc-color-danger: var(--hrc-danger-600);
        --hrc-color-danger-soft: var(--hrc-danger-50);
        --hrc-color-info: var(--hrc-info-600);
        --hrc-color-info-soft: var(--hrc-info-50);

        /* Premium enterprise identity tones. These are presentation roles,
           deliberately separate from success/warning/error/info semantics. */
        --hrc-tone-violet-accent: var(--hrc-violet-600);
        --hrc-tone-violet-strong: var(--hrc-violet-700);
        --hrc-tone-blue-accent: var(--hrc-blue-600);
        --hrc-tone-blue-strong: var(--hrc-blue-700);
        --hrc-tone-emerald-accent: var(--hrc-emerald-700);
        --hrc-tone-emerald-strong: var(--hrc-emerald-800);
        --hrc-tone-amber-accent: var(--hrc-amber-700);
        --hrc-tone-amber-strong: var(--hrc-amber-900);
        --hrc-tone-neutral-accent: var(--hrc-neutral-600);
        --hrc-tone-neutral-strong: var(--hrc-neutral-700);
        --hrc-module-accent: var(--hrc-tone-blue-accent);
        --hrc-module-accent-strong: var(--hrc-tone-blue-strong);
        --hrc-module-tint: color-mix(in srgb, var(--hrc-module-accent) 10%, var(--hrc-color-surface));
        --hrc-module-tint-subtle: color-mix(in srgb, var(--hrc-module-accent) 5%, var(--hrc-color-surface));
        --hrc-module-border: color-mix(in srgb, var(--hrc-module-accent) 28%, var(--hrc-color-border));
        --hrc-module-icon-surface: color-mix(in srgb, var(--hrc-module-accent) 12%, var(--hrc-color-surface));
        --hrc-focus-ring: 0 0 0 var(--hrc-focus-width) color-mix(in srgb, var(--hrc-color-focus) 34%, transparent);
        --hrc-action-primary: var(--hrc-brand-600);
        --hrc-action-primary-hover: color-mix(in srgb, var(--hrc-action-primary) 84%, var(--hrc-color-text));
        --hrc-action-secondary: #6d5ce7;
        --hrc-action-secondary-hover: color-mix(in srgb, var(--hrc-action-secondary) 84%, var(--hrc-color-text));
        --hrc-action-success: var(--hrc-success-600);
        --hrc-action-success-hover: color-mix(in srgb, var(--hrc-action-success) 84%, var(--hrc-color-text));
        --hrc-action-warning: var(--hrc-warning-600);
        --hrc-action-warning-hover: color-mix(in srgb, var(--hrc-action-warning) 84%, var(--hrc-color-text));
        --hrc-action-danger: var(--hrc-danger-600);
        --hrc-action-danger-hover: color-mix(in srgb, var(--hrc-action-danger) 84%, var(--hrc-color-text));
        --hrc-action-info: var(--hrc-info-600);
        --hrc-action-neutral: var(--hrc-neutral-700);
        --hrc-action-on-primary: var(--hrc-static-white);
        --hrc-action-on-secondary: var(--hrc-static-white);
        --hrc-action-on-success: var(--hrc-static-white);
        --hrc-action-on-warning: var(--hrc-static-white);
        --hrc-action-on-danger: var(--hrc-static-white);
        --hrc-action-on-info: var(--hrc-static-white);
        --hrc-action-on-neutral: var(--hrc-static-white);
        --hrc-action-on-solid: var(--hrc-action-on-primary);
        --hrc-action-cta-start: var(--hrc-action-primary);
        --hrc-action-cta-middle: var(--hrc-action-secondary);
        --hrc-action-cta-end: var(--hrc-tone-emerald-accent);
        --hrc-action-cta-start-hover: var(--hrc-action-primary-hover);
        --hrc-action-cta-middle-hover: var(--hrc-action-secondary-hover);
        --hrc-action-cta-end-hover: var(--hrc-tone-emerald-strong);
        --hrc-action-cta-foreground: var(--hrc-static-white);
        --hrc-action-cta-background: linear-gradient(120deg, var(--hrc-action-cta-start), var(--hrc-action-cta-middle) 52%, var(--hrc-action-cta-end));
        --hrc-action-cta-background-hover: linear-gradient(120deg, var(--hrc-action-cta-start-hover), var(--hrc-action-cta-middle-hover) 52%, var(--hrc-action-cta-end-hover));
        --hrc-action-cta-shadow: 0 10px 24px color-mix(in srgb, var(--hrc-action-cta-start) 30%, transparent);
        --hrc-action-cta-shadow-active: 0 5px 14px color-mix(in srgb, var(--hrc-action-cta-start) 24%, transparent);
        --hrc-sidebar-surface:
            linear-gradient(
                160deg,
                color-mix(in srgb, var(--hrc-color-brand-soft) 78%, var(--hrc-color-surface)) 0%,
                var(--hrc-color-surface) 42%,
                color-mix(in srgb, var(--hrc-color-success-soft) 72%, var(--hrc-color-surface)) 100%
            );
        --hrc-sidebar-panel: color-mix(in srgb, var(--hrc-color-surface) 94%, transparent);
        --hrc-sidebar-text: var(--hrc-color-text);
        --hrc-sidebar-text-soft: var(--hrc-color-text-soft);
        --hrc-sidebar-text-muted: var(--hrc-color-text-muted);
        --hrc-sidebar-border: color-mix(in srgb, var(--hrc-color-brand) 18%, var(--hrc-color-border));
        --hrc-chart-1: #2563eb;
        --hrc-chart-2: #7c3aed;
        --hrc-chart-3: #059669;
        --hrc-chart-4: #d97706;
        --hrc-chart-5: #dc2626;
        --hrc-chart-6: #0891b2;
        --hrc-chart-7: #db2777;
        --hrc-chart-8: #4f46e5;
        --hrc-chart-9: #65a30d;
        --hrc-chart-10: #ea580c;
        --hrc-chart-11: #0d9488;
        --hrc-chart-12: #9333ea;

        /* Existing semantic names remain valid during progressive migration. */
        --hrc-canvas: var(--hrc-color-bg-app);
        --hrc-bg: var(--hrc-color-bg-app);
        --hrc-surface: var(--hrc-color-surface);
        --hrc-surface-soft: var(--hrc-color-surface-soft);
        --hrc-surface-raised: var(--hrc-color-surface-raised);
        --hrc-text: var(--hrc-color-text);
        --hrc-text-soft: var(--hrc-color-text-soft);
        --hrc-muted: var(--hrc-color-text-muted);
        --hrc-border: var(--hrc-color-border);
        --hrc-border-strong: var(--hrc-color-border-strong);
        --hrc-primary: var(--hrc-color-brand);
        --hrc-primary-strong: var(--hrc-color-brand-hover);
        --hrc-success: var(--hrc-color-success);
        --hrc-warning: var(--hrc-color-warning);
        --hrc-danger: var(--hrc-color-danger);
        --hrc-info: var(--hrc-color-info);
        --hrc-focus: var(--hrc-color-focus);

        /* Product-facing semantic aliases. Every application surface consumes
           these roles; Light/Dark themes only change the canonical --hrc-* map. */
        --color-text-primary: var(--hrc-color-text);
        --color-text-secondary: var(--hrc-color-text-soft);
        --color-text-muted: var(--hrc-color-text-muted);
        /* Inverse text belongs to always-dark media/overlay surfaces. Keep it
           independent from CTA foregrounds, which can legitimately switch to
           dark ink when a published action palette is sufficiently light. */
        --color-text-inverse: var(--hrc-static-white);
        --color-text-success: var(--hrc-color-success);
        --color-text-warning: var(--hrc-color-warning);
        --color-text-danger: var(--hrc-color-danger);
        --color-text-info: var(--hrc-color-info);
        --color-surface-canvas: var(--hrc-color-bg-app);
        --color-surface-primary: var(--hrc-color-surface);
        --color-surface-secondary: var(--hrc-color-surface-soft);
        --color-surface-raised: var(--hrc-color-surface-raised);
        --color-surface-overlay: color-mix(in srgb, var(--hrc-neutral-950) 62%, transparent);
        --color-surface-success: var(--hrc-color-success-soft);
        --color-surface-warning: var(--hrc-color-warning-soft);
        --color-surface-danger: var(--hrc-color-danger-soft);
        --color-surface-info: var(--hrc-color-info-soft);
        --color-border-default: var(--hrc-color-border);
        --color-border-strong: var(--hrc-color-border-strong);
        --color-border-success: color-mix(in srgb, var(--hrc-color-success) 36%, var(--hrc-color-border));
        --color-border-warning: color-mix(in srgb, var(--hrc-color-warning) 36%, var(--hrc-color-border));
        --color-border-danger: color-mix(in srgb, var(--hrc-color-danger) 36%, var(--hrc-color-border));
        --color-border-info: color-mix(in srgb, var(--hrc-color-info) 36%, var(--hrc-color-border));
        --color-icon-primary: var(--hrc-color-text);
        --color-icon-secondary: var(--hrc-color-text-muted);
        --color-icon-brand: var(--hrc-color-brand-hover);
        --color-icon-success: var(--hrc-color-success);
        --color-icon-warning: var(--hrc-color-warning);
        --color-icon-danger: var(--hrc-color-danger);
        --color-icon-info: var(--hrc-color-info);

        /* Canonical compatibility aliases: legacy ERP consumers inherit the
           published semantic theme instead of owning a parallel palette. */
        --erp152-bg: var(--hrc-color-bg-app);
        --erp152-card: var(--hrc-color-surface);
        --erp152-line: var(--hrc-color-border);
        --erp152-soft-line: var(--hrc-color-border-strong);
        --erp152-text: var(--hrc-color-text);
        --erp152-muted: var(--hrc-color-text-muted);
        --erp152-shadow: var(--hrc-shadow-sm);

        background: var(--hrc-color-bg-app);
        color: var(--hrc-color-text);
        font-family: var(--hrc-font-sans);
    }

    :is(html[data-qm-theme="dark"], html[data-hrc-theme="dark"]) body.hrc-design-system-v1 {
        --hrc-color-brand: #60a5fa;
        --hrc-color-brand-hover: #93c5fd;
        --hrc-color-brand-soft: color-mix(in srgb, var(--hrc-tone-blue-accent) 16%, var(--hrc-graphite-900));
        --hrc-color-bg-app: var(--hrc-graphite-950);
        --hrc-color-surface: var(--hrc-graphite-900);
        --hrc-color-surface-soft: var(--hrc-graphite-850);
        --hrc-color-surface-raised: var(--hrc-graphite-800);
        --hrc-color-text: #f1f5f9;
        --hrc-color-text-soft: #d8dee8;
        --hrc-color-text-muted: #aab4c2;
        --hrc-color-border: var(--hrc-graphite-700);
        --hrc-color-border-strong: var(--hrc-graphite-600);
        --hrc-color-focus: #93c5fd;
        --hrc-color-success: #4ade80;
        --hrc-color-success-soft: #103525;
        --hrc-color-warning: #fbbf24;
        --hrc-color-warning-soft: #3b2b0b;
        --hrc-color-danger: #fb7185;
        --hrc-color-danger-soft: #441725;
        --hrc-color-info: #38bdf8;
        --hrc-color-info-soft: #102f47;
        --hrc-tone-violet-accent: #a78bfa;
        --hrc-tone-violet-strong: #c4b5fd;
        --hrc-tone-blue-accent: #60a5fa;
        --hrc-tone-blue-strong: #93c5fd;
        --hrc-tone-emerald-accent: #34d399;
        --hrc-tone-emerald-strong: #6ee7b7;
        --hrc-tone-amber-accent: #fbbf24;
        --hrc-tone-amber-strong: #fcd34d;
        --hrc-tone-neutral-accent: #aab4c2;
        --hrc-tone-neutral-strong: #d8dee8;
        --hrc-action-primary: #60a5fa;
        --hrc-action-primary-hover: #93c5fd;
        --hrc-action-secondary: #a99cfb;
        --hrc-action-secondary-hover: color-mix(in srgb, var(--hrc-action-secondary) 82%, var(--hrc-neutral-0));
        --hrc-action-success: #4ade80;
        --hrc-action-success-hover: color-mix(in srgb, var(--hrc-action-success) 82%, var(--hrc-neutral-0));
        --hrc-action-warning: #fbbf24;
        --hrc-action-danger: #fb7185;
        --hrc-action-info: #38bdf8;
        --hrc-action-neutral: #cbd5e1;
        --hrc-action-on-primary: var(--hrc-neutral-950);
        --hrc-action-on-secondary: var(--hrc-neutral-950);
        --hrc-action-on-success: var(--hrc-neutral-950);
        --hrc-action-on-warning: var(--hrc-neutral-950);
        --hrc-action-on-danger: var(--hrc-neutral-950);
        --hrc-action-on-info: var(--hrc-neutral-950);
        --hrc-action-on-neutral: var(--hrc-neutral-950);
        --hrc-action-on-solid: var(--hrc-action-on-primary);
        --hrc-action-cta-start: var(--hrc-action-primary);
        --hrc-action-cta-middle: var(--hrc-action-secondary);
        --hrc-action-cta-end: var(--hrc-tone-emerald-accent);
        --hrc-action-cta-start-hover: var(--hrc-action-primary-hover);
        --hrc-action-cta-middle-hover: var(--hrc-action-secondary-hover);
        --hrc-action-cta-end-hover: var(--hrc-tone-emerald-strong);
        --hrc-action-cta-foreground: var(--hrc-neutral-950);
        --hrc-chart-1: #60a5fa;
        --hrc-chart-2: #a78bfa;
        --hrc-chart-3: #34d399;
        --hrc-chart-4: #fbbf24;
        --hrc-chart-5: #fb7185;
        --hrc-chart-6: #22d3ee;
        --hrc-chart-7: #f472b6;
        --hrc-chart-8: #818cf8;
        --hrc-chart-9: #a3e635;
        --hrc-chart-10: #fb923c;
        --hrc-chart-11: #2dd4bf;
        --hrc-chart-12: #c084fc;
        --hrc-shadow-xs: 0 2px 8px rgba(0, 0, 0, .16);
        --hrc-shadow-sm: 0 6px 18px rgba(0, 0, 0, .2);
        --hrc-shadow-md: 0 16px 38px rgba(0, 0, 0, .28);
        --hrc-shadow-lg: 0 24px 64px rgba(0, 0, 0, .38);
        color-scheme: dark;
    }

    :is(html[data-hrc-contrast="high"], html[data-hrc-theme="high-contrast"]) body.hrc-design-system-v1 {
        --hrc-color-bg-app: var(--hrc-neutral-0);
        --hrc-color-surface: var(--hrc-neutral-0);
        --hrc-color-surface-soft: var(--hrc-neutral-50);
        --hrc-color-surface-raised: var(--hrc-neutral-0);
        --hrc-color-text: var(--hrc-neutral-950);
        --hrc-color-text-soft: var(--hrc-neutral-900);
        --hrc-color-text-muted: var(--hrc-neutral-700);
        --hrc-color-border: var(--hrc-neutral-900);
        --hrc-color-border-strong: var(--hrc-neutral-950);
        --hrc-color-focus: var(--hrc-brand-700);
        --hrc-border-width: 2px;
        --hrc-focus-width: 3px;
        --hrc-shadow-xs: none;
        --hrc-shadow-sm: none;
        --hrc-shadow-md: none;
        --hrc-shadow-lg: none;
        color-scheme: light;
    }

    @media (prefers-color-scheme: dark) {
        html[data-hrc-theme="system"] body.hrc-design-system-v1 {
            --hrc-color-brand: #60a5fa;
            --hrc-color-brand-hover: #93c5fd;
            --hrc-color-brand-soft: color-mix(in srgb, var(--hrc-tone-blue-accent) 16%, var(--hrc-graphite-900));
            --hrc-color-bg-app: var(--hrc-graphite-950);
            --hrc-color-surface: var(--hrc-graphite-900);
            --hrc-color-surface-soft: var(--hrc-graphite-850);
            --hrc-color-surface-raised: var(--hrc-graphite-800);
            --hrc-color-text: #f1f5f9;
            --hrc-color-text-soft: #d8dee8;
            --hrc-color-text-muted: #aab4c2;
            --hrc-color-border: var(--hrc-graphite-700);
            --hrc-color-border-strong: var(--hrc-graphite-600);
            --hrc-color-focus: #93c5fd;
            --hrc-color-success: #4ade80;
            --hrc-color-success-soft: #103525;
            --hrc-color-warning: #fbbf24;
            --hrc-color-warning-soft: #3b2b0b;
            --hrc-color-danger: #fb7185;
            --hrc-color-danger-soft: #441725;
            --hrc-color-info: #38bdf8;
            --hrc-color-info-soft: #102f47;
            --hrc-tone-violet-accent: #a78bfa;
            --hrc-tone-violet-strong: #c4b5fd;
            --hrc-tone-blue-accent: #60a5fa;
            --hrc-tone-blue-strong: #93c5fd;
            --hrc-tone-emerald-accent: #34d399;
            --hrc-tone-emerald-strong: #6ee7b7;
            --hrc-tone-amber-accent: #fbbf24;
            --hrc-tone-amber-strong: #fcd34d;
            --hrc-tone-neutral-accent: #aab4c2;
            --hrc-tone-neutral-strong: #d8dee8;
            --hrc-action-primary: #60a5fa;
            --hrc-action-primary-hover: #93c5fd;
            --hrc-action-secondary: #a99cfb;
            --hrc-action-secondary-hover: color-mix(in srgb, var(--hrc-action-secondary) 82%, var(--hrc-neutral-0));
            --hrc-action-success: #4ade80;
            --hrc-action-success-hover: color-mix(in srgb, var(--hrc-action-success) 82%, var(--hrc-neutral-0));
            --hrc-action-warning: #fbbf24;
            --hrc-action-danger: #fb7185;
            --hrc-action-info: #38bdf8;
            --hrc-action-neutral: #cbd5e1;
            --hrc-action-on-primary: var(--hrc-neutral-950);
            --hrc-action-on-secondary: var(--hrc-neutral-950);
            --hrc-action-on-success: var(--hrc-neutral-950);
            --hrc-action-on-warning: var(--hrc-neutral-950);
            --hrc-action-on-danger: var(--hrc-neutral-950);
            --hrc-action-on-info: var(--hrc-neutral-950);
            --hrc-action-on-neutral: var(--hrc-neutral-950);
            --hrc-action-on-solid: var(--hrc-action-on-primary);
            --hrc-action-cta-start: var(--hrc-action-primary);
            --hrc-action-cta-middle: var(--hrc-action-secondary);
            --hrc-action-cta-end: var(--hrc-tone-emerald-accent);
            --hrc-action-cta-start-hover: var(--hrc-action-primary-hover);
            --hrc-action-cta-middle-hover: var(--hrc-action-secondary-hover);
            --hrc-action-cta-end-hover: var(--hrc-tone-emerald-strong);
            --hrc-action-cta-foreground: var(--hrc-neutral-950);
            color-scheme: dark;
        }
    }

    body.hrc-design-system-v1[data-hrc-module-tone="violet"] {
        --hrc-module-accent: var(--hrc-tone-violet-accent);
        --hrc-module-accent-strong: var(--hrc-tone-violet-strong);
    }

    body.hrc-design-system-v1[data-hrc-module-tone="blue"] {
        --hrc-module-accent: var(--hrc-tone-blue-accent);
        --hrc-module-accent-strong: var(--hrc-tone-blue-strong);
    }

    body.hrc-design-system-v1[data-hrc-module-tone="emerald"] {
        --hrc-module-accent: var(--hrc-tone-emerald-accent);
        --hrc-module-accent-strong: var(--hrc-tone-emerald-strong);
    }

    body.hrc-design-system-v1[data-hrc-module-tone="amber"] {
        --hrc-module-accent: var(--hrc-tone-amber-accent);
        --hrc-module-accent-strong: var(--hrc-tone-amber-strong);
    }

    body.hrc-design-system-v1[data-hrc-module-tone="neutral"] {
        --hrc-module-accent: var(--hrc-tone-neutral-accent);
        --hrc-module-accent-strong: var(--hrc-tone-neutral-strong);
    }

    body.hrc-design-system-v1 [data-hrc-tone="violet"] {
        --hrc-component-accent: var(--hrc-tone-violet-accent);
        --hrc-component-accent-strong: var(--hrc-tone-violet-strong);
    }

    body.hrc-design-system-v1 [data-hrc-tone="blue"] {
        --hrc-component-accent: var(--hrc-tone-blue-accent);
        --hrc-component-accent-strong: var(--hrc-tone-blue-strong);
    }

    body.hrc-design-system-v1 [data-hrc-tone="emerald"] {
        --hrc-component-accent: var(--hrc-tone-emerald-accent);
        --hrc-component-accent-strong: var(--hrc-tone-emerald-strong);
    }

    body.hrc-design-system-v1 [data-hrc-tone="amber"] {
        --hrc-component-accent: var(--hrc-tone-amber-accent);
        --hrc-component-accent-strong: var(--hrc-tone-amber-strong);
    }

    body.hrc-design-system-v1 [data-hrc-tone="neutral"] {
        --hrc-component-accent: var(--hrc-tone-neutral-accent);
        --hrc-component-accent-strong: var(--hrc-tone-neutral-strong);
    }

    body.hrc-design-system-v1 [data-hrc-tone] {
        --hrc-component-tint: color-mix(in srgb, var(--hrc-component-accent) 10%, var(--hrc-color-surface));
        --hrc-component-tint-subtle: color-mix(in srgb, var(--hrc-component-accent) 5%, var(--hrc-color-surface));
        --hrc-component-accent-border: color-mix(in srgb, var(--hrc-component-accent) 28%, var(--hrc-color-border));
        --hrc-component-icon-surface: color-mix(in srgb, var(--hrc-component-accent) 12%, var(--hrc-color-surface));
        --hrc-component-surface-accent: var(--hrc-component-accent);
        --hrc-component-surface-tint: var(--hrc-component-tint-subtle);
        --hrc-component-surface-accent-border: var(--hrc-component-accent-border);
        --hrc-component-hero-bg: var(--hrc-component-tint-subtle);
        --hrc-component-hero-border: var(--hrc-component-accent-border);
        --hrc-component-hero-accent: var(--hrc-component-accent);
        --hrc-component-hero-accent-strong: var(--hrc-component-accent-strong);
        --hrc-component-hero-icon-bg: var(--hrc-component-icon-surface);
        --hrc-component-kpi-bg: var(--hrc-component-tint-subtle);
        --hrc-component-kpi-border: var(--hrc-component-accent-border);
        --hrc-component-kpi-accent: var(--hrc-component-accent);
        --hrc-component-kpi-icon-bg: var(--hrc-component-icon-surface);
    }

    body.hrc-design-system-v1 :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
        outline-offset: var(--hrc-focus-offset);
        box-shadow: var(--hrc-focus-ring);
    }

    @media (forced-colors: active) {
        body.hrc-design-system-v1 :where(a, button, input, select, textarea, [tabindex]):focus-visible,
        body.hrc-design-system-v1 .hrc-switch input:focus-visible + .hrc-switch__track {
            outline: 3px solid Highlight;
            outline-offset: 2px;
            box-shadow: none;
            forced-color-adjust: auto;
        }
    }

    body.hrc-design-system-v1 [hidden] {
        display: none;
    }
}