/*
 * Camerinhas: tokens visuais (cores, tipografia, espaçamento, raio).
 * Única fonte das cores do site. Página nenhuma define hex próprio: usa
 * estas variáveis. Mudou aqui, muda em tudo.
 *
 * Duas camadas:
 *  - Marca (--brand-*): identidade. Manda na área pública.
 *  - Semântica (--status-*): significado. Manda no painel. São 5 tons, cada
 *    um com um significado só, sempre com ícone ou texto junto.
 *
 * Área pública e páginas internas usam a mesma base: papel creme, tinta
 * azul-marinho e botão azul-marinho com texto amarelo. No painel o amarelo
 * vivo é só marca (cabeçalho e botões); o âmbar de atenção é ocre e vem
 * sempre com ícone, então os dois não se confundem.
 *
 * Contraste (WCAG 2.1): todo par texto/fundo listado passa AA (4,5:1);
 * gráficos e bordas de campo passam 3:1. Os números estão nos comentários.
 */

/* Fonte da marca, servida pelo próprio site */
@font-face {
  font-family: 'Tropi Land';
  src: url('/fonts/TropiLand.woff') format('woff'), url('/fonts/TropiLand.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------------
   * Marca
   * ------------------------------------------------------------------- */
  --brand-navy: #072A6E;        /* azul do logo: texto, botão principal (12,8:1 no papel) */
  --brand-navy-hover: #033196;  /* hover do botão principal */
  --brand-blue: #0246C4;        /* azul do mascote pixel: links e anel de foco (7,5:1) */
  --brand-yellow: #FFB000;      /* amarelo Kodak: só texto sobre navy (7,3:1) ou preenchimento com texto navy */
  --brand-yellow-soft: #FFF6DD; /* fundo de destaque amarelo (navy 12,4:1) */
  --brand-sand: #D9CCBA;        /* neutro quente da marca (navy 8,5:1) */
  --brand-sand-soft: #F3EEE6;   /* fundo de caixas informativas da marca (navy 11,6:1) */

  /* ---------------------------------------------------------------------
   * Neutros
   * ------------------------------------------------------------------- */
  --color-bg: #FBFAF6;          /* papel: fundo das páginas */
  --color-surface: #FFFFFF;     /* campos, cartões, caixas */
  --color-surface-muted: #F1EFE9; /* contadores, áreas de apoio */
  --color-selected: #F1EFE9;    /* hover e seleção: neutro, para não parecer o tom info */
  --color-ink: var(--brand-navy);
  --color-ink-muted: #3B5391;   /* texto secundário (7,1:1 no papel) */
  --color-ink-subtle: #5F6B8F;  /* placeholder e dicas fracas (5,3:1 no branco) */
  --color-line: #DAD6CA;        /* divisórias decorativas */
  --color-line-strong: #8A8576; /* borda de campos e controles (3,7:1, exigido 3:1) */
  --color-link: var(--brand-blue);
  --color-action: var(--brand-navy);        /* botão principal */
  --color-action-hover: var(--brand-navy-hover);
  --color-focus: var(--brand-blue);
  --color-backdrop: rgba(7, 42, 110, .35);
  --shadow-overlay: 0 12px 40px rgba(7, 42, 110, .22);
  --shadow-popover: 0 8px 20px rgba(7, 42, 110, .12);

  /* ---------------------------------------------------------------------
   * Semântica: 5 tons, cada um com um significado só, igual em todas as
   * telas. fg = texto e ícone (AA no bg e no branco), bg = fundo do selo ou
   * aviso, solid = gráfico (anel, bolinha, borda), 3:1 no branco.
   * Estado nunca vai só na cor: selo e aviso têm ícone e texto.
   * ------------------------------------------------------------------- */
  /* Sucesso: resolvido, nada a fazer (assinado, sessão, pago, kit recebido, lead fechado, dados enviados) */
  --status-success-fg: #1D6B42;    /* 5,6:1 no bg */
  --status-success-bg: #E2F1E7;
  --status-success-solid: #2E8A57; /* 4,3:1 */

  /* Atenção: aguardando, ainda no prazo (falta assinar, não pago, vence hoje, lead novo) */
  --status-warning-fg: #7A4B00;    /* 6,5:1 no bg */
  --status-warning-bg: #FCEFD4;
  --status-warning-solid: #B8740A; /* 3,8:1 */

  /* Perigo: ação imediata (atrasado, prazo vencido, acima de 5 kits, erro, link vencido) */
  --status-danger-fg: #A1261A;     /* 6,3:1 no bg */
  --status-danger-bg: #FBE7E3;
  --status-danger-solid: #CC3A26;  /* 5,0:1 */

  /* Informação: em andamento, nada a fazer agora (kit em uso ou voltando, lead em negociação, avisos neutros) */
  --status-info-fg: #1C4F9C;       /* 6,7:1 no bg */
  --status-info-bg: #E3ECFA;
  --status-info-solid: #2F6BD0;    /* 5,1:1 */

  /* Neutro: encerrado sem efeito (cancelado, perdido, orçamento expirado) */
  --status-neutral-fg: #555B66;    /* 5,8:1 no bg */
  --status-neutral-bg: #ECEDEF;
  --status-neutral-solid: #868C96; /* 3,4:1 */

  /* Calendário: feriado é anotação de dia, não estado */
  --calendar-holiday-fg: #6A35A0;  /* 7,8:1 no branco */
  --calendar-holiday-bg: #F1E9FA;
  --calendar-holiday-stripes: repeating-linear-gradient(135deg, rgba(106, 53, 160, .14) 0 1.5px, transparent 1.5px 14px);
  --calendar-free: #E3DFD3;        /* traço vazio de anéis e barras */

  /* Ícones de estado (máscaras: herdam a cor do texto) */
  --icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E");
  --icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4.6V8l2.4 1.6'/%3E%3C/svg%3E");
  --icon-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 1.8l6.6 12H1.4z'/%3E%3Cpath d='M8 6.2v3.4' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='11.7' r='.5' stroke-width='1.4'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M10 4.5L13.5 8 10 11.5'/%3E%3C/svg%3E");
  --icon-neutral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M3.8 12.2l8.4-8.4'/%3E%3C/svg%3E");
  /* "i" de informação, para avisos de texto (o de estado é a seta de andamento) */
  --icon-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 7.4v4'/%3E%3Ccircle cx='8' cy='4.9' r='.4' stroke-width='1.6'/%3E%3C/svg%3E");

  /* ---------------------------------------------------------------------
   * Tipografia
   * ------------------------------------------------------------------- */
  --font-display: 'Tropi Land', Archivo, system-ui, sans-serif;
  --font-body: Archivo, system-ui, sans-serif;
  --fs-caption: 12px;   /* contadores, siglas de dia */
  --fs-small: 13px;     /* ajuda, metadados */
  --fs-label: 14px;     /* rótulos de campo, avisos */
  --fs-dense: 15px;     /* corpo do painel */
  --fs-body: 16px;      /* corpo das páginas e campos (16 evita zoom no iPhone) */
  --fs-lead: 19px;      /* totais, destaque de valor */
  --fs-title: 22px;     /* títulos de seção e de janela */
  --fs-display: 36px;   /* título da página, na fonte da marca */
  --lh-tight: 1.1;
  --lh-snug: 1.4;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

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

  /* ---------------------------------------------------------------------
   * Raio e larguras
   * ------------------------------------------------------------------- */
  --radius-sm: 3px;     /* campos, botões, caixas: o canto quase reto da marca */
  --radius-md: 6px;     /* janelas e cartões flutuantes */
  --radius-pill: 999px; /* pílulas e contadores */
  --width-form: 560px;  /* formulários e orçamento */
  --width-tool: 620px;  /* ferramentas internas */
  --width-panel: 980px; /* painel */
  --tap-min: 44px;      /* altura mínima de botão principal */
}