/* Identidade DEAEB para o SAEL.
 * Tokens copiados de protocolo-deaeb/web/styles/tokens.css (fonte da verdade:
 * docs/redesign/01-identidade-visual.md). Ao mudar lá, copiar para cá.
 * Fontes Inter e Outfit (SIL OFL) servidas pelo próprio SAEL. */

@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/Outfit-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/Outfit-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/Outfit-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/*
 * Tokens de design da DEAEB — fonte: docs/redesign/01-identidade-visual.md.
 * Componentes nunca usam cor hex solta: sempre estes tokens (ou os utilitários
 * do Tailwind gerados a partir deles em app/globals.css).
 */

/* 3.4 Tokens semânticos (o que os componentes usam) */
:root {
  --bg:            #F5F7FB;   /* fundo da aplicação */
  --surface:       #FFFFFF;   /* cartões, painéis */
  --surface-2:     #F9FAFD;   /* áreas internas, cabeçalho de tabela */
  --surface-sunken:#EEF2F8;   /* trilho do kanban, fundo do preview A4 */
  --border:        #E1E7F0;
  --border-strong: #C9D3E3;
  --text:          #0F1B33;   /* 16:1 */
  --text-muted:    #5B6B86;   /* 5,4:1 */
  --text-subtle:   #8391A8;   /* só para placeholder/metadado grande */

  --primary:        #15397F;
  --primary-hover:  #244B98;
  --primary-press:  #112F68;
  --primary-soft:   #EEF3FB;
  --primary-fg:     #FFFFFF;
  --ring:           #B9CCEC;

  --accent-pink:    #DC5F8A;
  --accent-yellow:  #FFF155;
  --accent-green:   #B9D36C;
  --accent-slate:   #4C5D93;

  /* status de protocolo */
  --st-andamento-bg: #FFF7C2; --st-andamento-fg: #6B5300; --st-andamento-dot: #E8C400;
  --st-resolvida-bg: #EEF6DA; --st-resolvida-fg: #3E6414; --st-resolvida-dot: #86B33A;
  --st-naores-bg:    #FCE8EF; --st-naores-fg:    #A8325E; --st-naores-dot:    #DC5F8A;

  /* feedback */
  --success: #2F7D32; --warning: #B26A00; --danger: #C62853; --info: #244B98;

  --sidebar-bg: #0E2551; --sidebar-fg: #DCE6F6; --sidebar-active: #15397F;
  --sidebar-indicator: #FFF155;  /* barrinha amarela no item ativo */

  /* fundo atrás de modal, gaveta e paleta (azul 950 a 45%, como no protótipo) */
  --overlay: rgba(8,23,47,.45);
}

[data-theme="dark"] {
  --bg:            #0B1530;
  --surface:       #111E3F;
  --surface-2:     #16264D;
  --surface-sunken:#0E1A38;
  --border:        #22345F;
  --border-strong: #2E4478;
  --text:          #E6ECF8;
  --text-muted:    #94A3BD;
  --text-subtle:   #6D7D9C;
  --primary:       #8DAADD;
  --primary-hover: #B9CCEC;
  --primary-press: #5E84C8;
  --primary-soft:  #16264D;
  --primary-fg:    #08172F;
  --ring:          #3A63AF;
  --st-andamento-bg: #3A3310; --st-andamento-fg: #FFE97A;
  --st-resolvida-bg: #243515; --st-resolvida-fg: #CFE69A;
  --st-naores-bg:    #3F1627; --st-naores-fg:    #F4A9C3;
  --sidebar-bg: #08172F; --sidebar-active: #16264D;
  --overlay: rgba(0,0,0,.55);
}

/* 5. Sombras (azuladas, nunca pretas). No escuro viram borda --border-strong
   + sombra preta a 40% de opacidade. */
:root {
  --shadow-xs: 0 1px 2px rgba(14,37,81,.06);
  --shadow-sm: 0 2px 8px rgba(14,37,81,.06), 0 1px 2px rgba(14,37,81,.04);
  --shadow-md: 0 8px 24px rgba(14,37,81,.10);
  --shadow-lg: 0 20px 48px rgba(14,37,81,.18);
}

