/* ==========================================================================
   IRVIA — Design Tokens (CSS custom properties)
   Base: Manual de Aplicação da Marca v1.0 (out/2026) · Guia: ../BRAND.md
   ========================================================================== */

/* ---- Fonte institucional: DejaVu Sans (local, subset latino) ------------- */
@font-face {
  font-family: "DejaVu Sans";
  src: url("../assets/fonts/DejaVuSans.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DejaVu Sans";
  src: url("../assets/fonts/DejaVuSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Cores normativas do manual -------------------------------------- */
  --ir-azul: #142B49;          /* Azul profundo — presença institucional e interfaces */
  --ir-violeta: #7855C5;       /* Violeta íris — ênfase, detalhes, ações prioritárias */
  --ir-cinza: #565656;         /* Cinza da assinatura — assinatura e textos de apoio */
  --ir-branco: #FFFFFF;        /* Branco — respiro */

  /* ---- Escala do azul (derivada) --------------------------------------- */
  --ir-azul-50:  #EEF2F7;
  --ir-azul-100: #D8E0EB;
  --ir-azul-200: #B3C2D6;
  --ir-azul-300: #8299B8;
  --ir-azul-400: #52719A;
  --ir-azul-500: #2E4F7A;
  --ir-azul-600: #1F3D63;
  --ir-azul-700: #183356;
  --ir-azul-800: #142B49;      /* = azul profundo */
  --ir-azul-900: #0D1D33;

  /* ---- Escala do violeta (derivada) ------------------------------------ */
  --ir-violeta-50:  #F4F0FC;
  --ir-violeta-100: #E8E0F8;
  --ir-violeta-200: #D2C3F1;
  --ir-violeta-300: #B39CE6;
  --ir-violeta-400: #9576D6;
  --ir-violeta-500: #7855C5;   /* = violeta íris */
  --ir-violeta-600: #6443AE;
  --ir-violeta-700: #52378F;
  --ir-violeta-800: #422D72;
  --ir-violeta-900: #2F2052;

  /* ---- Neutros de interface (derivados) -------------------------------- */
  --ir-cinza-0:   #FFFFFF;
  --ir-cinza-50:  #F4F5F8;     /* fundo de cards/blocos do manual */
  --ir-cinza-100: #ECEEF3;
  --ir-cinza-200: #DFE2E9;
  --ir-cinza-300: #C6CBD5;
  --ir-cinza-400: #9AA1AF;
  --ir-cinza-500: #5F6B7E;     /* texto secundário em UI */
  --ir-cinza-600: #565656;     /* = cinza da assinatura */
  --ir-cinza-700: #3D4350;
  --ir-cinza-800: #262B35;
  --ir-cinza-900: #14171D;

  /* ---- Status de decisão (complemento — não definido no manual) -------- */
  --ir-aprovado:       #15803D; --ir-aprovado-bg: #DCFCE7; --ir-aprovado-solid: #16A34A;
  --ir-em-analise:     #B45309; --ir-em-analise-bg: #FEF3C7; --ir-em-analise-solid: #D97706;
  --ir-recusado:       #B91C1C; --ir-recusado-bg: #FEE2E2; --ir-recusado-solid: #DC2626;
  --ir-info:           var(--ir-azul-600); --ir-info-bg: var(--ir-azul-50);

  /* ---- Papéis (tema claro) --------------------------------------------- */
  --ir-bg:              var(--ir-cinza-50);
  --ir-surface:         var(--ir-branco);
  --ir-surface-muted:   var(--ir-cinza-100);
  --ir-border:          var(--ir-cinza-200);
  --ir-border-strong:   var(--ir-cinza-300);
  --ir-text:            var(--ir-azul);          /* títulos */
  --ir-text-body:       var(--ir-azul);          /* corpo */
  --ir-text-muted:      var(--ir-cinza-500);     /* apoio em UI */
  --ir-text-signature:  var(--ir-cinza);         /* assinatura / legendas */
  --ir-text-inverse:    var(--ir-branco);
  --ir-primary:         var(--ir-violeta);       /* ação prioritária */
  --ir-primary-hover:   var(--ir-violeta-600);
  --ir-primary-text:    var(--ir-branco);
  --ir-link:            var(--ir-violeta-600);
  --ir-focus-ring:      0 0 0 3px rgb(120 85 197 / .40);
  --ir-header-bg:       var(--ir-branco);
  --ir-panel-dark:      var(--ir-azul);

  /* ---- Tipografia ------------------------------------------------------ */
  --ir-font: "DejaVu Sans", "Bitstream Vera Sans", Verdana, system-ui, sans-serif;
  --ir-font-mono: "DejaVu Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Escala para interface (corpo mínimo 16 px, conforme manual) */
  --ir-text-xs:   12px; --ir-lh-xs:   16px;   /* rótulos, eyebrow */
  --ir-text-sm:   14px; --ir-lh-sm:   20px;   /* legendas, tabelas densas */
  --ir-text-base: 16px; --ir-lh-base: 24px;   /* corpo */
  --ir-text-lg:   18px; --ir-lh-lg:   28px;   /* subtítulo */
  --ir-text-xl:   20px; --ir-lh-xl:   28px;   /* subtítulo de página */
  --ir-text-2xl:  28px; --ir-lh-2xl:  36px;   /* título */
  --ir-text-3xl:  36px; --ir-lh-3xl:  44px;   /* título de capa / KPI */

  /* ---- Espaçamento (base 4) ------------------------------------------- */
  --ir-space-1: 4px;  --ir-space-2: 8px;   --ir-space-3: 12px; --ir-space-4: 16px;
  --ir-space-5: 20px; --ir-space-6: 24px;  --ir-space-8: 32px; --ir-space-10: 40px;
  --ir-space-12: 48px; --ir-space-16: 64px;

  /* ---- Raios ----------------------------------------------------------- */
  --ir-radius-sm: 4px;    /* botões, inputs (como no manual) */
  --ir-radius-md: 8px;
  --ir-radius-lg: 12px;   /* cards e blocos */
  --ir-radius-pill: 999px;

  /* ---- Sombras --------------------------------------------------------- */
  --ir-shadow-sm: 0 1px 2px rgb(20 43 73 / .06);
  --ir-shadow-md: 0 2px 8px rgb(20 43 73 / .08), 0 1px 2px rgb(20 43 73 / .06);
  --ir-shadow-lg: 0 12px 32px rgb(20 43 73 / .14);

  /* ---- Movimento ------------------------------------------------------- */
  --ir-ease: cubic-bezier(.2, .8, .2, 1);
  --ir-duration-fast: 120ms;
  --ir-duration: 200ms;
}

/* ---- Tema escuro (proposta) -------------------------------------------- */
[data-theme="dark"] {
  --ir-bg:            var(--ir-azul-900);
  --ir-surface:       var(--ir-azul-800);
  --ir-surface-muted: var(--ir-azul-700);
  --ir-border:        var(--ir-azul-600);
  --ir-border-strong: var(--ir-azul-500);
  --ir-text:          var(--ir-branco);
  --ir-text-body:     var(--ir-azul-50);
  --ir-text-muted:    var(--ir-azul-200);
  --ir-primary:       var(--ir-violeta-400);
  --ir-primary-hover: var(--ir-violeta-300);
  --ir-link:          var(--ir-violeta-300);
  --ir-aprovado:   #4ADE80; --ir-aprovado-bg:   rgb(22 163 74 / .18);
  --ir-em-analise: #FBBF24; --ir-em-analise-bg: rgb(217 119 6 / .18);
  --ir-recusado:   #F87171; --ir-recusado-bg:   rgb(220 38 38 / .18);
}

/* ---- Base ---------------------------------------------------------------- */
.ir-base { font-family: var(--ir-font); font-size: var(--ir-text-base); line-height: var(--ir-lh-base);
  color: var(--ir-text-body); background: var(--ir-bg); }

/* ---- Componentes mínimos ------------------------------------------------- */
.ir-eyebrow { font: 700 var(--ir-text-xs)/var(--ir-lh-xs) var(--ir-font); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ir-violeta); }

.ir-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:0; cursor:pointer;
  border-radius: var(--ir-radius-sm); font: 400 var(--ir-text-sm)/1 var(--ir-font);
  transition: background var(--ir-duration) var(--ir-ease); }
