/* =================================================================
   ENJATEC — DESIGN TOKENS
   Sistema Comercial · Fase 0
   Fonte única da verdade. Não introduzir cores, tamanhos ou
   espaçamentos hardcoded fora deste arquivo.
   ================================================================= */

:root {
  /* ===============================================================
     PALETA AZUL ENJATEC (invariante entre temas)
     Derivada de #103945 — cor institucional oficial
     =============================================================== */
  --enj-primary-900: #061C24;
  --enj-primary-800: #0A2832;
  --enj-primary-700: #103945;   /* COR INSTITUCIONAL OFICIAL */
  --enj-primary-600: #1B5163;
  --enj-primary-500: #2A6B82;
  --enj-primary-400: #4D8BA0;
  --enj-primary-300: #7DA9BA;
  --enj-primary-200: #B2C9D2;
  --enj-primary-100: #D6E0E5;
  --enj-primary-50:  #EEF2F4;

  /* ===============================================================
     PALETA AMARELO ENJATEC (invariante)
     Derivada de #FFCC29 — cor institucional oficial
     =============================================================== */
  --enj-accent-800: #4A3A00;
  --enj-accent-700: #8A6E00;
  --enj-accent-600: #C99E00;
  --enj-accent-500: #FFCC29;   /* COR INSTITUCIONAL OFICIAL */
  --enj-accent-400: #FFD957;
  --enj-accent-200: #FFE790;
  --enj-accent-50:  #FFF7D6;

  /* ===============================================================
     TIPOGRAFIA
     =============================================================== */
  --enj-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --enj-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", "Roboto Mono", monospace;
  --enj-font-display: var(--enj-font-sans);

  --enj-fs-xs:   11px;
  --enj-fs-sm:   12px;
  --enj-fs-base: 14px;
  --enj-fs-md:   15px;
  --enj-fs-lg:   17px;
  --enj-fs-xl:   20px;
  --enj-fs-2xl:  24px;
  --enj-fs-3xl:  30px;
  --enj-fs-4xl:  38px;
  --enj-fs-5xl:  48px;

  --enj-fw-regular: 400;
  --enj-fw-medium:  500;
  --enj-fw-bold:    600;

  --enj-lh-tight:  1.2;
  --enj-lh-snug:   1.35;
  --enj-lh-normal: 1.5;
  --enj-lh-loose:  1.7;

  --enj-letter-tight:  -0.01em;
  --enj-letter-normal: 0;
  --enj-letter-wide:   0.05em;
  --enj-letter-wider:  0.1em;

  /* ===============================================================
     ESPAÇAMENTO — sistema 4px
     =============================================================== */
  --enj-space-0:  0;
  --enj-space-1:  4px;
  --enj-space-2:  8px;
  --enj-space-3:  12px;
  --enj-space-4:  16px;
  --enj-space-5:  20px;
  --enj-space-6:  24px;
  --enj-space-7:  28px;
  --enj-space-8:  32px;
  --enj-space-10: 40px;
  --enj-space-12: 48px;
  --enj-space-16: 64px;
  --enj-space-20: 80px;
  --enj-space-24: 96px;

  /* ===============================================================
     BORDER RADIUS
     =============================================================== */
  --enj-radius-none: 0;
  --enj-radius-sm:   4px;
  --enj-radius-md:   6px;
  --enj-radius-lg:   8px;
  --enj-radius-xl:   12px;
  --enj-radius-2xl:  16px;
  --enj-radius-pill: 999px;

  /* ===============================================================
     BORDAS
     =============================================================== */
  --enj-border-width-thin:    0.5px;
  --enj-border-width-default: 1px;
  --enj-border-width-thick:   2px;

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

  /* ===============================================================
     Z-INDEX
     =============================================================== */
  --enj-z-base:     1;
  --enj-z-dropdown: 100;
  --enj-z-sticky:   200;
  --enj-z-modal:    1000;
  --enj-z-toast:    2000;
  --enj-z-tooltip:  3000;
}

/* =================================================================
   TEMA CLARO
   ================================================================= */
