/* ============================================================
   Uppilot Studio IA — assets/css/variables.css
   Police : Outfit + DM Sans | Reset global | Tokens CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
img, svg { display: block; }
input, textarea, select { font-family: var(--font-body); }
ul, ol { list-style: none; }

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
    /* Couleurs Studio IA */
    --primary:          #1D9E75;
    --primary-dark:     #0F6E56;
    --primary-mid:      #5DCAA5;
    --primary-bg:       #E1F5EE;
    --primary-border:   #9FE1CB;

    /* Brand Uppilot (partagé CRM) */
    --brand:            #3C3489;
    --brand-light:      #534AB7;

    /* Statuts */
    --danger:           #993C1D;
    --danger-light:     #FAECE7;
    --danger-border:    rgba(153, 60, 29, 0.2);
    --amber:            #BA7517;
    --amber-light:      #FAEEDA;
    --amber-border:     rgba(186, 117, 23, 0.2);
    --purple:           #534AB7;
    --purple-light:     #EEEDFE;
    --purple-border:    rgba(83, 74, 183, 0.2);

    /* Textes */
    --text-primary:     #0A4A38;
    --text-secondary:   #5F5E5A;
    --text-hint:        #888780;
    --text-white:       #FFFFFF;

    /* Backgrounds */
    --bg-page:          #F0FAF6;
    --bg-card:          #FFFFFF;
    --bg-sidebar:       #0D3D2E;
    --bg-secondary:     #F7FBF9;
    --bg-hover:         #EDF8F4;

    /* Bordures */
    --border:           rgba(29, 158, 117, 0.12);
    --border-strong:    rgba(29, 158, 117, 0.22);
    --border-input:     rgba(29, 158, 117, 0.18);

    /* Layout */
    --sidebar-w:            256px;
    --sidebar-w-collapsed:  68px;
    --sidebar-trans:        0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --topbar-h:             60px;

    /* Polices */
    --font-display: 'Outfit', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --font-mono:    'Courier New', monospace;

    /* Radius */
    --r-xs:   4px;
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-xl:   20px;
    --r-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(29, 158, 117, 0.06);
    --shadow-sm: 0 1px 3px rgba(29, 158, 117, 0.08);
    --shadow-md: 0 4px 16px rgba(29, 158, 117, 0.10);
    --shadow-lg: 0 8px 32px rgba(29, 158, 117, 0.14);
    --shadow-xl: 0 24px 64px rgba(13, 61, 46, 0.20);

    /* Transitions */
    --trans-fast:   0.15s ease;
    --trans-normal: 0.25s ease;
    --trans-slow:   0.35s ease;
}

/* ── Animations globales ─────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: none; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Scrollbar personnalisée ─────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--primary-border); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--primary-mid); }

/* ── Classes utilitaires ─────────────────────────────────────── */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }
.text-center  { text-align: center; }
.text-hint    { color: var(--text-hint); }
.text-primary { color: var(--text-primary); }
.text-green   { color: var(--primary); }
.text-danger  { color: var(--danger); }
.text-amber   { color: var(--amber); }
.hidden       { display: none !important; }