/* ============================================================
   Seeg Fibras — Design Tokens (CSS Custom Properties)
   Fonte da verdade: brand kit Canva "SEEG FIBRAS"
   Importe este arquivo e use as variáveis var(--seeg-*).
   ============================================================ */

:root {
  /* ---- Cores de marca (núcleo) ---- */
  --seeg-navy:        #0A2566; /* azul-marinho — cor primária da marca */
  --seeg-blue:        #0D468C; /* azul — secundária, links, destaques */
  --seeg-orange:      #F6A319; /* laranja — accent, CTAs, energia */
  --seeg-graphite:    #3C3C3B; /* cinza-grafite — texto/superfícies escuras */
  --seeg-white:       #FFFFFF;

  /* ---- Escala de azul (derivada do navy/blue) ---- */
  --seeg-blue-900: #071B4A;
  --seeg-blue-800: #0A2566; /* = navy */
  --seeg-blue-700: #0B3576;
  --seeg-blue-600: #0D468C; /* = blue */
  --seeg-blue-500: #1D5BA8;
  --seeg-blue-400: #4480C4;
  --seeg-blue-300: #79A6D8;
  --seeg-blue-200: #B4CDEB;
  --seeg-blue-100: #E1ECF7;

  /* ---- Escala de laranja (derivada do accent) ---- */
  --seeg-orange-700: #C57E0C;
  --seeg-orange-600: #E0900F;
  --seeg-orange-500: #F6A319; /* = orange */
  --seeg-orange-400: #F8B547;
  --seeg-orange-300: #FBCD80;
  --seeg-orange-200: #FDE3B7;
  --seeg-orange-100: #FEF3DF;

  /* ---- Neutros ---- */
  --seeg-gray-900: #1A1A1A;
  --seeg-gray-800: #3C3C3B; /* = graphite */
  --seeg-gray-700: #555554;
  --seeg-gray-600: #6F6F6E;
  --seeg-gray-500: #8C8C8B;
  --seeg-gray-400: #B0B0AF;
  --seeg-gray-300: #D2D2D1;
  --seeg-gray-200: #E7E7E6;
  --seeg-gray-100: #F4F4F3;
  --seeg-gray-50:  #FAFAFA;

  /* ---- Cores semânticas (UI de software) ---- */
  --seeg-success: #1E9E5A;
  --seeg-warning: #F6A319; /* reutiliza o laranja da marca */
  --seeg-danger:  #D6453B;
  --seeg-info:    #0D468C; /* reutiliza o azul da marca */

  /* ============================================================
     TEMA CLARO (padrão)
     ============================================================ */
  --seeg-bg:            var(--seeg-white);
  --seeg-surface:       var(--seeg-gray-50);
  --seeg-surface-alt:   var(--seeg-gray-100);
  --seeg-border:        var(--seeg-gray-200);
  --seeg-text:          var(--seeg-graphite);
  --seeg-text-muted:    var(--seeg-gray-600);
  --seeg-text-on-brand: var(--seeg-white);

  --seeg-primary:       var(--seeg-blue);
  --seeg-primary-hover: var(--seeg-blue-700);
  --seeg-accent:        var(--seeg-orange);
  --seeg-accent-hover:  var(--seeg-orange-600);
  --seeg-link:          var(--seeg-blue);

  /* raio, sombra e foco — a marca é arredondada/amigável */
  --seeg-radius-sm: 6px;
  --seeg-radius-md: 12px;
  --seeg-radius-lg: 20px;
  --seeg-radius-pill: 999px;
  --seeg-shadow-sm: 0 1px 2px rgba(10, 37, 102, .08);
  --seeg-shadow-md: 0 6px 18px rgba(10, 37, 102, .12);
  --seeg-shadow-lg: 0 18px 44px rgba(10, 37, 102, .18);
  --seeg-focus-ring: 0 0 0 3px rgba(13, 70, 140, .35);

  /* ---- Motion (durações e curvas) ---- */
  --seeg-dur-fast: 120ms;
  --seeg-dur:      200ms;
  --seeg-dur-slow: 340ms;
  --seeg-ease:     cubic-bezier(.4, 0, .2, 1);
  --seeg-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- Gradientes de marca ---- */
  --seeg-grad-brand:  linear-gradient(135deg, var(--seeg-blue-700), var(--seeg-blue));
  --seeg-grad-accent: linear-gradient(135deg, var(--seeg-orange-400), var(--seeg-orange-600));

  /* ---- Visual 2026: relevo, borda em gradiente, glow e aurora ---- */
  --seeg-grad-border:    linear-gradient(160deg, rgba(13, 70, 140, .30),
                         var(--seeg-gray-200) 30%, var(--seeg-gray-200) 70%,
                         rgba(246, 163, 25, .45));
  --seeg-card-highlight: rgba(255, 255, 255, .85); /* relevo: brilho 1px no topo */
  --seeg-glow-accent:    rgba(246, 163, 25, .14);
  --seeg-shadow-card:    0 1px 2px rgba(10, 37, 102, .05), 0 6px 18px rgba(10, 37, 102, .07);
  --seeg-aurora-1:       rgba(13, 70, 140, .06);
  --seeg-aurora-2:       rgba(246, 163, 25, .05);

  /* ---- Superfície glass (topbar / overlays) ---- */
  --seeg-glass-bg:     rgba(255, 255, 255, .72);
  --seeg-glass-border: rgba(255, 255, 255, .60);

  /* ---- Shell: sidebar + topbar ---- */
  --seeg-sidebar-w:           248px;
  --seeg-sidebar-w-collapsed: 76px;
  --seeg-topbar-h:            60px;
  --seeg-rail-bg:     linear-gradient(185deg, #0A2566 0%, #071B4A 100%);
  --seeg-rail-text:   rgba(255, 255, 255, .74);
  --seeg-rail-hover:  rgba(255, 255, 255, .08);
  --seeg-rail-active: rgba(246, 163, 25, .16);
}

/* ============================================================
   TEMA ESCURO  —  <html data-theme="dark"> ou .dark
   O navy é a base; o laranja ganha protagonismo como accent.
   ============================================================ */
[data-theme="dark"], .dark {
  --seeg-bg:            #07193F; /* navy mais profundo */
  --seeg-surface:       #0A2566; /* navy da marca */
  --seeg-surface-alt:   #0B3576;
  --seeg-border:        #1D3A78;
  --seeg-text:          #EAF1FB;
  --seeg-text-muted:    #9DB4DA;
  --seeg-text-on-brand: var(--seeg-white);

  --seeg-primary:       var(--seeg-orange);     /* CTA em destaque no escuro */
  --seeg-primary-hover: var(--seeg-orange-400);
  --seeg-accent:        var(--seeg-orange);
  --seeg-accent-hover:  var(--seeg-orange-400);
  --seeg-link:          #79A6D8;

  --seeg-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --seeg-shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
  --seeg-shadow-lg: 0 20px 50px rgba(0, 0, 0, .6);
  --seeg-focus-ring: 0 0 0 3px rgba(246, 163, 25, .45);

  /* superfície glass e rail no tema escuro */
  --seeg-glass-bg:     rgba(8, 24, 60, .72);
  --seeg-glass-border: rgba(255, 255, 255, .08);
  --seeg-rail-bg:      linear-gradient(185deg, #0A2566 0%, #050F2E 100%);

  /* visual 2026 no escuro: highlight discreto, glow mais presente */
  --seeg-grad-border:    linear-gradient(160deg, rgba(255, 255, 255, .16),
                         #1D3A78 30%, #1D3A78 70%, rgba(246, 163, 25, .40));
  --seeg-card-highlight: rgba(255, 255, 255, .06);
  --seeg-glow-accent:    rgba(246, 163, 25, .16);
  --seeg-shadow-card:    0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .35);
  --seeg-aurora-1:       rgba(29, 91, 168, .20);
  --seeg-aurora-2:       rgba(246, 163, 25, .07);
}