/* ============================================================
   LEEK FOOD — SOCLE DE DESIGN PARTAGÉ
   ------------------------------------------------------------
   Chargé AVANT style.css / restaurant.css / admin.css, par
   includes/header.php. Définit l'unique source de vérité pour :
   la palette de marque, la typographie, les rayons, les ombres,
   les espacements et les transitions.

   Les trois espaces (client, restaurant, admin) partageaient
   auparavant trois :root concurrents, avec des valeurs
   différentes pour --radius-* et --sidebar-width. Ce fichier
   met fin à ces conflits.

   Les variables locales de chaque espace (--primary,
   --resto-primary, --admin-primary…) sont conservées mais
   réaffectées à ces jetons : aucun composant existant n'a
   besoin d'être renommé.
   ============================================================ */

/* ============================================================
   1. PALETTE BRUTE — indépendante du thème
   ============================================================ */
:root {
    /* --- Marque : orange Leek Food --- */
    --brand-50: #fff7ed;
    --brand-100: #ffedd5;
    --brand-200: #fed7aa;
    --brand-300: #fdba74;
    --brand-400: #fb923c;
    --brand-500: #f97316;
    --brand-600: #ea580c;
    --brand-700: #c2410c;
    --brand-800: #9a3412;
    --brand-900: #7c2d12;

    /* --- Neutres : ardoise, légèrement bleutée --- */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #080f1e;

    /* --- Sémantique --- */
    --green-50: #ecfdf5;
    --green-100: #d1fae5;
    --green-500: #10b981;
    --green-600: #059669;
    --green-700: #047857;

    --amber-50: #fffbeb;
    --amber-100: #fef3c7;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;

    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;

    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;

    --violet-50: #f5f3ff;
    --violet-100: #ede9fe;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;

    /* ============================================================
       2. TYPOGRAPHIE
       Une seule famille pour tout le site. Inter et Plus Jakarta
       Sans étaient chargées toutes les deux, pour rien.
       ============================================================ */
    --font-sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;

    --leading-tight: 1.25;
    --leading-normal: 1.55;

    /* ============================================================
       3. RAYONS — valeurs uniques (8/10/16/24 avant, selon le fichier)
       ============================================================ */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* ============================================================
       4. MISE EN PAGE DES BACK-OFFICES
       ============================================================ */
    --sidebar-width: 272px;
    --header-height: 76px;

    /* Marge latérale du contenu des back-offices.
       Le back-office occupe toute la largeur de la fenêtre : c'est cette
       marge, et elle seule, qui ménage la respiration. Elle s'élargit
       avec l'écran (voir la fin de cette section) pour que les tableaux
       et les grilles ne collent jamais aux bords sur un grand moniteur.
       .main-content et .top-header la partagent : sans cela, le titre de
       l'en-tête ne serait plus aligné sur les cartes en dessous. */
    --content-padding: 2rem;

    /* ============================================================
       5. ESPACEMENTS
       ============================================================ */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* ============================================================
       6. TRANSITIONS
       ============================================================ */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s var(--ease);
    --transition-base: 0.25s var(--ease);
    --transition-slow: 0.4s var(--ease);

    /* ============================================================
       7. JETONS SÉMANTIQUES — THÈME CLAIR (défaut)
       Ces valeurs basculent seules sous body.dark-theme.
       ============================================================ */
    --brand: var(--brand-500);
    --brand-hover: var(--brand-600);
    --brand-active: var(--brand-700);
    --brand-subtle: var(--brand-50);
    --brand-soft: var(--brand-100);
    --brand-border: var(--brand-200);
    --brand-ring: rgba(249, 115, 22, 0.28);
    --on-brand: #ffffff;

    /* Fonds */
    --bg-page: #f6f7f9;
    --bg-page-warm: #fffaf6;
    --bg-surface: #ffffff;
    --bg-surface-2: var(--slate-50);
    --bg-surface-3: var(--slate-100);
    --bg-inset: var(--slate-100);
    --bg-sidebar: var(--slate-900);
    --bg-sidebar-hover: rgba(255, 255, 255, 0.06);
    --bg-sidebar-active: rgba(249, 115, 22, 0.14);
    --bg-overlay: rgba(15, 23, 42, 0.5);
    --bg-glass: rgba(255, 255, 255, 0.82);

    /* Textes */
    --text-strong: var(--slate-900);
    --text-body: var(--slate-700);
    --text-muted: var(--slate-500);
    --text-faint: var(--slate-400);
    --text-on-dark: #ffffff;
    --text-sidebar: #b6c2d4;
    --text-sidebar-active: #ffffff;

    /* Bordures */
    --border: var(--slate-200);
    --border-strong: var(--slate-300);
    --border-subtle: rgba(15, 23, 42, 0.06);
    --border-sidebar: rgba(255, 255, 255, 0.08);

    /* États */
    --success: var(--green-600);
    --success-bg: var(--green-50);
    --success-border: var(--green-100);
    --warning: var(--amber-600);
    --warning-bg: var(--amber-50);
    --warning-border: var(--amber-100);
    --danger: var(--red-600);
    --danger-bg: var(--red-50);
    --danger-border: var(--red-100);
    --info: var(--blue-600);
    --info-bg: var(--blue-50);
    --info-border: var(--blue-100);

    /* Ombres */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, 0.12), 0 4px 10px -4px rgba(15, 23, 42, 0.06);
    --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
    --shadow-brand: 0 8px 20px -6px rgba(249, 115, 22, 0.45);
    --shadow-sidebar: 4px 0 24px rgba(15, 23, 42, 0.14);

    /* Accents des cartes KPI — lisibles sur fond clair */
    --stat-primary: var(--brand-600);
    --stat-success: var(--green-700);
    --stat-warning: var(--amber-700);
    --stat-info: var(--blue-600);

    /* Surfaces toujours sombres (barre latérale des back-offices) */
    --sidebar-icon: rgba(255, 255, 255, 0.55);
    --sidebar-icon-hover: #ffffff;
    --sidebar-label: rgba(255, 255, 255, 0.42);
    --sidebar-divider: rgba(255, 255, 255, 0.08);

    /* ============================================================
       RÉALIGNEMENT DE BOOTSTRAP
       Les utilitaires .bg-primary, .text-info, .bg-success… tirent
       leurs couleurs de ces variables. Sans cela, .text-primary
       restait bleu (#0d6efd) et .bg-info cyan (#0dcaf0), en
       contradiction avec la charte.
       ============================================================ */
    --bs-primary-rgb: 249, 115, 22;   /* brand-500 */
    --bs-success-rgb: 5, 150, 105;    /* green-600 */
    --bs-info-rgb: 37, 99, 235;       /* blue-600  */
    --bs-warning-rgb: 217, 119, 6;    /* amber-600 */
    --bs-danger-rgb: 220, 38, 38;     /* red-600   */
    --bs-secondary-rgb: 100, 116, 139;/* slate-500 */

    color-scheme: light;
}

