/* ============================================================================
   HELIOS DESIGN TOKENS v2 — "Stellar"
   ============================================================================

   Palette premium B2B CRM (Linear / Vercel / Notion grade).
   Charge APRÈS theme-global.css + sidebar-main.css → override cascade.

   Brand : Indigo #6366F1 (modern, trust, premium).
   Neutrals : Slate (true cool gray, WCAG-friendly).
   Backgrounds : Slate-950 → slate-800 (dark), slate-50 → white (light).
   Typography : Inter (variable 300–800).
   Shadows : refined, layered, slate-tinted (not pure black).
   Glassmorphism : subtle blur 20px + saturate 180% (a11y-safe).

   PHILOSOPHIE :
   - Light-first quality (B2B accessibility, datadense screens).
   - Dark mode = polished, not aggressive (slate, not black).
   - Same brand color in both modes → recognition.
   - φ spacing system preserved (already excellent).
   ============================================================================ */

/* Premium typography — Inter + JetBrains Mono.
   Loaded via <link rel="preconnect"> + <link rel="stylesheet"> in layout-wrapper.phtml
   and phi-css.phtml for optimal performance (no render-blocking @import). */

:root {
    /* ========================================================================
       1. BRAND PALETTE — Indigo / Sky / Emerald
       ======================================================================== */

    /* Indigo (PRIMARY brand) — main CTA, focus, links */
    --hx-indigo-50:  #EEF2FF;
    --hx-indigo-100: #E0E7FF;
    --hx-indigo-200: #C7D2FE;
    --hx-indigo-300: #A5B4FC;
    --hx-indigo-400: #818CF8;
    --hx-indigo-500: #6366F1;
    --hx-indigo-600: #4F46E5;
    --hx-indigo-700: #4338CA;
    --hx-indigo-800: #3730A3;
    --hx-indigo-900: #312E81;
    --hx-indigo-950: #1E1B4B;

    /* Violet (SECONDARY) — gradient pair with indigo */
    --hx-violet-400: #A78BFA;
    --hx-violet-500: #8B5CF6;
    --hx-violet-600: #7C3AED;
    --hx-violet-700: #6D28D9;

    /* Sky (TERTIARY ACCENT) — data viz, info */
    --hx-sky-400: #38BDF8;
    --hx-sky-500: #0EA5E9;
    --hx-sky-600: #0284C7;
    --hx-sky-700: #0369A1;

    /* Emerald (SUCCESS) */
    --hx-emerald-400: #34D399;
    --hx-emerald-500: #10B981;
    --hx-emerald-600: #059669;
    --hx-emerald-700: #047857;

    /* Amber (WARNING) */
    --hx-amber-400: #FBBF24;
    --hx-amber-500: #F59E0B;
    --hx-amber-600: #D97706;
    --hx-amber-700: #B45309;

    /* Rose (DANGER) */
    --hx-rose-400: #FB7185;
    --hx-rose-500: #F43F5E;
    --hx-rose-600: #E11D48;
    --hx-rose-700: #BE123C;

    /* ========================================================================
       2. NEUTRALS — Slate (cool gray, premium)
       ======================================================================== */
    --hx-slate-50:  #F8FAFC;
    --hx-slate-100: #F1F5F9;
    --hx-slate-200: #E2E8F0;
    --hx-slate-300: #CBD5E1;
    --hx-slate-400: #94A3B8;
    --hx-slate-500: #64748B;
    --hx-slate-600: #475569;
    --hx-slate-700: #334155;
    --hx-slate-800: #1E293B;
    --hx-slate-900: #0F172A;
    --hx-slate-950: #020617;

    /* ========================================================================
       3. SEMANTIC OVERRIDES — redefining legacy tokens to new palette
       Cascade: ces redéfinitions priment sur theme-global.css (chargé avant)
       ======================================================================== */

    /* Accent primary (was cyan #6366F1) → indigo */
    --accent-primary:        var(--hx-indigo-500);
    --accent-primary-hover:  var(--hx-indigo-600);
    --accent-primary-active: var(--hx-indigo-700);

    /* Accent secondary (was violet) → richer violet */
    --accent-secondary:        var(--hx-violet-500);
    --accent-secondary-hover:  var(--hx-violet-600);

    /* Accent tertiary (was magenta) → emerald (success-ish accent) */
    --accent-tertiary: var(--hx-emerald-500);

    /* Brand gradient — indigo → violet (137.5° golden angle preserved) */
    --accent-gradient: linear-gradient(137.5deg, var(--hx-indigo-500) 0%, var(--hx-violet-500) 100%);

    /* Aliases legacy (used massively) */
    --accent-cyan:        var(--hx-sky-500);
    --accent-coral:       var(--hx-rose-500);
    --accent-terracotta:  var(--hx-amber-600);

    /* Opacity variants — indigo (0.05 → 0.5) */
    --accent-primary-05: rgba(99, 102, 241, 0.05);
    --accent-primary-08: rgba(99, 102, 241, 0.08);
    --accent-primary-10: rgba(99, 102, 241, 0.10);
    --accent-primary-13: rgba(99, 102, 241, 0.13);
    --accent-primary-15: rgba(99, 102, 241, 0.15);
    --accent-primary-20: rgba(99, 102, 241, 0.20);
    --accent-primary-30: rgba(99, 102, 241, 0.30);
    --accent-primary-50: rgba(99, 102, 241, 0.50);
    --accent-secondary-10: rgba(139, 92, 246, 0.10);
    --accent-secondary-15: rgba(139, 92, 246, 0.15);
    --accent-secondary-20: rgba(139, 92, 246, 0.20);
    --accent-secondary-30: rgba(139, 92, 246, 0.30);

    /* Status colors — refined */
    --success:       var(--hx-emerald-500);
    --success-light: var(--hx-emerald-400);
    --success-dark:  var(--hx-emerald-700);
    --success-bg:    rgba(16, 185, 129, 0.10);
    --warning:       var(--hx-amber-500);
    --warning-light: var(--hx-amber-400);
    --warning-dark:  var(--hx-amber-700);
    --warning-bg:    rgba(245, 158, 11, 0.10);
    --danger:        var(--hx-rose-500);
    --danger-light:  var(--hx-rose-400);
    --danger-dark:   var(--hx-rose-700);
    --danger-bg:     rgba(244, 63, 94, 0.10);
    --info:          var(--hx-sky-500);
    --info-light:    var(--hx-sky-400);
    --info-dark:     var(--hx-sky-700);
    --info-bg:       rgba(14, 165, 233, 0.10);

    /* φ palette HSL overrides — keep structure, swap hue */
    --phi-cyan:    var(--hx-indigo-500);   /* primary */
    --phi-violet:  var(--hx-violet-500);
    --phi-magenta: var(--hx-violet-600);
    --phi-lime:    var(--hx-emerald-500);

    --phi-success:  var(--hx-emerald-500);
    --phi-warning:  var(--hx-amber-500);
    --phi-danger:   var(--hx-rose-500);
    --phi-info:     var(--hx-sky-500);

    /* ========================================================================
       4. BACKGROUNDS — Slate gradient (dark) / White (light)
       ======================================================================== */

    /* Helios background tokens (used by sidebar, ATS, auth, etc.) */
    --helios-bg-darkest:    var(--hx-slate-950);   /* #020617 */
    --helios-bg-darker:     var(--hx-slate-900);   /* #0F172A */
    --helios-bg-dark:       var(--hx-slate-800);   /* #1E293B */
    --helios-bg-dark-95:    var(--hx-slate-800);

    /* Unified body background — premium slate gradient (dark default) */
    --theme-bg-start: var(--hx-slate-950);
    --theme-bg-mid1:  var(--hx-slate-900);
    --theme-bg-mid2:  #111827;
    --theme-bg-end:   var(--hx-slate-800);
    --theme-bg-gradient: linear-gradient(180deg,
        var(--hx-slate-950) 0%,
        var(--hx-slate-900) 38.2%,
        #111827 61.8%,
        var(--hx-slate-800) 100%
    );

    /* ===================================================================
       Sidebar palette — overrides + ALIAS sémantiques (non-breaking).
       --cyan-* : legacy name (sidebar-main.css, chat-pusher, etc.)
       --sidebar-bg-* : nom sémantique correct (DEPRECATED le --cyan-* à terme)
       Les deux pointent vers la même valeur slate/indigo : changement de nom
       sans effet visuel. Pattern Design : Alias d'abord, rename après.
       =================================================================== */
    --cyan-900: var(--hx-slate-950);
    --cyan-800: var(--hx-slate-900);
    --cyan-700: var(--hx-slate-800);
    --cyan-600: var(--hx-slate-700);
    --cyan-500: var(--hx-indigo-600);
    --cyan-400: var(--hx-indigo-500);
    --cyan-300: var(--hx-indigo-400);
    --cyan-200: var(--hx-indigo-300);
    --cyan-100: var(--hx-indigo-200);
    --cyan-50:  var(--hx-indigo-50);

    /* Sidebar-bg-* (sémantique correct, à utiliser pour nouveau code) */
    --sidebar-bg-darkest:  var(--hx-slate-950);
    --sidebar-bg-darker:   var(--hx-slate-900);
    --sidebar-bg-dark:     var(--hx-slate-800);
    --sidebar-bg-medium:   var(--hx-slate-700);
    --sidebar-accent:      var(--hx-indigo-500);
    --sidebar-accent-hover:var(--hx-indigo-600);
    --sidebar-text:        #F8FAFC;
    --sidebar-text-muted:  rgba(255, 255, 255, 0.65);
    --sidebar-border:      rgba(99, 102, 241, 0.10);

    /* Solid surfaces (kept for vivier/cra modules) */
    --bg-body:           var(--hx-slate-900);
    --bg-card-solid:     var(--hx-slate-800);
    --bg-elevated-solid: var(--hx-slate-700);

    /* Glass surfaces — refined opacity (bumped for premium glassmorphism visibility) */
    --bg-card:           rgba(255, 255, 255, 0.06);
    --bg-card-hover:     rgba(255, 255, 255, 0.10);
    --bg-glass:          rgba(255, 255, 255, 0.07);
    --bg-glass-hover:    rgba(255, 255, 255, 0.11);
    --bg-input:          rgba(255, 255, 255, 0.05);
    --bg-input-focus:    rgba(255, 255, 255, 0.08);

    /* Text colors on dark — high contrast */
    --text-primary:      #F8FAFC;
    --text-secondary:    #CBD5E1;
    --text-muted:        #94A3B8;
    --text-disabled:     #64748B;
    --text-inverse:      var(--hx-slate-900);

    /* Borders — subtle */
    --border-color:        rgba(148, 163, 184, 0.12);
    --border-color-hover:  rgba(148, 163, 184, 0.24);
    --border-focus:        var(--hx-indigo-500);

    /* ===================================================================
       CONTRAST FIX — semantic "text-dark" alias was rgba(0,0,0,0.81)
       which is INVISIBLE on dark bg. Remap to context-aware text color.
       Same for --text-secondary-dark, --text-muted-light/dark.
       φ-compliance: uses --text-primary/secondary tokens (already φ).
       =================================================================== */
    --text-dark:            var(--text-primary);
    --text-secondary-dark:  var(--text-secondary);
    --text-dark-secondary:  var(--text-secondary);
    --text-muted-light:     var(--text-muted);
    --text-muted-dark:      var(--text-disabled);

    /* ========================================================================
       5. SHADOWS — Layered, slate-tinted (not pure black)
       ======================================================================== */
    --shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.06);
    --shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.10),
                  0 1px 2px -1px rgba(15, 23, 42, 0.06);
    --shadow-md:  0 4px 8px -2px rgba(15, 23, 42, 0.12),
                  0 2px 4px -2px rgba(15, 23, 42, 0.08);
    --shadow-lg:  0 12px 24px -6px rgba(15, 23, 42, 0.18),
                  0 4px 8px -2px rgba(15, 23, 42, 0.10);
    --shadow-xl:  0 24px 48px -12px rgba(15, 23, 42, 0.25),
                  0 8px 16px -4px rgba(15, 23, 42, 0.10);
    --shadow-2xl: 0 32px 64px -16px rgba(15, 23, 42, 0.35);

    /* Glow (focus/hover) — indigo brand */
    --shadow-glow-sm: 0 0 0 3px rgba(99, 102, 241, 0.15);
    --shadow-glow-md: 0 0 16px rgba(99, 102, 241, 0.28);
    --shadow-glow-lg: 0 0 32px rgba(99, 102, 241, 0.35);
    --shadow-glow-xl: 0 0 48px rgba(99, 102, 241, 0.42);

    /* ========================================================================
       6. TYPOGRAPHY — Inter as primary, JetBrains Mono for code
       ======================================================================== */
    --h-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --h-font-mono:   'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;

    /* ========================================================================
       7. GLASSMORPHISM — Refined backdrop blur
       ======================================================================== */
    --h-glass-blur:   20px;
    --h-glass-sat:    180%;
    --h-glass-bg:     rgba(255, 255, 255, 0.04);
    --h-glass-border: rgba(255, 255, 255, 0.08);

    /* ========================================================================
       8. FOCUS RING — accessible, beautiful
       ======================================================================== */
    --focus-ring:        0 0 0 3px rgba(99, 102, 241, 0.40);
    --focus-ring-offset: 2px;
}

