/* ================================================================
   TOKENS — Sistema de Design SaaS ERP
   Todas as variáveis globais do sistema.
   Trocar tema = trocar só estas variáveis.
   Nunca use cores, tamanhos ou espaçamentos hardcoded nos
   componentes — use sempre os tokens abaixo.
   ================================================================ */

:root {
    /* ----------------------------------------------------------
       CORES — Tema Light (padrão)
       ---------------------------------------------------------- */

    /* Superfícies */
    --color-bg:              #f0f2f5;   /* fundo geral da página */
    --color-surface:         #ffffff;   /* cards, modais, painéis */
    --color-surface-raised:  #ffffff;   /* superfície elevada (dropdown, tooltip) */
    --color-surface-sunken:  #e8eaed;   /* área recuada (input, código) */

    /* Bordas */
    --color-border:          #d9dde3;
    --color-border-strong:   #b0b8c1;
    --color-border-focus:    var(--color-primary);

    /* Texto */
    --color-text:            #1a1d23;   /* texto principal */
    --color-text-secondary:  #5a6270;   /* labels, metadados */
    --color-text-disabled:   #a0a8b4;
    --color-text-inverse:    #ffffff;   /* texto sobre fundo escuro/primário */

    /* Primária */
    --color-primary:         #2563eb;
    --color-primary-hover:   #1d4ed8;
    --color-primary-active:  #1e40af;
    --color-primary-subtle:  #eff6ff;   /* fundo de item selecionado/hover */
    --color-primary-text:    #1d4ed8;   /* texto com cor primária */

    /* Semânticas */
    --color-success:         #16a34a;
    --color-success-subtle:  #f0fdf4;
    --color-success-border:  #86efac;

    --color-warning:         #d97706;
    --color-warning-subtle:  #fffbeb;
    --color-warning-border:  #fcd34d;

    --color-danger:          #dc2626;
    --color-danger-subtle:   #fef2f2;
    --color-danger-border:   #fca5a5;
    --color-danger-hover:    #b91c1c;

    --color-info:            #0891b2;
    --color-info-subtle:     #ecfeff;
    --color-info-border:     #67e8f9;

    /* Sidebar */
    --color-sidebar-bg:      #1e2330;
    --color-sidebar-text:    #a8b3c8;
    --color-sidebar-text-active: #ffffff;
    --color-sidebar-item-hover:  rgba(255,255,255,0.07);
    --color-sidebar-item-active: rgba(255,255,255,0.12);
    --color-sidebar-border:  rgba(255,255,255,0.08);

    /* Topbar */
    --color-topbar-bg:       #ffffff;
    --color-topbar-border:   var(--color-border);

    /* ----------------------------------------------------------
       TIPOGRAFIA
       ---------------------------------------------------------- */
    --font-family:           -apple-system, BlinkMacSystemFont, 'Segoe UI',
                              Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    --font-size-xs:          11px;
    --font-size-sm:          12px;
    --font-size-base:        13px;
    --font-size-md:          14px;
    --font-size-lg:          16px;
    --font-size-xl:          18px;
    --font-size-2xl:         22px;
    --font-size-3xl:         28px;

    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;

    --line-height-tight:     1.25;
    --line-height-base:      1.5;
    --line-height-relaxed:   1.75;

    /* ----------------------------------------------------------
       ESPAÇAMENTOS
       ---------------------------------------------------------- */
    --spacing-1:   4px;
    --spacing-2:   8px;
    --spacing-3:   12px;
    --spacing-4:   16px;
    --spacing-5:   20px;
    --spacing-6:   24px;
    --spacing-8:   32px;
    --spacing-10:  40px;
    --spacing-12:  48px;
    --spacing-16:  64px;

    /* ----------------------------------------------------------
       BORDAS E RAIOS
       ---------------------------------------------------------- */
    --radius-sm:    4px;
    --radius-md:    6px;
    --radius-lg:    10px;
    --radius-xl:    14px;
    --radius-full:  9999px;

    /* ----------------------------------------------------------
       SOMBRAS
       ---------------------------------------------------------- */
    --shadow-xs:    0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-lg:    0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
    --shadow-xl:    0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04);
    --shadow-focus: 0 0 0 3px rgba(37,99,235,0.2);

    /* ----------------------------------------------------------
       LAYOUT
       ---------------------------------------------------------- */
    --sidebar-width:           240px;
    --sidebar-width-collapsed: 56px;
    --topbar-height:           54px;
    --content-max-width:       1400px;

    /* Shell tokens — controlados por tema/template */
    --nav-item-height:         34px;
    --nav-section-gap:         4px;
    --nav-item-radius:         var(--radius-md);
    --nav-item-padding:        0 var(--spacing-3);
    --nav-icon-size:           15px;
    --sidebar-logo-height:     56px;
    --topbar-shadow:           var(--shadow-xs);
    --shell-page-padding:      var(--spacing-6);

    /* ----------------------------------------------------------
       TRANSIÇÕES
       ---------------------------------------------------------- */
    --transition-fast:   0.12s ease;
    --transition-base:   0.2s ease;
    --transition-slow:   0.35s ease;

    /* ----------------------------------------------------------
       Z-INDEX
       ---------------------------------------------------------- */
    --z-dropdown:         100;
    --z-sticky:           200;
    --z-overlay:          300;
    --z-modal:            400;
    --z-modal-backdrop:   400;
    --z-toast:            500;
    --z-tooltip:          600;
}