/* ============================================================
   8. JETONS SÉMANTIQUES — THÈME SOMBRE
   Un seul endroit décide de ce que « sombre » veut dire.
   Le bleu-violet #0f0f23 d'origine jurait avec l'orange de la
   marque : on passe sur une ardoise neutre.
   ============================================================ */
body.dark-theme {
    --bg-page: #0a1020;
    --bg-page-warm: #0a1020;
    --bg-surface: #111a2e;
    --bg-surface-2: #16203a;
    --bg-surface-3: #1c2846;
    --bg-inset: #0d1526;
    --bg-sidebar: #0c1425;
    --bg-sidebar-hover: rgba(255, 255, 255, 0.05);
    --bg-sidebar-active: rgba(249, 115, 22, 0.18);
    --bg-overlay: rgba(0, 0, 0, 0.65);
    --bg-glass: rgba(17, 26, 46, 0.85);

    --text-strong: #f1f5f9;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;
    --text-faint: #64748b;
    --text-sidebar: #a8b6cc;

    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-sidebar: rgba(255, 255, 255, 0.07);

    --brand-subtle: rgba(249, 115, 22, 0.12);
    --brand-soft: rgba(249, 115, 22, 0.18);
    --brand-border: rgba(249, 115, 22, 0.3);

    --success: #34d399;
    --success-bg: rgba(16, 185, 129, 0.14);
    --success-border: rgba(16, 185, 129, 0.28);
    --warning: #fbbf24;
    --warning-bg: rgba(245, 158, 11, 0.14);
    --warning-border: rgba(245, 158, 11, 0.28);
    --danger: #f87171;
    --danger-bg: rgba(239, 68, 68, 0.14);
    --danger-border: rgba(239, 68, 68, 0.28);
    --info: #60a5fa;
    --info-bg: rgba(59, 130, 246, 0.14);
    --info-border: rgba(59, 130, 246, 0.28);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
    --shadow-brand: 0 8px 20px -6px rgba(249, 115, 22, 0.35);
    --shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.4);

    /* Accents des cartes KPI — éclaircis pour tenir sur fond sombre */
    --stat-primary: var(--brand-400);
    --stat-success: var(--green-500);
    --stat-warning: var(--amber-500);
    --stat-info: var(--blue-500);

    /* Mêmes accents, version claire, pour les utilitaires Bootstrap */
    --bs-primary-rgb: 251, 146, 60;   /* brand-400 */
    --bs-success-rgb: 52, 211, 153;   /* green-500 */
    --bs-info-rgb: 96, 165, 250;      /* blue-500  */
    --bs-warning-rgb: 251, 191, 36;   /* amber-500 */
    --bs-danger-rgb: 248, 113, 113;   /* red-500   */
    --bs-secondary-rgb: 148, 163, 184;/* slate-400 */

    color-scheme: dark;
}