/* ============================================================================
   CRITICAL FIX — Force phi-gray palette to DARK-mode values by default
   ============================================================================
   ROOT CAUSE : helios-golden-ratio.css contient un
   @media (prefers-color-scheme: light) { :root { --phi-gray-* : noir-alpha } }
   qui flippe la palette selon l'OS. theme-global.js applique .dark-theme par
   défaut (CLASSE) mais le legacy attend [data-theme="dark"] (ATTRIBUT) →
   mismatch → texte noir sur fond noir en OS-light.

   Fix : force la palette dark sur body:not(.light-theme), peu importe l'OS.
   body a une spécificité plus haute que :root dans la cascade des vars
   consommées dans des descendants de body.
   ============================================================================ */
/* Spécificité maximisée pour battre toute autre règle du legacy ; au pire
   égalité → cascade order (v2 charge en dernier) garantit win. */
html body:not(.light-theme),
html body.dark-theme,
html:not(.light-theme) body {
    --phi-gray-50:   rgba(255, 255, 255, 0.05);
    --phi-gray-100:  rgba(255, 255, 255, 0.08);
    --phi-gray-200:  rgba(255, 255, 255, 0.13);
    --phi-gray-300:  rgba(255, 255, 255, 0.21);
    --phi-gray-400:  rgba(255, 255, 255, 0.34);
    --phi-gray-500:  rgba(255, 255, 255, 0.55);
    --phi-gray-600:  rgba(255, 255, 255, 0.69);
    --phi-gray-700:  rgba(255, 255, 255, 0.81);
    --phi-gray-800:  rgba(255, 255, 255, 0.90);
    --phi-gray-900:  rgba(255, 255, 255, 0.95);

    /* NOTE: --phi-dark-* gardés en BLACK-alpha (sémantique = overlay dark)
       car utilisés comme BACKGROUND dans plusieurs wizards (ats-wizard, etc).
       Les modules qui les utilisaient comme color: TEXT sont corrigés via
       sélecteurs ciblés dans stellar-polish.css (section Universal Contrast). */

    /* CRITICAL — re-anchor semantic text tokens at body level, sinon
       l'inherit from :root @media (prefers-color-scheme: light) garde
       du noir-alpha sur fond dark. */
    --text-primary:   #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted:     #94A3B8;
    --text-disabled:  #64748B;
    --text-inverse:   #0F172A;

    /* Aliases legacy redirigés vers tokens primaires */
    --text-dark:           var(--text-primary);
    --text-secondary-dark: var(--text-secondary);
    --text-dark-secondary: var(--text-secondary);
    --text-muted-light:    var(--text-muted);
    --text-muted-dark:     var(--text-disabled);

    /* Backgrounds re-ancrés aussi (au cas où @media OS-light les flippe) */
    --bg-card:        rgba(255, 255, 255, 0.06);
    --bg-card-hover:  rgba(255, 255, 255, 0.10);
    --bg-glass:       rgba(255, 255, 255, 0.07);
    --bg-glass-hover: rgba(255, 255, 255, 0.11);
    --bg-input:       rgba(255, 255, 255, 0.05);
    --bg-input-focus: rgba(255, 255, 255, 0.08);
    --border-color:       rgba(148, 163, 184, 0.12);
    --border-color-hover: rgba(148, 163, 184, 0.24);
}

