/**
 * ===========================================================================
 * PLANÈTE PRODUCTION - DESIGN TOKENS (CSS VARIABLES)
 * Extrait du projet : Planete production cotation
 * Source : static/css/style.css, templates/base.html, templates/login.html
 * Compatibilité : CSS natif & Bootstrap 5
 * ===========================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Nunito:wght@300;400;500;600;700;800&family=Open+Sans:wght@400;600;700&display=swap');

:root {
    /* -----------------------------------------------------------------------
     * 1. MARQUE OFFICIELLE (BRAND PALETTE)
     * Source : style.css:L5-L12
     * ----------------------------------------------------------------------- */
    --color-production: #c2a36a;          /* Ocre Doré / Or signature Planète Production */
    --color-production-rgb: 194, 163, 106;
    --color-production-hover: #ab8c53;    /* Doré profond au survol */
    --color-production-light: #dfc79b;    /* Doré clair satiné */
    --color-agence: #f2e9cc;              /* Sable / Crème douce signature Planète L'Agence */
    --color-agence-rgb: 242, 233, 204;
    --color-externalisation: #a29c82;     /* Sauge / Taupe signature Planète Externalisation */
    --color-externalisation-rgb: 162, 156, 130;
    --color-charcoal: #2c302e;            /* Anthracite chaud du logo officiel & titres print */
    --color-charcoal-rgb: 44, 48, 46;

    /* -----------------------------------------------------------------------
     * 2. ACCENTS & ÉTATS MÉTIER
     * Source : style.css:L23-L33
     * ----------------------------------------------------------------------- */
    --accent-gold: #c2a36a;               /* Accent doré principal */
    --accent-blue: #c2a36a;               /* Remplacement délibéré du bleu générique par l'or */
    --accent-blue-hover: #ab8c53;
    --accent-cyan: #d8be8d;               /* Nuance or clair doux pour les focus/highlights */
    --accent-purple: #9d8b70;             /* Bronze chaud / taupe pour KPI 4 */
    --accent-emerald: #2e7d32;            /* Vert forêt pour Confirmé / Réservé */
    --accent-emerald-rgb: 46, 125, 50;
    --accent-amber: #d97706;              /* Ambre chaud pour Options & Relances */
    --accent-amber-rgb: 217, 119, 6;
    --accent-rose: #c53030;               /* Brique terracotta pour Refusé / Annulé */
    --accent-rose-rgb: 197, 48, 48;
    --accent-sage: #a29c82;               /* Sauge pour En attente / Produits */
    --accent-sage-rgb: 162, 156, 130;

    /* -----------------------------------------------------------------------
     * 3. SURFACES & THÈME SOMBRE PAR DÉFAUT (DARK THEME)
     * Source : style.css:L13-L22, L46-L48
     * ----------------------------------------------------------------------- */
    --bg-primary: #17191a;                /* Ardoise anthracite chaleureuse (fond général) */
    --bg-secondary: #212527;              /* Surface élevée : sidebar, modales, tiroir */
    --surface-card: #212527;              /* Surface des cartes */
    --bg-card: rgba(33, 37, 39, 0.82);    /* Fond verre dépoli translucide */
    --bg-card-hover: rgba(45, 51, 54, 0.9);
    --border-color: rgba(194, 163, 106, 0.18); /* Bordure signature dorée semi-transparente */
    --border-subtle: rgba(255, 255, 255, 0.08); /* Bordure discrète blanche */
    --text-main: #fbf9f5;                 /* Blanc cassé ivoire haut contraste */
    --text-muted: #a6a096;                /* Gris sableux adouci */

    /* -----------------------------------------------------------------------
     * 4. TYPOGRAPHIE
     * Source : style.css:L2, L188-L201
     * ----------------------------------------------------------------------- */
    --font-family-headings: 'Montserrat', sans-serif;
    --font-family-body: 'Nunito', 'Open Sans', system-ui, -apple-system, sans-serif;
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --font-size-xs: 0.68rem;              /* Labels micro (ex: style.css:L359) */
    --font-size-sm: 0.75rem;              /* Badges, footers (ex: style.css:L660, L822) */
    --font-size-base: 0.85rem;            /* Tableaux, boutons, cartes (ex: style.css:L872, L910) */
    --font-size-md: 0.92rem;              /* Contrôles formulaires (ex: style.css:L89) */
    --font-size-lg: 1.15rem;              /* Titres brand / H4 (ex: style.css:L301) */
    --font-size-xl: 1.25rem;              /* En-têtes pages / H2 (ex: style.css:L580) */
    --font-size-2xl: 1.75rem;             /* Chiffres KPI (ex: style.css:L653) */
    --font-size-3xl: 2.00rem;             /* Titres d'impact (ex: style.css:L1364) */

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    --line-height-tight: 1.1;
    --line-height-base: 1.55;

    /* -----------------------------------------------------------------------
     * 5. RAYONS DE COURBURE (BORDER-RADIUS)
     * Source : style.css:L36-L38
     * ----------------------------------------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 9999px;

    /* -----------------------------------------------------------------------
     * 6. OMBRES (BOX SHADOWS) & LUEURS
     * Source : style.css:L39-L40, L603, L930, L1036, L1398
     * ----------------------------------------------------------------------- */
    --shadow-glow: 0 0 20px rgba(194, 163, 106, 0.22);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-btn-primary: 0 4px 12px rgba(194, 163, 106, 0.3);
    --shadow-btn-hover: 0 6px 18px rgba(194, 163, 106, 0.45);
    --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.6);
    --shadow-drawer: -15px 0 45px rgba(0, 0, 0, 0.6);
    --shadow-pill: 0 4px 14px rgba(194, 163, 106, 0.35);

    /* -----------------------------------------------------------------------
     * 7. TRANSITIONS & COURBES D'ANIMATION (EMIL KOWALSKI EASING)
     * Source : style.css:L41-L45
     * ----------------------------------------------------------------------- */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --transition: all 0.2s var(--ease-out);

    /* -----------------------------------------------------------------------
     * 8. DIMENSIONS DE LAYOUT
     * Source : style.css:L35, L415
     * ----------------------------------------------------------------------- */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;

    /* -----------------------------------------------------------------------
     * 9. COMPATIBILITÉ BOOTSTRAP 5
     * Mappage direct des variables CSS natives de Bootstrap 5
     * ----------------------------------------------------------------------- */
    --bs-primary: #c2a36a;
    --bs-primary-rgb: 194, 163, 106;
    --bs-primary-text: #ffffff;
    --bs-primary-bg-subtle: rgba(194, 163, 106, 0.16);
    --bs-primary-border-subtle: rgba(194, 163, 106, 0.35);

    --bs-secondary: #a29c82;
    --bs-secondary-rgb: 162, 156, 130;
    --bs-secondary-text: #fbf9f5;
    --bs-secondary-bg-subtle: rgba(162, 156, 130, 0.18);
    --bs-secondary-border-subtle: rgba(162, 156, 130, 0.35);

    --bs-success: #2e7d32;
    --bs-success-rgb: 46, 125, 50;
    --bs-success-text: #4ade80;
    --bs-success-bg-subtle: rgba(46, 125, 50, 0.16);
    --bs-success-border-subtle: rgba(46, 125, 50, 0.35);

    --bs-warning: #d97706;
    --bs-warning-rgb: 217, 119, 6;
    --bs-warning-text: #fbbf24;
    --bs-warning-bg-subtle: rgba(217, 119, 6, 0.16);
    --bs-warning-border-subtle: rgba(217, 119, 6, 0.35);

    --bs-danger: #c53030;
    --bs-danger-rgb: 197, 48, 48;
    --bs-danger-text: #f87171;
    --bs-danger-bg-subtle: rgba(197, 48, 48, 0.16);
    --bs-danger-border-subtle: rgba(197, 48, 48, 0.35);

    --bs-info: #d8be8d;
    --bs-info-rgb: 216, 190, 141;

    --bs-dark: #17191a;
    --bs-dark-rgb: 23, 25, 26;

    --bs-light: #faf8f5;
    --bs-light-rgb: 250, 248, 245;

    --bs-body-font-family: var(--font-family-body);
    --bs-body-font-size: var(--font-size-base);
    --bs-body-line-height: var(--line-height-base);
    --bs-body-color: var(--text-main);
    --bs-body-bg: var(--bg-primary);

    --bs-border-color: var(--border-color);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-pill: var(--radius-pill);
}

