/* ==========================================================================
 * Design tokens — Roteirizador BR4 (UI-01 / DEC-062)
 * Fonte: docs/DESIGN.md (referência monday.com via styles.refero.design).
 * Vendorizado, um arquivo, custom properties puras. Sem Tailwind, sem build.
 *
 * ADAPTAÇÕES ⚠ (o DESIGN.md documenta um SITE DE MARKETING; isto é uma FERRAMENTA
 * OPERACIONAL densa — planejador com tabelas, mapa e edição). Mudanças conscientes,
 * registradas aqui e no RELATORIO_UI01:
 *
 *  1. ESCALA DISPLAY capada. O DESIGN vai a 64px (herói de marketing). Numa tela de
 *     trabalho isso desperdiça altura. Teto ~32px: heading 36→28, heading-lg 48→32,
 *     display 64→32. Tracking negativo suavizado nos tamanhos menores. Corpo,
 *     caption, subheading e heading-sm ficam INTEGRAIS.
 *  2. RITMO DE DENSIDADE. Espaço de "workshop" (64px entre seções, 24px em card) é de
 *     marketing. Para trabalho: --section-gap 64→32, --card-padding 24→16. A ESCALA
 *     de espaçamento (8→96) fica integral — só o ritmo de layout muda.
 *  3. WASHES DE STATUS. O DESIGN tem Status Pill (verde=done, laranja=working,
 *     azul=info, vermelho=erro) mas a paleta não traz pastel laranja/vermelho sólido.
 *     Defino washes de status operacional a partir dos pastéis do DESIGN + dois
 *     tons suaves (âmbar/vermelho) que a paleta não cobre — necessidade da ferramenta,
 *     não invenção de marca. Texto sempre Ink. O mapeamento estado→wash vive no
 *     Python (web/otimizacao/status_pill.py), testado 1:1 contra os enums.
 *
 * Tudo o mais (cores, raios, sombra, tipografia, escala de espaçamento) é INTEGRAL.
 * ========================================================================== */

:root {
  /* --- Cores (integral) --- */
  --color-monday-violet: #6161ff;
  --color-ink: #333333;
  --color-slate: #535768;
  --color-iron: #808080;
  --color-fog: #cacbcd;
  --color-mist: #d0d4e4;
  --color-pebble: #dddfeb;
  --color-cloud: #f5f6f8;
  --color-snow: #ffffff;
  --color-shadow-dust: #e6e7ea;
  --color-mint: #bcfe90;
  --color-sky: #abf0ff;
  --color-apricot: #ff8940;
  --color-lavender: #eddff7;
  --color-periwinkle: #e7ecff;
  --color-cornflower: #93beff;
  --color-aqua: #d1faff;
  --color-cotton-candy: #e98dfe;
  --color-ultra-violet: #9450fd;
  --color-electric-cyan: #3ac9ff;
  --color-forest: #2a5c4e;
  --color-peony: #fcd0f8;
  --color-periwinkle-wash: #dbdbff;
  --color-prism: #8181ff;
  --gradient-prism: conic-gradient(from 270deg, rgb(129, 129, 255) 15%, rgb(51, 219, 219) 40%, rgb(51, 213, 142) 55%, rgb(255, 214, 51) 65%, rgb(252, 82, 125) 85%, rgb(129, 129, 255) 100%);

  /* --- Superfícies (integral) --- */
  --surface-canvas: #f5f6f8;
  --surface-card: #ffffff;
  --surface-brand-panel: #6161ff;

  /* --- Tipografia: família (integral) --- */
  --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* --- Tipografia: escala (corpo/caption/subheading/heading-sm INTEGRAIS) --- */
  --text-caption: 12px;
  --leading-caption: 1.45;
  --tracking-caption: -0.12px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.16px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.22px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.36px;
  /* ADAPTADO ⚠ (densidade): teto de display ~32px em vez de 36/48/64. */
  --text-heading: 28px;
  --leading-heading: 1.25;
  --tracking-heading: -0.4px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.5px;
  --text-display: 32px;
  --leading-display: 1.2;
  --tracking-display: -0.5px;

  /* --- Espaçamento: escala (integral) --- */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* --- Layout: ritmo ADAPTADO ⚠ para densidade operacional --- */
  --page-max-width: 1200px;
  --section-gap: 32px;   /* DESIGN 64 */
  --card-padding: 16px;  /* DESIGN 24 */
  --element-gap: 8px;

  /* --- Raios (integral) --- */
  --radius-nav: 6px;
  --radius-cards: 24px;
  --radius-badges: 6px;
  --radius-images: 12px;
  --radius-inputs: 6px;
  --radius-buttons: 160px;
  --radius-full: 160px;

  /* --- Sombra (integral) --- */
  --shadow-xl: rgba(205, 208, 223, 0.4) 0px 2px 48px 0px;
  --shadow-xl-2: rgba(0, 0, 0, 0.15) 0px 5px 45px 0px;
  --shadow-xl-3: rgba(0, 0, 0, 0.15) 0px 4px 40px 0px;

  /* --- Washes de status ADAPTADOS ⚠ (ver bloco no topo). Texto sempre Ink. --- */
  --pill-text: var(--color-ink);
  --pill-done-bg: var(--color-mint);            /* verde — concluído/pronto/escolhido */
  --pill-progress-bg: #ffe3c7;                  /* âmbar suave — em andamento/na fila */
  --pill-info-bg: var(--color-aqua);            /* azul — avaliado (marco) */
  --pill-brand-bg: var(--color-periwinkle-wash);/* violeta suave — publicado (comprometido) */
  --pill-neutral-bg: var(--color-pebble);       /* cinza — rascunho/importado/pendente */
  --pill-danger-bg: #ffd7d7;                    /* vermelho suave — falhou/timeout/cancelado */
}