[data-theme="light"] {
  /* Backgrounds */
  --enj-bg-app:        #F2F4F5;
  --enj-bg-surface:    #FFFFFF;
  --enj-bg-elevated:   #FFFFFF;
  --enj-bg-hover:      #F8FAFB;
  --enj-bg-active:     #EEF2F4;
  --enj-bg-overlay:    rgba(16, 57, 69, 0.45);

  /* Texto */
  --enj-text-primary:   #1A1A1A;
  --enj-text-secondary: #4A5660;
  --enj-text-muted:     #8A949C;
  --enj-text-inverse:   #FFFFFF;
  --enj-text-link:      var(--enj-primary-700);
  --enj-text-on-accent: var(--enj-primary-700);

  /* Bordas */
  --enj-border-subtle:  #E8EAEC;
  --enj-border-default: #D1D5D8;
  --enj-border-strong:  #8A949C;
  --enj-border-focus:   var(--enj-primary-700);

  /* Cores funcionais (botões/ações) */
  --enj-action-primary-bg:        var(--enj-accent-500);
  --enj-action-primary-text:      var(--enj-primary-700);
  --enj-action-primary-bg-hover:  var(--enj-accent-400);

  --enj-action-secondary-bg:        transparent;
  --enj-action-secondary-text:      var(--enj-primary-700);
  --enj-action-secondary-border:    var(--enj-primary-700);
  --enj-action-secondary-bg-hover:  var(--enj-primary-50);

  --enj-action-ghost-text:     var(--enj-text-secondary);
  --enj-action-ghost-bg-hover: var(--enj-bg-hover);

  /* Sombras */
  --enj-shadow-sm:    0 1px 2px rgba(16, 57, 69, 0.05);
  --enj-shadow-md:    0 2px 6px rgba(16, 57, 69, 0.08);
  --enj-shadow-lg:    0 8px 20px rgba(16, 57, 69, 0.10);
  --enj-shadow-xl:    0 16px 40px rgba(16, 57, 69, 0.14);
  --enj-shadow-focus: 0 0 0 3px rgba(255, 204, 41, 0.35);

  /* Semânticas */
  --enj-success-bg: #EAF3DE;  --enj-success-border: #3B6D11;  --enj-success-text: #173404;
  --enj-warning-bg: #FAEEDA;  --enj-warning-border: #BA7517;  --enj-warning-text: #633806;
  --enj-danger-bg:  #FCEBEB;  --enj-danger-border:  #A32D2D;  --enj-danger-text:  #501313;
  --enj-info-bg:    #D6E0E5;  --enj-info-border:    var(--enj-primary-600);  --enj-info-text: var(--enj-primary-700);

  /* Classificação de proposta */
  --enj-class-topo-bg:  #501313;                  --enj-class-topo-text:  #FCEBEB;
  --enj-class-a-bg:     #993C1D;                  --enj-class-a-text:     #FAECE7;
  --enj-class-b-bg:     var(--enj-primary-600);   --enj-class-b-text:     var(--enj-primary-100);
  --enj-class-c-bg:     #5F5E5A;                  --enj-class-c-text:     #F1EFE8;
  --enj-class-batt-bg:  #FAEEDA;                  --enj-class-batt-text:  #633806;
  --enj-class-batt-border: #BA7517;

  /* Status de proposta */
  --enj-status-elaboracao-bg:   #FAEEDA;                --enj-status-elaboracao-border: #BA7517;
  --enj-status-elaboracao-text: #633806;
  --enj-status-enviada-bg:      #D6E0E5;                --enj-status-enviada-border:    var(--enj-primary-600);
  --enj-status-enviada-text:    var(--enj-primary-700);
  --enj-status-negociacao-bg:   #B5D4F4;                --enj-status-negociacao-border: #185FA5;
  --enj-status-negociacao-text: #042C53;
  --enj-status-aprovada-bg:     #EAF3DE;                --enj-status-aprovada-border:   #3B6D11;
  --enj-status-aprovada-text:   #173404;
  --enj-status-perdida-bg:      #FCEBEB;                --enj-status-perdida-border:    #A32D2D;
  --enj-status-perdida-text:    #501313;
  --enj-status-cancelada-bg:    #F1EFE8;                --enj-status-cancelada-border:  #5F5E5A;
  --enj-status-cancelada-text:  #2C2C2A;
}

/* =================================================================
   TEMA ESCURO
   ================================================================= */