/* ---------------------------------------------------------------------------
 * 10. SURCHARGES DU THÈME CLAIR (LIGHT THEME)
 * Source : style.css:L50-L83, L151-L180
 * --------------------------------------------------------------------------- */
[data-theme="light"],
body.light-theme {
    --surface-card: #ffffff;
    --bg-primary: #faf8f5;           /* Ivoire lin naturel */
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f1e8;
    --border-color: #e5ded2;
    --border-subtle: #eee9df;
    --text-main: #2a2d2e;
    --text-muted: #6b665e;
    --accent-cyan: #a3844a;
    --shadow-card: 0 4px 18px rgba(194, 163, 106, 0.10);

    /* Bootstrap 5 overrides in light mode */
    --bs-body-bg: #faf8f5;
    --bs-body-color: #2a2d2e;
    --bs-border-color: #e5ded2;

    /* Badges ajustés pour contraste optimal sur fond blanc */
    --badge-reserved-color: #1b5e20;
    --badge-reserved-bg: rgba(46, 125, 50, 0.12);
    --badge-reserved-border: rgba(46, 125, 50, 0.35);

    --badge-option-color: #92400e;
    --badge-option-bg: rgba(217, 119, 6, 0.14);
    --badge-option-border: rgba(217, 119, 6, 0.35);

    --badge-processed-color: #7d6537;
    --badge-processed-bg: rgba(194, 163, 106, 0.16);
    --badge-processed-border: rgba(194, 163, 106, 0.4);

    --badge-refused-color: #991b1b;
    --badge-refused-bg: rgba(197, 48, 48, 0.12);
    --badge-refused-border: rgba(197, 48, 48, 0.35);

    --badge-pending-color: #5c5545;
    --badge-pending-bg: rgba(162, 156, 130, 0.2);
    --badge-pending-border: rgba(162, 156, 130, 0.45);
}