/* ============================================================
   ELEVAR CRM — Design Tokens
   Camada 1: Paleta crua (valores)        → --c-*
   Camada 2: Tokens semânticos (papéis)   → reaproveitados pelo sistema todo
   Default = Elevar Clássico (teal #025157, fonte Inter, sem serifa).
   Demais presets/ajustes são aplicados por override em runtime.
   NÃO alterar os tokens de blur nem a regra de submenu (ver style.css).
   ============================================================ */

:root {
    /* ---------- Camada 1 — Paleta Elevar (teal) ---------- */
    --c-teal:       #025157;   /* cor de marca / CTA */
    --c-teal-dark:  #013d42;   /* teal escuro — hover */
    --c-white:      #ffffff;   /* superfícies / cards */
    --c-canvas:     #f4f6f9;   /* canvas / fundo geral */
    --c-mist:       #f8f9fa;   /* névoa — superfície secundária / hover */
    --c-ink:        #2c3e50;   /* texto primário */
    --c-slate:      #3d4d5c;   /* texto secundário */
    --c-stone:      #6c757d;   /* texto muted / captions */
    --c-pewter:     #9aa3ab;   /* ícones sutis */
    --c-cloud:      #e9ecef;   /* bordas / divisores */
    --c-cool-stone: #dee2e6;   /* bordas fortes / nav */

    /* ============================================================
       Camada 2 — Tokens semânticos (DEFAULT = Elevar Clássico)
       ============================================================ */

    /* Primary / CTA — teal de marca Elevar */
    --primary-color: #025157;
    --primary-hover: #013d42;
    --primary-light: rgba(2, 81, 87, 0.06);
    --primary-focus: rgba(2, 81, 87, 0.20);

    /* Acento cromático (links, realces, washes sutis) */
    --accent-color: #025157;
    --accent-soft:  #cfe3e4;            /* wash de fundo */
    --accent-bg:    rgba(2, 81, 87, 0.08);

    /* Sincronizar Bootstrap com a cor primária do sistema */
    --bs-primary: #025157;
    --bs-primary-rgb: 2, 81, 87;
    --primary-rgb: 2, 81, 87;
    --bs-link-color: #025157;
    --bs-link-color-rgb: 2, 81, 87;
    --bs-link-hover-color: #013d42;

    /* Backgrounds (Light Mode) */
    --background-color: var(--c-canvas);   /* canvas */
    --surface-color:    var(--c-white);    /* cards, modais, sidebar */
    --surface-hover:    var(--c-mist);
    --surface-2:        var(--c-mist);     /* superfície terciária (tracks, zonas muted) */
    --sidebar-bg:       var(--c-white);

    /* Text & Borders (Light Mode) */
    --text-color:     var(--c-ink);        /* texto primário */
    --text-secondary: var(--c-slate);      /* texto secundário */
    --text-muted:     var(--c-stone);      /* muted / captions */
    --text-tertiary:  var(--c-pewter);     /* ícones sutis */
    --text-inverse:   #ffffff;
    --border-color:   var(--c-cloud);      /* divisores */
    --border-strong:  var(--c-cool-stone); /* bordas fortes */

    /* Status Colors */
    --success-color: #10b981;
    --success-bg: #d1fae5;
    --success-text: #047857;

    --danger-color: #ef4444;
    --danger-bg: #fee2e2;
    --danger-text: #b91c1c;

    --warning-color: #f59e0b;
    --warning-bg: #fef3c7;
    --warning-text: #b45309;

    --info-color: #3b82f6;
    --info-bg: #dbeafe;
    --info-text: #1d4ed8;

    /* Typography
       Default Elevar Clássico: corpo/UI e títulos em Inter (sem serifa).
       Presets/ajustes podem trocar --font-family via token. */
    --font-sans:   'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: var(--font-family);    /* títulos seguem o corpo */
    --font-size-base: 15px;

    /* Spacing & Layout */
    --sidebar-width: 260px;
    --header-height: 72px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Shadows — sistema é plano/bordado; sombras mantidas sutis */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-focus: 0 0 0 3px var(--primary-focus);

    /* Blur (glassmorphism) — NÃO ALTERAR */
    --blur-sm: blur(12px);
    --blur-md: blur(16px);
    --blur-lg: blur(20px);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography Scale */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 0.9375rem; /* 15px */
    --text-md:   1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.75rem;

    /* Spacing */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;

    /* Status subtle backgrounds (light) */
    --success-bg-subtle: rgba(16, 185, 129, 0.10);
    --danger-bg-subtle:  rgba(239, 68, 68, 0.10);
    --warning-bg-subtle: rgba(245, 158, 11, 0.10);
    --info-bg-subtle:    rgba(59, 130, 246, 0.10);
}

[data-theme="dark"] {
    /* Backgrounds (Dark Mode) - True Black palette */
    --background-color: #0a0a0a;        /* True black background */
    --surface-color: #111111;           /* Elevated surface - very dark */
    --surface-hover: #1a1a1a;           /* Hover state */
    --surface-2: #161616;               /* superfície terciária */
    --sidebar-bg: #0d0d0d;

    /* Glass surface variants */
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-hover: rgba(255, 255, 255, 0.07);

    /* Text & Borders (Dark Mode) */
    --text-color: #f0f0f0;              /* Near white text */
    --text-muted: #888888;              /* Muted gray text */
    --text-secondary: #b0b0b0;          /* Secondary text */
    --text-tertiary: #6b6b6b;           /* ícones sutis */
    --text-inverse: #000000;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);

    /* Status Colors (Dark Mode Adjustments) */
    --success-bg: rgba(16, 185, 129, 0.15);
    --success-text: #34d399;

    --danger-bg: rgba(239, 68, 68, 0.15);
    --danger-text: #f87171;

    --warning-bg: rgba(245, 158, 11, 0.15);
    --warning-text: #fbbf24;

    --info-bg: rgba(59, 130, 246, 0.15);
    --info-text: #60a5fa;

    /* Primary tweaks — acento visível sobre fundo escuro */
    --primary-color: #0a9ca7;           /* Teal accent brighter for dark bg */
    --primary-hover: #0bbac7;
    --primary-light: rgba(10, 156, 167, 0.15);
    --primary-focus: rgba(10, 156, 167, 0.25);

    /* Acento cromático (links/realces) no dark */
    --accent-color: #8fb3d4;
    --accent-soft:  rgba(143, 179, 212, 0.20);
    --accent-bg:    rgba(143, 179, 212, 0.16);

    /* Sincronizar Bootstrap com a cor primária dark */
    --bs-primary: #0a9ca7;
    --bs-primary-rgb: 10, 156, 167;
    --primary-rgb: 10, 156, 167;
    --bs-link-color: #0a9ca7;
    --bs-link-color-rgb: 10, 156, 167;
    --bs-link-hover-color: #0bbac7;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px rgba(10, 156, 167, 0.3);

    /* Glow accents */
    --glow-primary: 0 0 20px rgba(10, 156, 167, 0.15);
    --glow-surface: 0 0 0 1px rgba(255, 255, 255, 0.06);
}