/* =============================================================================
   JAOS — Design tokens (Light + Dark)
   Surchargez par produit : [data-theme='jabook'] { --jaos-primary: … }
   Filament : html.fi.dark = sombre | html.fi:not(.dark) = clair
   ============================================================================= */

/* ── Marque (identique dans les deux thèmes) ── */
:root,
html.fi {
    --jaos-primary: #7c4dff;
    --jaos-secondary: #6366f1;
    --jaos-accent: #a855f7;

    --jaos-primary-rgb: 124, 77, 255;
    --jaos-secondary-rgb: 99, 102, 241;
    --jaos-accent-rgb: 168, 85, 247;

    --jaos-success: #22c55e;
    --jaos-warning: #f59e0b;
    --jaos-danger: #ef4444;

    --jaos-success-rgb: 34, 197, 94;
    --jaos-warning-rgb: 245, 158, 11;
    --jaos-danger-rgb: 239, 68, 68;

    --jaos-primary-emphasis: #5b21b6;
    --jaos-on-primary: #ffffff;
    --jaos-on-warning: #111827;

    --jaos-gradient: linear-gradient(135deg, var(--jaos-primary), var(--jaos-secondary));
    --jaos-gradient-accent: linear-gradient(135deg, var(--jaos-primary), var(--jaos-accent));

    --jaos-radius-sm: 10px;
    --jaos-radius-md: 14px;
    --jaos-radius-lg: 18px;
    --jaos-radius-xl: 22px;
    --jaos-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Light theme (défaut Filament sans .dark) ── */
html.fi:not(.dark),
:root:not(.dark) {
    color-scheme: light;

    --jaos-bg: #f8fafc;
    --jaos-surface: #ffffff;
    --jaos-surface-2: #f1f5f9;
    --jaos-surface-elevated: #ffffff;

    --jaos-text: #111827;
    --jaos-text-muted: #475569;
    --jaos-text-soft: #334155;
    --jaos-text-subtle: #64748b;

    --jaos-border: #e2e8f0;
    --jaos-border-subtle: #f1f5f9;
    --jaos-border-strong: color-mix(in srgb, var(--jaos-primary) 28%, #e2e8f0);

    --jaos-glow: rgba(var(--jaos-primary-rgb), 0.18);
    --jaos-glow-soft: rgba(var(--jaos-primary-rgb), 0.08);
    --jaos-glass: rgba(255, 255, 255, 0.92);

    --jaos-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.06);
    --jaos-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
    --jaos-shadow-glow: 0 8px 32px rgba(var(--jaos-primary-rgb), 0.14);

    --jaos-topbar-bg: rgba(255, 255, 255, 0.92);
    --jaos-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    --jaos-main-glow-a: rgba(var(--jaos-primary-rgb), 0.06);
    --jaos-main-glow-b: rgba(var(--jaos-accent-rgb), 0.05);
    --jaos-card-gradient: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    --jaos-panel-gradient: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    --jaos-input-bg: #ffffff;
    --jaos-hover-bg: rgba(var(--jaos-primary-rgb), 0.06);
    --jaos-active-bg: rgba(var(--jaos-primary-rgb), 0.1);
    --jaos-kpi-value: var(--jaos-primary-emphasis);
    --jaos-logo-glow: 0 4px 24px rgba(var(--jaos-primary-rgb), 0.2);
}

/* ── Dark theme (Filament .dark) ── */
html.fi.dark {
    color-scheme: dark;

    --jaos-bg: #050816;
    --jaos-surface: #111827;
    --jaos-surface-2: #1a2235;
    --jaos-surface-elevated: #1a2235;

    --jaos-text: #ffffff;
    --jaos-text-muted: #94a3b8;
    --jaos-text-soft: #cbd5e1;
    --jaos-text-subtle: #64748b;

    --jaos-border: color-mix(in srgb, var(--jaos-primary) 18%, #1e293b);
    --jaos-border-subtle: color-mix(in srgb, var(--jaos-primary) 10%, #111827);
    --jaos-border-strong: color-mix(in srgb, var(--jaos-primary) 32%, #1e293b);

    --jaos-glow: rgba(var(--jaos-primary-rgb), 0.38);
    --jaos-glow-soft: rgba(var(--jaos-primary-rgb), 0.14);
    --jaos-glass: color-mix(in srgb, var(--jaos-surface) 88%, transparent);

    --jaos-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
    --jaos-shadow-md: 0 14px 36px rgba(0, 0, 0, 0.48);
    --jaos-shadow-glow: 0 12px 36px rgba(var(--jaos-primary-rgb), 0.22);

    --jaos-topbar-bg: color-mix(in srgb, var(--jaos-bg) 92%, transparent);
    --jaos-sidebar-bg: linear-gradient(180deg, var(--jaos-bg) 0%, var(--jaos-surface) 100%);
    --jaos-main-glow-a: rgba(var(--jaos-primary-rgb), 0.1);
    --jaos-main-glow-b: rgba(var(--jaos-accent-rgb), 0.08);
    --jaos-card-gradient: linear-gradient(180deg, var(--jaos-surface) 0%, var(--jaos-bg) 100%);
    --jaos-panel-gradient: linear-gradient(165deg, rgba(20, 20, 28, 0.98) 0%, rgba(8, 8, 16, 0.99) 100%);
    --jaos-input-bg: color-mix(in srgb, var(--jaos-text) 4%, var(--jaos-surface));
    --jaos-hover-bg: rgba(var(--jaos-primary-rgb), 0.14);
    --jaos-active-bg: rgba(var(--jaos-primary-rgb), 0.22);
    --jaos-kpi-value: transparent;
    --jaos-logo-glow: drop-shadow(0 0 18px var(--jaos-glow-soft));
}

/* ── prefers-color-scheme (avant hydratation Filament) ── */
@media (prefers-color-scheme: light) {
    html.fi:not(.dark) {
        color-scheme: light;
    }
}

@media (prefers-color-scheme: dark) {
    html.fi.dark {
        color-scheme: dark;
    }
}

/* ── Alias legacy ── */
html.fi {
    --ja-black: var(--jaos-bg);
    --ja-black-elevated: var(--jaos-surface-2);
    --ja-surface: var(--jaos-surface);
    --ja-surface-2: var(--jaos-surface-2);
    --ja-gold: var(--jaos-primary);
    --ja-gold-light: var(--jaos-accent);
    --ja-gold-muted: var(--jaos-border-strong);
    --ja-gold-glow: var(--jaos-glow-soft);
    --ja-text: var(--jaos-text);
    --ja-text-muted: var(--jaos-text-muted);
    --ja-border: var(--jaos-border);
    --ja-radius-sm: var(--jaos-radius-sm);
    --ja-radius-md: var(--jaos-radius-md);
    --ja-radius-lg: var(--jaos-radius-lg);
    --ja-radius-xl: var(--jaos-radius-xl);
    --ja-shadow: var(--jaos-shadow);
    --ja-shadow-lg: var(--jaos-shadow-glow);
    --ja-transition: var(--jaos-transition);

    --ja-premium-bg: var(--jaos-bg);
    --ja-premium-surface: var(--jaos-surface);
    --ja-premium-surface-2: var(--jaos-surface-2);
    --ja-premium-border: var(--jaos-border);
    --ja-premium-border-strong: var(--jaos-border-strong);
    --ja-premium-hover: var(--jaos-hover-bg);
    --ja-premium-gold: var(--jaos-primary);
    --ja-premium-gold-soft: var(--jaos-glow-soft);
    --ja-premium-text: var(--jaos-text);
    --ja-premium-muted: var(--jaos-text-muted);
    --ja-accent: var(--jaos-secondary);
    --ja-accent-hover: var(--jaos-accent);
}

body.fi-body {
    background: var(--jaos-bg) !important;
    color: var(--jaos-text);
}

[data-theme='jaos'] {
    /* ancre produit — les tokens ci-dessus s’appliquent */
}