[data-theme="dark"] {
  /* Backgrounds */
  --enj-bg-app:        var(--enj-primary-900);
  --enj-bg-surface:    var(--enj-primary-800);
  --enj-bg-elevated:   var(--enj-primary-700);
  --enj-bg-hover:      var(--enj-primary-700);
  --enj-bg-active:     var(--enj-primary-600);
  --enj-bg-overlay:    rgba(0, 0, 0, 0.6);

  /* Texto */
  --enj-text-primary:   #FFFFFF;
  --enj-text-secondary: var(--enj-primary-200);
  --enj-text-muted:     var(--enj-primary-300);
  --enj-text-inverse:   var(--enj-primary-700);
  --enj-text-link:      var(--enj-accent-500);
  --enj-text-on-accent: var(--enj-primary-700);

  /* Bordas */
  --enj-border-subtle:  rgba(255, 255, 255, 0.08);
  --enj-border-default: rgba(255, 255, 255, 0.15);
  --enj-border-strong:  rgba(255, 255, 255, 0.30);
  --enj-border-focus:   var(--enj-accent-500);

  /* Cores funcionais */
  --enj-action-primary-bg:        var(--enj-accent-500);
  --enj-action-primary-text:      var(--enj-primary-700);
  --enj-action-primary-bg-hover:  var(--enj-accent-400);

  --enj-action-secondary-bg:        transparent;
  --enj-action-secondary-text:      var(--enj-primary-100);
  --enj-action-secondary-border:    var(--enj-primary-400);
  --enj-action-secondary-bg-hover:  rgba(255, 255, 255, 0.06);

  --enj-action-ghost-text:     var(--enj-primary-200);
  --enj-action-ghost-bg-hover: rgba(255, 255, 255, 0.08);

  /* Sombras (mais sutis no dark) */
  --enj-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.20);
  --enj-shadow-md:    0 2px 6px rgba(0, 0, 0, 0.25);
  --enj-shadow-lg:    0 8px 20px rgba(0, 0, 0, 0.35);
  --enj-shadow-xl:    0 16px 40px rgba(0, 0, 0, 0.45);
  --enj-shadow-focus: 0 0 0 3px rgba(255, 204, 41, 0.45);

  /* Semânticas — versão dark */
  --enj-success-bg: rgba(59, 109, 17, 0.20);   --enj-success-border: #6BAA28;  --enj-success-text: #C0DD97;
  --enj-warning-bg: rgba(186, 117, 23, 0.20);  --enj-warning-border: #FAC775;  --enj-warning-text: #FAEEDA;
  --enj-danger-bg:  rgba(163, 45, 45, 0.20);   --enj-danger-border:  #F09595;  --enj-danger-text:  #FCEBEB;
  --enj-info-bg:    rgba(45, 109, 130, 0.30);  --enj-info-border:    var(--enj-primary-400);
  --enj-info-text:  var(--enj-primary-100);

  /* Classificação de proposta — dark */
  --enj-class-topo-bg:  #A32D2D;                   --enj-class-topo-text:  #FCEBEB;
  --enj-class-a-bg:     #C9542B;                   --enj-class-a-text:     #FAECE7;
  --enj-class-b-bg:     var(--enj-primary-500);    --enj-class-b-text:     var(--enj-primary-100);
  --enj-class-c-bg:     #888780;                   --enj-class-c-text:     #F1EFE8;
  --enj-class-batt-bg:  rgba(186, 117, 23, 0.30);  --enj-class-batt-text:  #FAC775;
  --enj-class-batt-border: #BA7517;

  /* Status de proposta — dark */
  --enj-status-elaboracao-bg:   rgba(186, 117, 23, 0.20); --enj-status-elaboracao-border: #FAC775;
  --enj-status-elaboracao-text: #FAEEDA;
  --enj-status-enviada-bg:      rgba(45, 109, 130, 0.30); --enj-status-enviada-border:    var(--enj-primary-400);
  --enj-status-enviada-text:    var(--enj-primary-100);
  --enj-status-negociacao-bg:   rgba(24, 95, 165, 0.25);  --enj-status-negociacao-border: #5C9CE6;
  --enj-status-negociacao-text: #B5D4F4;
  --enj-status-aprovada-bg:     rgba(59, 109, 17, 0.20);  --enj-status-aprovada-border:   #6BAA28;
  --enj-status-aprovada-text:   #C0DD97;
  --enj-status-perdida-bg:      rgba(163, 45, 45, 0.20);  --enj-status-perdida-border:    #F09595;
  --enj-status-perdida-text:    #FCEBEB;
  --enj-status-cancelada-bg:    rgba(95, 94, 90, 0.30);   --enj-status-cancelada-border:  #888780;
  --enj-status-cancelada-text:  #F1EFE8;
}