/* NUCLEAR OPTION — kill the @media (prefers-color-scheme: light) flip
   au niveau :root pour les phi-gray ; même si le browser est OS-light,
   tant qu'on n'a pas explicitement body.light-theme, on reste dark. */
@media (prefers-color-scheme: light) {
    :root {
        --phi-gray-50:   rgba(255, 255, 255, 0.05);
        --phi-gray-100:  rgba(255, 255, 255, 0.08);
        --phi-gray-200:  rgba(255, 255, 255, 0.13);
        --phi-gray-300:  rgba(255, 255, 255, 0.21);
        --phi-gray-400:  rgba(255, 255, 255, 0.34);
        --phi-gray-500:  rgba(255, 255, 255, 0.55);
        --phi-gray-600:  rgba(255, 255, 255, 0.69);
        --phi-gray-700:  rgba(255, 255, 255, 0.81);
        --phi-gray-800:  rgba(255, 255, 255, 0.90);
        --phi-gray-900:  rgba(255, 255, 255, 0.95);

        /* phi-dark-* NOT overridden (used as BG in wizards) */

        --text-primary:   #F8FAFC;
        --text-secondary: #CBD5E1;
        --text-muted:     #94A3B8;
        --text-disabled:  #64748B;
    }
    /* Si l'utilisateur a explicitement choisi LIGHT via toggle, revenir au light */
    body.light-theme {
        --phi-gray-50:   rgba(0, 0, 0, 0.05);
        --phi-gray-100:  rgba(0, 0, 0, 0.08);
        --phi-gray-200:  rgba(0, 0, 0, 0.13);
        --phi-gray-300:  rgba(0, 0, 0, 0.21);
        --phi-gray-400:  rgba(0, 0, 0, 0.34);
        --phi-gray-500:  rgba(0, 0, 0, 0.55);
        --phi-gray-600:  rgba(0, 0, 0, 0.69);
        --phi-gray-700:  rgba(0, 0, 0, 0.81);
        --phi-gray-800:  rgba(0, 0, 0, 0.90);
        --phi-gray-900:  rgba(0, 0, 0, 0.95);
        --text-primary:  var(--hx-slate-900);
    }
}