[data-theme="dark"] {
  --shadow-xs: 0 0 0 1px var(--border-strong), 0 1px 2px rgba(0,0,0,.40);
  --shadow-sm: 0 0 0 1px var(--border-strong), 0 2px 8px rgba(0,0,0,.40);
  --shadow-md: 0 0 0 1px var(--border-strong), 0 8px 24px rgba(0,0,0,.40);
  --shadow-lg: 0 0 0 1px var(--border-strong), 0 20px 48px rgba(0,0,0,.40);
}

/*
 * Paleta fixa (não muda com o tema). `@theme static` gera os utilitários do
 * Tailwind (bg-brand-blue, text-blue-700, bg-setor-ef…) e publica cada valor
 * como variável CSS (--color-brand-blue…).
 */
:root {
  /* Sem a paleta padrão do Tailwind: só existem as cores da marca. */
  --color-*: initial;

  /* Branco puro: texto sobre o azul da sidebar e sobre as cores escuras de setor. */
  --color-white: #FFFFFF;

  /* 3.1 Paleta da marca */
  --color-brand-blue:       #15397F;
  --color-brand-blue-semed: #01388C;
  --color-brand-slate:      #4C5D93;
  --color-brand-pink:       #DC5F8A;
  --color-brand-yellow:     #FFF155;
  --color-brand-green:      #B9D36C;

  /* 3.2 Escala do azul (primária) */
  --color-blue-50:  #EEF3FB;
  --color-blue-100: #DCE6F6;
  --color-blue-200: #B9CCEC;
  --color-blue-300: #8DAADD;
  --color-blue-400: #5E84C8;
  --color-blue-500: #3A63AF;
  --color-blue-600: #244B98;
  --color-blue-700: #15397F;
  --color-blue-800: #112F68;
  --color-blue-900: #0E2551;
  --color-blue-950: #08172F;

  /* 3.3 Acentos com escala mínima */
  --color-pink-50:  #FCE8EF;
  --color-pink-500: #DC5F8A;
  --color-pink-700: #A8325E;
  --color-yellow-50:  #FFF7C2;
  --color-yellow-500: #FFF155;
  --color-yellow-700: #6B5300;
  --color-green-50:  #EEF6DA;
  --color-green-500: #B9D36C;
  --color-green-700: #3E6414;
  --color-slate-50:  #ECEFF7;
  --color-slate-500: #4C5D93;
  --color-slate-700: #34416B;

  /* 3.5 Cores de gráfico (ordem fixa) */
  --color-chart-1: #15397F;
  --color-chart-2: #DC5F8A;
  --color-chart-3: #86B33A;
  --color-chart-4: #E8C400;
  --color-chart-5: #4C5D93;
  --color-chart-6: #5E84C8;
  --color-chart-7: #A8325E;
  --color-chart-8: #3E6414;

  /* 3.5 Cor fixa de cada setor (gráfico, chip e avatar) */
  --color-setor-ef:      #DC5F8A;  /* Ensino Infantil */
  --color-setor-ai:      #15397F;  /* Anos Iniciais */
  --color-setor-af:      #4C5D93;  /* Anos Finais */
  --color-setor-ejaf:    #86B33A;  /* EJA e Diversidade */
  --color-setor-alf:     #E8A200;  /* Alfabetização */
  --color-setor-ee:      #5E84C8;  /* Educação Especial */
  --color-setor-pro:     #A8325E;  /* Escola que Protege */
  --color-setor-d-deaeb: #0E2551;  /* Direção DEAEB */

  /* 5. Raios */
  --radius-sm: 6px;   /* inputs, chips */
  --radius-md: 10px;  /* botões, cartões pequenos */
  --radius-lg: 14px;  /* cartões, painéis */
  --radius-xl: 20px;  /* modais, cartão de sucesso */

  /* 5. Layout */
  --spacing-sidebar: 264px;
  --spacing-sidebar-recolhida: 72px;
  --spacing-drawer: 520px;
  --container-conteudo: 1280px;

  /* 4. Escala tipográfica (tamanho / altura de linha) */
  --text-display: 2.25rem;
  --text-display--line-height: 2.5rem;
  --text-h1: 1.75rem;
  --text-h1--line-height: 2.125rem;
  --text-h2: 1.25rem;
  --text-h2--line-height: 1.75rem;
  --text-h3: 1.0625rem;
  --text-h3--line-height: 1.5rem;
  --text-body: 0.9375rem;
  --text-body--line-height: 1.5rem;
  --text-small: 0.8125rem;
  --text-small--line-height: 1.25rem;
}