/* ==========================================================================
   HELIOS AURORA — premium visual signature
   Loaded after semantic tokens and before terminal polish/bridge.
   ========================================================================== */

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../vendor/fonts/plus-jakarta-sans/5.3.0/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    color-scheme: dark;
}

body.light-theme,
body.theme-light,
html[data-theme='light'] {
    color-scheme: light;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--h-font-family, 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif);
}

html:root:not([data-theme='light']) {
    background-color: var(--aurora-bg) !important;
}

html:root[data-theme='light'] {
    background-color: var(--aurora-bg) !important;
}

body {
    background-color: var(--aurora-bg) !important;
    color: var(--aurora-text);
    font-variant-numeric: tabular-nums;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.header-title {
    font-family: var(--h-font-header, var(--h-font-family, 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif));
    font-feature-settings: 'ss02' 1, 'cv05' 1;
    letter-spacing: -0.025em;
}

#sidebar,
.sidebar,
.helios-sidebar {
    background:
        radial-gradient(circle at 50% 0%, var(--accent-primary-20), transparent 34%),
        linear-gradient(180deg, #111529 0%, var(--aurora-bg) 100%);
    border-inline-end-color: var(--aurora-border);
}

.helios-header,
.unified-header,
.phi-header,
.page-header {
    position: relative;
    background: color-mix(in srgb, var(--aurora-surface) 94%, transparent);
    border: var(--space-1) solid var(--aurora-border);
    box-shadow: var(--aurora-shadow-card);
    color: var(--aurora-text);
}

.helios-header::before,
.unified-header::before,
.phi-header::before,
.page-header::before {
    position: absolute;
    inset: 0 0 auto;
    height: var(--space-1);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--aurora-primary), var(--aurora-solar));
    content: '';
}

html body[class] header.helios-header::before {
    background: linear-gradient(90deg, var(--aurora-primary), var(--aurora-solar)) !important;
    background-size: 100% 100% !important;
}

.h-card,
.phi-card,
.glass-card,
.dashboard-card,
.phi-kpi-card {
    background: var(--aurora-surface);
    border-color: var(--aurora-border);
    box-shadow: var(--aurora-shadow-card);
    color: var(--aurora-text);
}

.h-card:hover,
.phi-card:hover,
.glass-card:hover,
.dashboard-card:hover,
.phi-kpi-card:hover {
    border-color: var(--accent-primary-30);
    box-shadow: var(--aurora-shadow-raised);
}

html body[class] .btn-primary,
html body[class] .phi-btn-primary,
html body[class] .h-btn-primary,
html body[class] [data-variant='primary'],
html body[class] .helios-header .btn-header-primary,
html body[class] .btn-quick-leave-cta,
html body[class] .cra-admin .btn-primary,
html body[class] .cra-admin-cta,
/* MESURE, pas decoration. `html body[class] .cra-admin-cta` pese (0,2,2) et
   PERD en theme sombre contre la garde de contraste AA de
   helios-design-tokens-v2.css, `html body:not(.light-theme) .btn-toolbar.primary`,
   qui pese (0,3,2) : mesure en preuve headed, le CTA « Generer les factures »
   repassait au degrade rouge #D6273C. L'identifiant metier retire ici gagnait
   ce duel par son ID (1,2,2). Le compose ci-dessous pese (0,4,2) : il gagne
   sans ID et sans dependre de l'ordre de chargement. */
html body[class] .btn-toolbar.primary.cra-admin-cta,
html body[class] .cra-export-btn {
    background-color: var(--aurora-primary) !important;
    background-image: none !important;
    border-color: var(--aurora-primary) !important;
    box-shadow: 0 var(--space-2) var(--space-5) var(--accent-primary-20);
    color: var(--aurora-on-primary) !important;
}

html body[class] .btn-primary:hover,
html body[class] .phi-btn-primary:hover,
html body[class] .h-btn-primary:hover,
html body[class] [data-variant='primary']:hover,
html body[class] .helios-header .btn-header-primary:hover,
html body[class] .btn-quick-leave-cta:hover,
html body[class] .cra-admin .btn-primary:hover,
html body[class] .cra-admin-cta:hover,
html body[class] .btn-toolbar.primary.cra-admin-cta:hover,
html body[class] .cra-export-btn:hover {
    background-color: var(--aurora-primary-hover) !important;
    background-image: none !important;
    border-color: var(--aurora-primary-hover) !important;
    box-shadow: 0 var(--space-3) var(--space-6) var(--accent-primary-30);
    transform: translateY(calc(var(--space-1) * -1));
}

