/* ============================================================================
 * TRITIUM SELENE · CSN × Protium Edition
 * DESIGN TOKENS — fonte única da verdade para cores, tipografia, espaçamento
 * Identidade observada dos logos oficiais Protium Dynamics
 * ========================================================================== */

:root {
    /* ===== PALETA PROTIUM ============================================ */
    /* Emerald — cor de destaque, ação, hidrogênio, valor */
    --emerald-50:  #E8FAEF;
    --emerald-100: #CCF3D8;
    --emerald-200: #95E5B1;
    --emerald-300: #5FD78A;
    --emerald-400: #36CC6F;
    --emerald-500: #22C55E;   /* PROTIUM GREEN — primária */
    --emerald-600: #1EA94F;
    --emerald-700: #18883F;
    --emerald-800: #136830;
    --emerald-900: #0C4520;

    /* Navy — cor de autoridade, ancoragem, dados, séria */
    --navy-50:  #E8ECF2;
    --navy-100: #CCD4E0;
    --navy-200: #98A6BD;
    --navy-300: #647A9A;
    --navy-400: #345578;
    --navy-500: #103562;
    --navy-600: #0E2E50;     /* PROTIUM NAVY — primária */
    --navy-700: #0B2643;
    --navy-800: #081C32;
    --navy-900: #051121;

    /* Canvas + neutros */
    --canvas:   #F7F8FA;
    --canvas-2: #F1F4F8;
    --surface:  #FFFFFF;
    --surface-elev: #FFFFFF;
    /* v3.1-P · realce verde que FUNCIONA nos dois temas. --emerald-50 é quase branco
       e não inverte, então texto --ink-1 (claro no dark) sumia sobre ele. */
    --tint-emerald: var(--emerald-50);
    --ink-1:    #0E2E50;     /* texto primário = navy */
    --ink-2:    #1F3A5F;
    --ink-3:    #4A5B75;
    --ink-4:    #7B8A9F;
    --ink-5:    #A8B3C4;
    --line-1:   #E2E8F0;
    --line-2:   #CBD5E1;
    --line-3:   #94A3B8;

    /* Status (assertivos, profissionais) */
    --success:  #16A34A;
    --warning:  #F59E0B;
    --danger:   #DC2626;
    --info:     #2563EB;

    /* ===== TEXTO COLORIDO ================================================
       --emerald-500/600/700 e --warning são cores de PREENCHIMENTO: têm
       luminância de meio-tom, servem para barra, borda grossa e fundo, e
       reprovam 4,5:1 como texto. Estes dois tokens são o par de leitura —
       escuro no tema claro, claro no tema escuro — e devem ser usados sempre
       que a cor for do TEXTO sobre superfície não tintada.
       Superfície tintada que inverte (--tint-emerald) também os aceita;
       fundo fixo claro (--emerald-50) não, ali o par claro já é o correto. */
    --accent-text:  var(--emerald-800);   /* 6,88:1 sobre --surface claro */
    --warning-text: #B45309;              /* 5,02:1 sobre --surface claro */

    /* Cores para tecnologias (consistente nos gráficos do app inteiro) */
    --tech-h2:        #22C55E;    /* hidrogênio = emerald, hero */
    --tech-h2-light:  #86EFAC;
    --tech-h2-dark:   #15803D;
    --tech-diesel:    #92400E;    /* diesel = terra queimada */
    --tech-diesel-light: #D6A974;
    --tech-bev:       #2563EB;    /* BEV = azul elétrico */
    --tech-bev-light: #93C5FD;
    --tech-glp:       #F59E0B;    /* GLP = amarelo */
    --tech-glp-light: #FCD34D;
    --tech-bio:       #65A30D;    /* biometano = verde oliva */
    --tech-bio-light: #BEF264;
    --tech-bateria:   #6366F1;    /* bateria li-ion = índigo */
    --tech-bateria-light: #A5B4FC;

    /* Cores para frentes (telas do app) */
    --frente-empilhadeira: #14B8A6;   /* teal industrial */
    --frente-onibus:       #3B82F6;   /* azul urbano */
    --frente-caminhao:     #8B5CF6;   /* roxo logístico */

    /* ===== TIPOGRAFIA ==================================================== */
    --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'Roboto Mono', monospace;

    --fs-h1: 36px;   --lh-h1: 1.1;
    --fs-h2: 28px;   --lh-h2: 1.15;
    --fs-h3: 22px;   --lh-h3: 1.2;
    --fs-h4: 16px;   --lh-h4: 1.25;
    --fs-h5: 13px;   --lh-h5: 1.3;
    --fs-body: 14px; --lh-body: 1.55;
    --fs-sm:   13px; --lh-sm:   1.5;
    --fs-xs:   11px; --lh-xs:   1.4;
    --fs-mono: 13px;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --fw-black:   800;

    /* ===== ESPAÇAMENTO (escala 4px) ====================================== */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-7:  32px;
    --sp-8:  40px;
    --sp-9:  48px;
    --sp-10: 64px;
    --sp-11: 80px;
    --sp-12: 96px;

    /* ===== RADII ========================================================= */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-2xl: 28px;
    --r-full: 9999px;

    /* ===== SOMBRAS (todas com tint navy) ================================= */
    --shadow-xs: 0 1px 2px 0 rgba(14, 46, 80, 0.04);
    --shadow-sm: 0 1px 3px 0 rgba(14, 46, 80, 0.06), 0 1px 2px -1px rgba(14, 46, 80, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(14, 46, 80, 0.08), 0 2px 4px -2px rgba(14, 46, 80, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(14, 46, 80, 0.10), 0 4px 6px -4px rgba(14, 46, 80, 0.06);
    --shadow-xl: 0 20px 25px -5px rgba(14, 46, 80, 0.12), 0 8px 10px -6px rgba(14, 46, 80, 0.06);
    --shadow-2xl: 0 25px 50px -12px rgba(14, 46, 80, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(14, 46, 80, 0.05);

    /* glow para destacar elementos */
    --glow-emerald: 0 0 0 4px rgba(34, 197, 94, 0.18);
    --glow-navy:    0 0 0 4px rgba(14, 46, 80, 0.12);

    /* ===== GRADIENTES PROTIUM ============================================ */
    --grad-protium: linear-gradient(135deg, #0E2E50 0%, #103562 35%, #22C55E 100%);
    --grad-protium-soft: linear-gradient(135deg, #103562 0%, #1EA94F 100%);
    --grad-navy: linear-gradient(135deg, #0E2E50 0%, #103562 100%);
    --grad-emerald: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
    --grad-canvas:  linear-gradient(180deg, #F7F8FA 0%, #F1F4F8 100%);

    /* ===== TRANSIÇÕES ==================================================== */
    --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-med:  220ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-bounce: 380ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ===== Z-INDEX ======================================================= */
    --z-base:    1;
    --z-sticky:  90;
    --z-header:  100;
    --z-drawer:  150;
    --z-modal:   200;
    --z-toast:   250;
    --z-tooltip: 300;

    /* ===== LAYOUT ======================================================== */
    --header-h: 108px;
    --tabs-h:   54px;
    --sidebar-w: 360px;
    --container-max: 1680px;
}

/* ============================================================================
 * MODO ESCURO
 * Mesma identidade emerald + navy, mas com canvas dark e text inverso
 * ========================================================================== */
[data-theme="dark"] {
    --canvas:   #050B14;
    --canvas-2: #081326;
    --surface:  #0E1B30;
    --surface-elev: #122340;
    --tint-emerald: rgba(34,197,94,0.13);
    --ink-1:    #E2E8F0;
    --ink-2:    #B8C5D6;
    --ink-3:    #8B9CB5;
    --ink-4:    #647890;
    --ink-5:    #3F5274;
    --line-1:   #1F324F;
    --line-2:   #2A4163;
    --line-3:   #3A5680;

    /* par escuro do texto colorido: 9,50:1 e 8,03:1 sobre --surface escuro */
    --accent-text:  var(--emerald-300);
    --warning-text: #F59E0B;

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.40);

    --grad-surface: linear-gradient(180deg, #122340 0%, #0E1B30 100%);
    --grad-canvas:  linear-gradient(180deg, #050B14 0%, #081326 100%);
}