.ir-btn--primary   { background: var(--ir-primary); color: var(--ir-primary-text); }
.ir-btn--primary:hover { background: var(--ir-primary-hover); }
.ir-btn--secondary { background: var(--ir-surface); color: var(--ir-azul); box-shadow: inset 0 0 0 1px var(--ir-border-strong); }
.ir-btn:focus-visible { outline: none; box-shadow: var(--ir-focus-ring); }

.ir-card { background: var(--ir-surface); border-radius: var(--ir-radius-lg); padding: var(--ir-space-6); }
.ir-kpi-label { font-size: var(--ir-text-sm); color: var(--ir-text-muted); }
.ir-kpi-value { font: 700 var(--ir-text-3xl)/var(--ir-lh-3xl) var(--ir-font); color: var(--ir-azul);
  font-variant-numeric: tabular-nums; }

/* Status: sempre com rótulo; a cor nunca é a única indicação */
.ir-status { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius: var(--ir-radius-pill);
  font: 700 var(--ir-text-xs)/20px var(--ir-font); }
.ir-status::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }
.ir-status--aprovado   { color: var(--ir-aprovado);   background: var(--ir-aprovado-bg); }
.ir-status--em-analise { color: var(--ir-em-analise); background: var(--ir-em-analise-bg); }
.ir-status--recusado   { color: var(--ir-recusado);   background: var(--ir-recusado-bg); }

/* Logo sobre fundo escuro: sempre dentro de um campo branco */
.ir-logo-field { background: var(--ir-branco); border-radius: var(--ir-radius-md); padding: var(--ir-space-4); display:inline-block; }