.form-control,
.form-select,
.h-input,
.filter-search-input,
.filter-select {
    background: var(--aurora-surface-raised);
    border-color: var(--aurora-border);
    color: var(--aurora-text);
}

.form-control:focus,
.form-select:focus,
.h-input:focus,
.filter-search-input:focus,
.filter-select:focus {
    background: var(--aurora-surface);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 var(--space-2) var(--accent-primary-20);
    outline: none;
}

.table,
.phi-table {
    color: var(--aurora-text);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--aurora-border);
    color: var(--aurora-text);
}

.table thead,
.phi-table thead {
    background: var(--aurora-surface-raised);
    color: var(--aurora-text-secondary);
}

.table tbody tr:hover,
.phi-table tbody tr:hover {
    background: var(--accent-primary-05);
}

.phi-kpi-card {
    position: relative;
    overflow: hidden;
}

.phi-kpi-card::after {
    position: absolute;
    inset: auto var(--space-5) 0;
    height: var(--space-1);
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--aurora-primary), var(--aurora-solar));
    content: '';
    opacity: 0.81;
}

/* Product signature: navigation and guidance use Aurora, while semantic
   success/warning/danger colors keep their business meaning. */
html body[class] .hub-hero-premium {
    background:
        radial-gradient(circle at 88% 18%, rgba(var(--aurora-primary-rgb), 0.18), transparent 38%),
        linear-gradient(137.5deg, rgba(var(--aurora-primary-rgb), 0.11), var(--aurora-surface)) !important;
    border-color: rgba(var(--aurora-primary-rgb), 0.30) !important;
}

html body[class] .filter-chip.active,
html body[class] .helios-tab-btn.active,
html body[class] .view-toggle-btn.active {
    background-color: var(--aurora-primary) !important;
    background-image: none !important;
    border-color: var(--aurora-primary) !important;
    box-shadow: 0 var(--space-2) var(--space-5) var(--accent-primary-20) !important;
    color: var(--aurora-on-primary) !important;
}

html body[class] .filter-chip.active :is(i, .chip-count),
html body[class] .helios-tab-btn.active :is(i, .tab-badge),
html body[class] .view-toggle-btn.active i {
    color: inherit !important;
}

html body[class] .sidebar-link.active,
html body[class] .sidebar-sublink.active {
    background: linear-gradient(90deg, var(--accent-primary-20), transparent 92%) !important;
    border-color: var(--accent-primary-30) !important;
}

html body[class] .sidebar-link.active i,
html body[class] .sidebar-sublink.active i {
    color: var(--aurora-primary) !important;
    filter: drop-shadow(0 0 var(--space-2) var(--accent-primary-50)) !important;
}

html body[class] .sidebar-link:not(.active) i,
html body[class] .sidebar-sublink:not(.active) i {
    color: var(--aurora-text-secondary) !important;
    filter: none !important;
}

html body[class] .helios-help-fab {
    background-color: var(--aurora-primary) !important;
    background-image: none !important;
    border-color: var(--accent-primary-50) !important;
    box-shadow: 0 var(--space-3) var(--space-7) var(--accent-primary-30) !important;
    color: var(--aurora-on-primary) !important;
}

html body[class] .helios-help-fab:hover,
html body[class] .helios-help-fab:focus-visible {
    background-color: var(--aurora-primary-hover) !important;
    box-shadow: 0 var(--space-4) var(--space-8) var(--accent-primary-50) !important;
}

/* Public entry point: the login must sell the product before authentication. */
.login-page::before {
    background:
        radial-gradient(circle at 16% 18%, rgba(var(--aurora-primary-rgb), 0.24) 0%, transparent 38%),
        radial-gradient(circle at 84% 78%, color-mix(in srgb, var(--aurora-solar) 16%, transparent) 0%, transparent 42%),
        linear-gradient(155deg, var(--aurora-bg) 0%, #11152A 55%, var(--aurora-surface) 100%) !important;
}

.login-page.light-theme::before {
    background:
        radial-gradient(circle at 14% 16%, rgba(var(--aurora-primary-rgb), 0.15) 0%, transparent 38%),
        radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--aurora-solar) 13%, transparent) 0%, transparent 44%),
        linear-gradient(155deg, var(--aurora-bg) 0%, var(--aurora-surface-raised) 56%, var(--aurora-surface) 100%) !important;
}

