/* ═══════════════════════════════════════════════════════════════════════════
   BIX Design Tokens — brand.css
   FONTE DA VERDADE: todas as cores e tokens visuais do sistema.

   Como usar em qualquer nova folha de estilo:
     @import url("../core/css/brand.css");   (ajuste o caminho relativo)

   Ou carregue via HTML antes dos demais CSS:
     <link rel="stylesheet" href="{% static 'core/css/brand.css' %}">
═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Paleta da Marca ───────────────────────────────────────────────────── */
  /*    Valores raw — use os aliases semânticos abaixo no CSS de componentes  */

  --brand-blue-dark:  #0d276b;   /* Azul Escuro    | rgb(13, 39, 107) */
  --brand-blue:       #0052ff;   /* Azul Brilhante | rgb(0, 82, 255) */
  --brand-white:      #ffffff;   /* Branco         | rgb(255, 255, 255) */
  --brand-black:      #000000;   /* Preto          | rgb(0, 0, 0) */
  --brand-gray-dark:  #333333;   /* Cinza Escuro   | rgb(51, 51, 51) */
  --brand-gray-light: #f4f4f4;   /* Cinza Claro    | rgb(244, 244, 244) */


  /* ── Aliases Semânticos ────────────────────────────────────────────────── */
  /*    Use estes nomes nos componentes — nunca hard-code valores hex.        */

  /* Ação / Destaque */
  --color-primary:        var(--brand-blue);        /* botões, links ativos */
  --color-primary-dark:   var(--brand-blue-dark);   /* hover, cabeçalhos, sidebar */
  --color-primary-light:  #e6eeff;                  /* tint derivado do azul brilhante */

  /* Superfícies */
  --color-sidebar-bg:     var(--brand-blue-dark);
  --color-sidebar-panel:  #0b2264;                  /* variação escura para separação interna */
  --color-topbar-bg:      var(--brand-white);
  --color-content-bg:     var(--brand-gray-light);

  /* Texto */
  --color-text:           var(--brand-black);       /* texto principal */
  --color-text-secondary: var(--brand-gray-dark);   /* texto secundário */

  /* Login */
  --color-bg-dark:        var(--brand-blue-dark);   /* painel esquerdo */
  --color-bg-panel:       #0b2264;

  /* Genérico */
  --color-white:          var(--brand-white);


  /* ── Cinzas Funcionais ─────────────────────────────────────────────────── */
  /*    Para bordas, separadores e estados desabilitados                      */

  --color-gray-50:  #f8fafc;
  --color-gray-100: var(--brand-gray-light);
  --color-gray-200: #e2e8f0;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-700: var(--brand-gray-dark);
  --color-gray-900: var(--brand-black);


  /* ── Feedback ─────────────────────────────────────────────────────────── */

  --color-error:    #ef4444;
  --color-error-bg: #fef2f2;
  --color-success:  #22c55e;
  --color-warning:  #f59e0b;


  /* ── Tipografia ──────────────────────────────────────────────────────── */

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-size-xs:   0.75rem;    /*  12px */
  --font-size-sm:   0.875rem;   /*  14px */
  --font-size-base: 1rem;       /*  16px */
  --font-size-lg:   1.125rem;   /*  18px */
  --font-size-xl:   1.25rem;    /*  20px */
  --font-size-2xl:  1.5rem;     /*  24px */
  --font-size-3xl:  1.875rem;   /*  30px */
  --font-size-4xl:  2.25rem;    /*  36px */


  /* ── Bordas & Arredondamentos ────────────────────────────────────────── */

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;


  /* ── Sombras ─────────────────────────────────────────────────────────── */

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.15);


  /* ── Transições ──────────────────────────────────────────────────────── */

  --transition: 0.25s ease;


  /* ── Layout ──────────────────────────────────────────────────────────── */

  --sidebar-width:           260px;
  --sidebar-collapsed-width: 68px;
  --topbar-height:           42px;

}