/* ============================================================================
   LIGHT THEME OVERRIDES (explicit class — applies on body.light-theme)
   ============================================================================ */
body.light-theme,
[data-theme="light"] {
    /* In light mode, --text-dark stays dark (legacy semantic) */
    --text-dark:           var(--hx-slate-900);
    --text-secondary-dark: var(--hx-slate-600);
    --text-dark-secondary: var(--hx-slate-600);
    --text-muted-light:    var(--hx-slate-500);
    --text-muted-dark:     var(--hx-slate-400);

    /* Backgrounds — soft white with subtle indigo tint */
    --theme-bg-start: #FFFFFF;
    --theme-bg-mid1:  var(--hx-slate-50);
    --theme-bg-mid2:  #F1F5F9;
    --theme-bg-end:   var(--hx-slate-100);
    --theme-bg-gradient: linear-gradient(180deg, #FFFFFF 0%, var(--hx-slate-50) 100%);

    --bg-body:           var(--hx-slate-50);
    --bg-card-solid:     #FFFFFF;
    --bg-elevated-solid: #FFFFFF;

    /* Glass surfaces — solid-feeling for light readability */
    --bg-card:        #FFFFFF;
    --bg-card-hover:  var(--hx-slate-50);
    --bg-glass:       rgba(255, 255, 255, 0.85);
    --bg-glass-hover: #FFFFFF;
    --bg-input:       #FFFFFF;
    --bg-input-focus: #FFFFFF;

    /* Text on light bg — WCAG AAA */
    --text-primary:    var(--hx-slate-900);
    --text-secondary:  var(--hx-slate-600);
    --text-muted:      var(--hx-slate-500);
    --text-disabled:   var(--hx-slate-400);
    --text-inverse:    #FFFFFF;

    /* Borders — visible but soft */
    --border-color:        var(--hx-slate-200);
    --border-color-hover:  var(--hx-slate-300);
    --border-focus:        var(--hx-indigo-500);

    /* Sidebar in light mode — keep dark for contrast (premium pattern) */
    --cyan-900: var(--hx-slate-950);
    --cyan-800: var(--hx-slate-900);
    --cyan-700: var(--hx-slate-800);
    --helios-bg-darkest: var(--hx-slate-950);
    --helios-bg-darker:  var(--hx-slate-900);
    --helios-bg-dark:    var(--hx-slate-800);

    /* Shadows — even softer in light mode */
    --shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.07),
                  0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --shadow-md:  0 4px 8px -2px rgba(15, 23, 42, 0.08),
                  0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg:  0 12px 24px -6px rgba(15, 23, 42, 0.10),
                  0 4px 8px -2px rgba(15, 23, 42, 0.06);
    --shadow-xl:  0 24px 48px -12px rgba(15, 23, 42, 0.14);

    /* Glass — solid white panels for clarity */
    --h-glass-bg:     rgba(255, 255, 255, 0.92);
    --h-glass-border: var(--hx-slate-200);
}