html body.login-page .login-container {
    background: var(--aurora-surface) !important;
    border-color: color-mix(in srgb, var(--aurora-primary) 25%, var(--aurora-border)) !important;
    box-shadow:
        var(--aurora-shadow-raised),
        0 0 var(--space-10) rgba(var(--aurora-primary-rgb), 0.13) !important;
}

.login-page .login-container::before {
    background: linear-gradient(90deg, transparent, var(--aurora-primary), var(--aurora-solar), transparent) !important;
}

.login-page .btn-login {
    background: var(--aurora-primary) !important;
    border-color: var(--aurora-primary) !important;
    color: var(--aurora-on-primary) !important;
    box-shadow: 0 var(--space-1) var(--space-5) rgba(var(--aurora-primary-rgb), 0.32) !important;
}

.login-page .btn-login:hover {
    background: var(--aurora-primary-hover) !important;
    border-color: var(--aurora-primary-hover) !important;
    box-shadow: 0 var(--space-2) var(--space-6) rgba(var(--aurora-primary-rgb), 0.38) !important;
}

.login-page .btn-login:focus-visible,
html body.login-page .login-container input.form-control:not([type="checkbox"]):not([type="radio"]):focus {
    border-color: var(--aurora-primary) !important;
    box-shadow: 0 0 0 var(--space-1) rgba(var(--aurora-primary-rgb), 0.24) !important;
    outline: 2px solid var(--focus-ring, #1677C8) !important;
    outline-offset: 2px !important;
}

html body[class] .helios-consent-banner .gdpr-accept {
    background: var(--aurora-primary) !important;
    color: var(--aurora-on-primary) !important;
}

/* L'encre de la banniere de consentement SUIT le theme.
   Ces deux regles figeaient un blanc casse en !important — ecrites quand la
   banniere etait toujours sombre. Des qu'elle a su suivre le theme clair, son
   fond est passe au blanc pendant que son texte restait blanc : contraste
   mesure en production 1,05:1, un avis LEGAL rendu illisible. */
html body[class] .helios-consent-banner {
    color: var(--text-primary, var(--hx-slate-50)) !important;
}

html body[class] .helios-consent-banner .gdpr-text {
    color: var(--text-primary, var(--hx-slate-50)) !important;
}

.login-page .sun-core {
    fill: var(--aurora-solar) !important;
    filter: drop-shadow(0 0 var(--space-3) color-mix(in srgb, var(--aurora-solar) 72%, transparent)) !important;
}

.login-page .sun-rays line {
    stroke: var(--aurora-solar) !important;
}

.login-page .login-value-icon {
    background: rgba(var(--aurora-primary-rgb), 0.12) !important;
    border-color: rgba(var(--aurora-primary-rgb), 0.24) !important;
    color: var(--aurora-primary) !important;
}

.login-page .forgot-link,
.login-page .cookie-link {
    color: var(--aurora-primary) !important;
}

.login-page .brand-name {
    background: linear-gradient(90deg, var(--aurora-text), var(--aurora-solar));
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-page.light-theme .brand-name {
    background: linear-gradient(90deg, var(--aurora-text), var(--aurora-primary));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a,
.link,
.text-link {
    text-decoration-thickness: var(--space-1);
    text-underline-offset: var(--space-2);
}

@media (prefers-reduced-motion: no-preference) {
    .btn-primary,
    .phi-btn-primary,
    .h-btn-primary,
    [data-variant='primary'],
    .h-card,
    .phi-card,
    .glass-card,
    .dashboard-card,
    .phi-kpi-card {
        transition:
            background-color var(--duration-normal) var(--ease-golden),
            border-color var(--duration-normal) var(--ease-golden),
            box-shadow var(--duration-normal) var(--ease-golden),
            color var(--duration-normal) var(--ease-golden),
            transform var(--duration-normal) var(--ease-golden);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .phi-btn-primary,
    .h-btn-primary,
    [data-variant='primary'],
    .h-card,
    .phi-card,
    .glass-card,
    .dashboard-card,
    .phi-kpi-card {
        transition-duration: 0.01ms;
        transform: none;
    }
}