/* Gestão de Férias — Variáveis de tema
   Desenvolvido por Inaiara Santos — 2026

   Paleta oficial (5 cores-base): #0B1F3B, #123A63, #2F5F8F, #F6C445, #FFF2C6.
   Aplicação por teoria das cores:
   - Modo claro: o AZUL MAIS ESCURO (#123A63) é o acento principal — tem
     contraste suficiente sobre fundo claro. O tom mais escuro (#0B1F3B) fica
     reservado para hover/pressed e para a sidebar (estrutura, não interação).
   - Modo escuro: invertemos a relação de valor — cores escuras "somem" sobre
     fundo escuro, então o AZUL MAIS CLARO (#2F5F8F) vira o acento principal,
     por ter contraste real contra um fundo quase preto.
   - O dourado (#F6C445) funciona como acento secundário em AMBOS os modos,
     já que amarelo sobre azul (complementar) sempre gera contraste alto.
   - O creme (#FFF2C6) é usado em pequenas doses — fundo de destaque suave no
     claro, nunca como fundo geral (ficaria pesado em tela cheia). */

body {
  --bg-primary:  #fdf9ee;
  --bg-surface:  #fffdf7;
  --bg-card:     #ffffff;
  --bg-input:    #fbf3dc;
  --bg-hover:    #f5e9c8;
  --bg-sidebar:  #0b1f3b;
  --bg-topbar:   #ffffff;
  --bg-overlay:  rgba(11,31,59,0.55);

  --border:        #e8dbb0;
  --border-strong: #d1bd7e;
  --border-focus:  #123a63;
  --ring:          rgba(18,58,99,0.18);

  --text-primary:   #0b1f3b;
  --text-secondary: #3d5573;
  --text-muted:     #6b7d94;
  --text-faint:     #a7b6c8;
  --text-sidebar:        rgba(210,225,245,0.65);
  --text-sidebar-active: #f8fafd;

  /* Azul escuro — acento principal no modo claro (bom contraste sobre bege) */
  --accent:       #123a63;
  --accent-hover: #0b1f3b;
  --accent-soft:  #e7edf5;
  --accent-light: rgba(18,58,99,0.10);
  --accent-glow:  rgba(18,58,99,0.30);

  /* Dourado — acento secundário (complementar do azul, alto contraste) */
  --highlight:       #f6c445;
  --highlight-hover: #d9a521;
  --highlight-soft:  #fff2c6;
  --highlight-light: rgba(246,196,69,0.16);

  --success:      #1e8f5f;
  --success-bg:   rgba(30,143,95,0.11);
  --success-soft: #e4f4ec;

  --warning:      #b8860b;
  --warning-bg:   rgba(184,134,11,0.11);
  --warning-soft: #fff2c6;

  --danger:      #b83a3a;
  --danger-bg:   rgba(184,58,58,0.10);
  --danger-soft: #f7e6e6;

  --info:      #2f5f8f;
  --info-bg:   rgba(47,95,143,0.10);
  --info-soft: #e9f0f6;

  --shadow-xs: 0 1px 2px rgba(11,31,59,0.06);
  --shadow-sm: 0 1px 2px rgba(11,31,59,0.07), 0 0 0 1px rgba(11,31,59,0.04);
  --shadow-md: 0 2px 10px rgba(11,31,59,0.10), 0 0 0 1px rgba(11,31,59,0.04);
  --shadow-lg: 0 10px 28px rgba(11,31,59,0.14), 0 0 0 1px rgba(11,31,59,0.04);
  --shadow-xl: 0 20px 52px rgba(11,31,59,0.20), 0 0 0 1px rgba(11,31,59,0.04);
  --shadow-accent: 0 3px 10px rgba(18,58,99,0.28);

  --brand-gradient: #0b1f3b;
  --brand-veil:     rgba(255,255,255,0.05);
  --brand-tint:     rgba(255,255,255,0.10);
  --brand-tint-hi:  rgba(255,255,255,0.17);
  --brand-alt:      #f6c445;
  --sidebar-line:   rgba(246,196,69,0.16);
  --sidebar-hover:  rgba(255,255,255,0.07);
  --sidebar-active: rgba(255,255,255,0.13);
  --sidebar-hi:     #f6c445;
  --logout:         rgba(255,190,190,0.65);
  --logout-hi:      #ffb0b0;

  --r-sm: 8px; --r: 8px; --r-lg: 12px; --r-xl: 12px; --r-2xl: 16px; --r-pill: 100px;
}

body.dark {
  --bg-primary:  #060f1e;
  --bg-surface:  #0a1626;
  --bg-card:     #0e1f36;
  --bg-input:    #081320;
  --bg-hover:    #142942;
  --bg-sidebar:  #040a15;
  --bg-topbar:   #0a1626;
  --bg-overlay:  rgba(0,0,0,0.72);

  --border:        #1c3454;
  --border-strong: #2a4a70;
  --border-focus:  #4f8fc0;
  --ring:          rgba(79,143,192,0.26);

  --text-primary:   #e7edf5;
  --text-secondary: #9db3cc;
  --text-muted:     #6883a3;
  --text-faint:     #2f4763;
  --text-sidebar:        rgba(200,220,245,0.55);
  --text-sidebar-active: #f8fafd;

  /* Azul claro — no escuro, é ele que vira o acento (tem contraste de verdade
     contra fundo quase-preto; o azul escuro original "sumiria" aqui). */
  --accent:       #4f8fc0;
  --accent-hover: #6fa8d4;
  --accent-soft:  #10233c;
  --accent-light: rgba(79,143,192,0.18);
  --accent-glow:  rgba(79,143,192,0.38);

  --highlight:       #f6c445;
  --highlight-hover: #ffd668;
  --highlight-soft:  #241d09;
  --highlight-light: rgba(246,196,69,0.16);

  --success:      #45b98a;
  --success-bg:   rgba(69,185,138,0.14);
  --success-soft: #0e2419;

  --warning:      #dbb246;
  --warning-bg:   rgba(219,178,70,0.14);
  --warning-soft: #241d09;

  --danger:      #e2726f;
  --danger-bg:   rgba(226,114,111,0.14);
  --danger-soft: #2a1211;

  --info:      #6fa8d4;
  --info-bg:   rgba(111,168,212,0.13);
  --info-soft: #0e2136;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.55), 0 0 0 1px rgba(79,143,192,0.06);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.6), 0 0 0 1px rgba(79,143,192,0.06);
  --shadow-lg: 0 10px 28px rgba(0,0,0,0.68), 0 0 0 1px rgba(79,143,192,0.07);
  --shadow-xl: 0 20px 52px rgba(0,0,0,0.78), 0 0 0 1px rgba(79,143,192,0.07);
  --shadow-accent: 0 3px 10px rgba(79,143,192,0.4);

  --brand-gradient: #040a15;
  --brand-veil:     rgba(79,143,192,0.06);
  --brand-tint:     rgba(79,143,192,0.11);
  --brand-tint-hi:  rgba(79,143,192,0.19);
  --brand-alt:      #f6c445;
  --sidebar-line:   rgba(246,196,69,0.14);
  --sidebar-hover:  rgba(79,143,192,0.09);
  --sidebar-active: rgba(79,143,192,0.17);
  --sidebar-hi:     #f6c445;
  --logout:         rgba(255,170,170,0.55);
  --logout-hi:      #ff9999;

  --r-sm: 8px; --r: 8px; --r-lg: 12px; --r-xl: 12px; --r-2xl: 16px; --r-pill: 100px;
}

body, body.dark { transition: background-color .22s ease, color .22s ease; }