/* ============================================================================
   GLOBAL TYPOGRAPHY POLISH
   ============================================================================ */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
}

body {
    font-family: var(--h-font-family);
    letter-spacing: -0.011em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--h-font-family);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.2;
}

h1 { letter-spacing: -0.028em; }

code, kbd, pre, samp {
    font-family: var(--h-font-mono);
    font-feature-settings: 'ss01', 'ss02';
}

/* ============================================================================
   GLOBAL UX POLISH
   ============================================================================ */

/* Cursor pointer on interactive elements (UI Pro Max rule) */
button:not(:disabled),
[role="button"]:not(:disabled),
a[href],
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
input[type="checkbox"],
input[type="radio"],
select,
summary,
[onclick],
[data-action] {
    cursor: pointer;
}

button:disabled,
[role="button"][aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Focus ring — keyboard nav only (no mouse focus artifacts) */
*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid var(--hx-indigo-500);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Selection highlight */
::selection {
    background: rgba(99, 102, 241, 0.25);
    color: inherit;
}

/* Scrollbar — slim & premium */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.6); background-clip: content-box; border: 2px solid transparent; }

/* Reduced motion — accessibility */
@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;
    }
}

/* ============================================================================
   COMPONENT POLISH — buttons, cards, inputs, badges
   ============================================================================ */