/* ============================================================
   9. ALIAS VERS LES VARIABLES HISTORIQUES DE CHAQUE ESPACE
   Chaque espace garde ses noms (--primary, --resto-primary,
   --admin-primary…) : les milliers de règles existantes
   continuent de fonctionner sans être renommées.
   ============================================================ */
:root {
    /* --- style.css (client) --- */
    --primary: var(--brand);
    --primary-dark: var(--brand-hover);
    --primary-light: var(--brand-300);
    --primary-glow: var(--brand-ring);
    /* Utilisé par .text-gradient : doit rester lisible en sombre */
    --secondary: var(--text-strong);
    --secondary-dark: var(--text-strong);
    --secondary-light: var(--text-body);
    --accent-gold: var(--amber-500);
    --accent-purple: var(--violet-500);
    --body-bg: var(--bg-page-warm);

    --dark-900: #0a1020;
    --dark-800: #111a2e;
    --dark-700: #1c2846;
    --dark-600: #24325a;
    --dark-500: #33456f;

    --gray-900: var(--text-strong);
    --gray-800: var(--text-strong);
    --gray-700: var(--text-body);
    --gray-600: var(--text-muted);
    --gray-500: var(--text-muted);
    --gray-400: var(--text-faint);
    --gray-300: var(--border-strong);
    --gray-200: var(--border);
    --gray-100: var(--bg-surface-3);
    --gray-50: var(--bg-surface-2);

    --shadow-primary: var(--shadow-brand);
    --shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Variantes claires des couleurs d'état, utilisées par style.css */
    --success-light: var(--green-100);
    --warning-light: var(--amber-100);
    --danger-light: var(--red-100);
    --info-light: var(--blue-100);

    /* Verre dépoli : suit la surface, pour rester lisible dans les deux thèmes */
    --glass-bg: var(--bg-glass);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: blur(20px);

    --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* --- restaurant.css --- */
    --resto-primary: var(--brand);
    --resto-primary-dark: var(--brand-hover);
    --resto-primary-light: var(--brand-subtle);
    --resto-primary-glow: var(--brand-ring);
    --resto-sidebar-bg: var(--bg-sidebar);
    --resto-sidebar-text: var(--text-sidebar);
    --resto-sidebar-active: var(--text-sidebar-active);
    --resto-accent-emerald: var(--success);
    --resto-accent-amber: var(--warning);
    --resto-accent-purple: var(--violet-500);
    --resto-accent-rose: var(--danger);
    --resto-bg: var(--bg-page);
    --resto-card-bg: var(--bg-surface);
    --resto-text-main: var(--text-strong);
    --resto-text-muted: var(--text-muted);
    --resto-border: var(--border);
    --resto-transition: all var(--transition-base);

    /* --- admin.css --- */
    --admin-bg: var(--bg-page);
    --admin-card-bg: var(--bg-surface);
    --admin-sidebar-bg: var(--bg-sidebar);
    --admin-sidebar-text: var(--text-sidebar);
    --admin-sidebar-active: var(--text-sidebar-active);
    --admin-primary: var(--brand);
    --admin-primary-dark: var(--brand-hover);
    --admin-primary-light: var(--brand-subtle);
    --admin-primary-glow: var(--brand-ring);
    --admin-accent-purple: var(--violet-500);
    --admin-accent-emerald: var(--success);
    --admin-accent-amber: var(--warning);
    --admin-accent-rose: var(--danger);
    --admin-text-main: var(--text-strong);
    --admin-text-muted: var(--text-muted);
    --admin-border: var(--border);
    --admin-transition: all var(--transition-base);

    --shadow-subtle: var(--shadow-xs);
    --shadow-card: var(--shadow-md);
    --shadow-card-hover: var(--shadow-lg);
    --shadow-glow-primary: var(--shadow-brand);
}

/* ================================================================
   10. MARGES RESPONSIVES DES BACK-OFFICES
   ----------------------------------------------------------------
   La marge latérale du contenu suit la taille de l'écran. Deux
   écueils à éviter, dans les deux sens :
     - trop étroite sur un grand moniteur : le contenu colle aux bords ;
     - trop large : on retombe dans le travers inverse, un contenu
       étroit au milieu d'un écran vide — ce que produisait le
       plafond de 1320 px du .container.
   Ces valeurs sont volontairement mesurées.
   ================================================================ */
@media (min-width: 1600px) {
    :root {
        --content-padding: 2.5rem;
    }
}

@media (min-width: 2000px) {
    :root {
        --content-padding: 3rem;
    }
}

@media (max-width: 991.98px) {
    :root {
        --content-padding: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    :root {
        --content-padding: 1rem;
    }
}