/* ================================================================
   TEMA DARK
   Sobrescreve apenas as variáveis que mudam.
   A estrutura, tamanhos e espaçamentos permanecem iguais.
   ================================================================ */
[data-theme="dark"] {
    --color-bg:              #0d0f14;
    --color-surface:         #161b25;
    --color-surface-raised:  #1e2535;
    --color-surface-sunken:  #0a0c10;

    --color-border:          #252d3d;
    --color-border-strong:   #374151;

    --color-text:            #e8ecf0;
    --color-text-secondary:  #8892a4;
    --color-text-disabled:   #4a5568;
    --color-text-inverse:    #0d0f14;

    --color-primary:         #3b82f6;
    --color-primary-hover:   #2563eb;
    --color-primary-active:  #1d4ed8;
    --color-primary-subtle:  rgba(59,130,246,0.12);
    --color-primary-text:    #60a5fa;

    --color-success:         #22c55e;
    --color-success-subtle:  rgba(34,197,94,0.10);
    --color-success-border:  rgba(34,197,94,0.25);

    --color-warning:         #f59e0b;
    --color-warning-subtle:  rgba(245,158,11,0.10);
    --color-warning-border:  rgba(245,158,11,0.25);

    --color-danger:          #ef4444;
    --color-danger-subtle:   rgba(239,68,68,0.10);
    --color-danger-border:   rgba(239,68,68,0.25);
    --color-danger-hover:    #dc2626;

    --color-info:            #06b6d4;
    --color-info-subtle:     rgba(6,182,212,0.10);
    --color-info-border:     rgba(6,182,212,0.25);

    --color-sidebar-bg:      #0f1520;
    --color-sidebar-text:    #8892a4;
    --color-sidebar-text-active: #e8ecf0;
    --color-sidebar-item-hover:  rgba(255,255,255,0.05);
    --color-sidebar-item-active: rgba(255,255,255,0.09);
    --color-sidebar-border:  rgba(255,255,255,0.06);

    --color-topbar-bg:       #161b25;
    --color-topbar-border:   #252d3d;

    --shadow-xs:    0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:    0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-lg:    0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
    --shadow-xl:    0 20px 25px rgba(0,0,0,0.6), 0 10px 10px rgba(0,0,0,0.3);
    --shadow-focus: 0 0 0 3px rgba(59,130,246,0.3);
}