/* Primary CTA button — indigo gradient + glow */
.btn-primary,
.h-btn-primary,
button.primary {
    background: var(--accent-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(99, 102, 241, 0.25) inset !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-primary:hover:not(:disabled),
.h-btn-primary:hover:not(:disabled),
button.primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), var(--shadow-glow-md) !important;
}
.btn-primary:active:not(:disabled),
.h-btn-primary:active:not(:disabled) { transform: translateY(0); }

/* Bootstrap primary alignment with brand */
.btn-primary { background-color: var(--hx-indigo-500) !important; border-color: var(--hx-indigo-500) !important; }
.text-primary { color: var(--hx-indigo-500) !important; }
.bg-primary { background-color: var(--hx-indigo-500) !important; }
.border-primary { border-color: var(--hx-indigo-500) !important; }
.btn-outline-primary { color: var(--hx-indigo-500); border-color: var(--hx-indigo-500); }
.btn-outline-primary:hover { background: var(--hx-indigo-500); color: #fff; }

/* Forms — premium focus state */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select {
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
textarea:focus,
select:focus {
    border-color: var(--hx-indigo-500) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
    outline: none;
}

/* Card hover lift (refined) */
.card:not(.no-hover),
.glass-card:not(.no-hover) {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s;
}

/* Glassmorphism refinement */
.glass,
.glass-card,
.h-card-glass {
    background: var(--h-glass-bg);
    backdrop-filter: blur(var(--h-glass-blur)) saturate(var(--h-glass-sat));
    -webkit-backdrop-filter: blur(var(--h-glass-blur)) saturate(var(--h-glass-sat));
    border: 1px solid var(--h-glass-border);
}

/* Badges — refined typography */
.badge,
.h-badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: var(--text-xs);
    padding: 0.25rem 0.55rem;
}

/* Links — refined */
a:not(.btn):not(.h-btn):not(.nav-link):not(.no-style) {
    color: var(--hx-indigo-500);
    text-decoration: none;
    transition: color 0.15s;
}
a:not(.btn):not(.h-btn):not(.nav-link):not(.no-style):hover { color: var(--hx-indigo-600); }

/* Tables — premium hover */
table tr:hover { background: rgba(99, 102, 241, 0.04); }

body.light-theme table tr:hover { background: rgba(99, 102, 241, 0.05); }

/* Modal backdrop — refined */
.modal-backdrop { background: rgba(2, 6, 23, 0.7) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ============================================================================
   STATUS BADGE PALETTE — vivier candidates (refined)
   ============================================================================ */
:root {
    --status-new:        var(--hx-sky-500);
    --status-contacted:  var(--hx-amber-500);
    --status-qualified:  var(--hx-emerald-500);
    --status-in-process: var(--hx-violet-500);
    --status-interview:  var(--hx-violet-600);
    --status-offer:      var(--hx-sky-500);
    --status-hired:      var(--hx-emerald-600);
    --status-rejected:   var(--hx-rose-500);
    --status-archived:   var(--hx-slate-500);
}

/* ============================================================================
   THEME TOGGLE FAB — quick UX polish (visible on every page)
   ============================================================================ */
.helios-theme-fab {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    border-radius: 50%;
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9000;
    box-shadow: var(--shadow-lg);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.helios-theme-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow-xl), var(--shadow-glow-md); }
.helios-theme-fab:active { transform: translateY(0); }
.helios-theme-fab svg, .helios-theme-fab i { font-size: var(--text-md); }