/* ---- Espace client : système de thème configurable --------------------
   Tokens de base + variantes pilotées par les réglages storefront :
   - style      : client-style-{modern|default|depth|futuristic}
   - nav        : client-nav-{light|brand|dark}
   - arrondis   : client-radius-{sm|md|lg}
   ----------------------------------------------------------------------- */

html[data-area='client'] {
    --background: #f1f4f9;
    --foreground: #1f2b3d;
    --card: #ffffff;
    --card-foreground: #1f2b3d;
    --popover: #ffffff;
    --popover-foreground: #1f2b3d;
    --primary: var(--brand-primary, #0b6e4f);
    --primary-foreground: #ffffff;
    --secondary: #eef2f7;
    --secondary-foreground: #1f2b3d;
    --muted: #eef2f7;
    --muted-foreground: #64748b;
    --accent: #eef2f7;
    --accent-foreground: #1f2b3d;
    --destructive: #dc2626;
    --destructive-foreground: #ffffff;
    --border: #e3e9f1;
    --input: #d8e0ea;
    --ring: var(--brand-primary, #0b6e4f);
    --radius: 0.5rem;
    --radius-panel: 0.75rem;

    /* Navigation (surchargé par client-nav-*) */
    --nav-bg: #ffffff;
    --nav-fg: #1f2b3d;
    --nav-muted: #64748b;
    --nav-border: #e3e9f1;
    --nav-active-bg: color-mix(in oklab, var(--primary) 10%, transparent);
    --nav-active-fg: var(--primary);
    --nav-icon: #8494a9;

    /* Panneaux (surchargé par client-style-*) */
    --panel-border: transparent;
    --panel-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 28px -14px rgba(15, 23, 42, 0.1);
}

html[data-area='client'] .client-shell {
    --nav-active-bg: color-mix(in oklab, var(--primary) 10%, transparent);
    --nav-active-fg: var(--primary);
}

/* -- Arrondis ------------------------------------------------------------ */

html[data-area='client'] .client-radius-sm {
    --radius: 0.375rem;
    --radius-panel: 0.5rem;
}

html[data-area='client'] .client-radius-md {
    --radius: 0.5rem;
    --radius-panel: 0.75rem;
}

html[data-area='client'] .client-radius-lg {
    --radius: 0.75rem;
    --radius-panel: 1.125rem;
}

/* -- Styles visuels ------------------------------------------------------ */

html[data-area='client'] .client-style-default {
    --panel-border: var(--border);
    --panel-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-area='client'] .client-style-depth {
    --background: #edf1f8;
    --panel-border: transparent;
    --panel-shadow:
        0 2px 4px rgba(15, 23, 42, 0.05),
        0 20px 44px -16px rgba(15, 23, 42, 0.18);
}

html[data-area='client'] .client-style-futuristic {
    --background: #0d1322;
    --foreground: #e7ebf4;
    --card: #161d31;
    --card-foreground: #e7ebf4;
    --popover: #1a2238;
    --popover-foreground: #e7ebf4;
    --secondary: #1e2740;
    --secondary-foreground: #e7ebf4;
    --muted: #1e2740;
    --muted-foreground: #93a0b8;
    --accent: #1e2740;
    --accent-foreground: #e7ebf4;
    --border: rgba(148, 163, 199, 0.16);
    --input: rgba(148, 163, 199, 0.24);
    --nav-bg: #10182c;
    --nav-fg: #e7ebf4;
    --nav-muted: #93a0b8;
    --nav-border: rgba(148, 163, 199, 0.14);
    --nav-icon: #7c8aa5;
    --panel-border: rgba(148, 163, 199, 0.14);
    --panel-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.5);
}

/* -- Styles de navigation ------------------------------------------------ */

html[data-area='client'] .client-nav-brand {
    --nav-bg: linear-gradient(
        170deg,
        color-mix(in oklab, var(--primary) 100%, #ffffff 0%),
        color-mix(in oklab, var(--primary) 84%, #0a1410)
    );
    --nav-fg: #ffffff;
    --nav-muted: rgba(255, 255, 255, 0.72);
    --nav-border: rgba(255, 255, 255, 0.14);
    --nav-active-bg: rgba(255, 255, 255, 0.16);
    --nav-active-fg: #ffffff;
    --nav-icon: rgba(255, 255, 255, 0.75);
}

html[data-area='client'] .client-nav-dark {
    --nav-bg: #141c2b;
    --nav-fg: #eef1f6;
    --nav-muted: #9aa6b8;
    --nav-border: rgba(255, 255, 255, 0.08);
    --nav-active-bg: rgba(255, 255, 255, 0.1);
    --nav-active-fg: #ffffff;
    --nav-icon: #8b98ad;
}

html[data-area='client'] .client-style-futuristic.client-nav-dark {
    --nav-bg: #0a101f;
}

/* -- Primitives ---------------------------------------------------------- */

@layer components {
    /* Panneau de contenu : la carte de base de l'espace client */
    .panel {
        background: var(--card);
        color: var(--card-foreground);
        border-radius: var(--radius-panel);
        border: 1px solid var(--panel-border);
        box-shadow: var(--panel-shadow);
    }

    /* Surface de navigation (barre haute ou sidebar) */
    .nav-surface {
        background: var(--nav-bg);
        color: var(--nav-fg);
        border-color: var(--nav-border);
    }
}