/* ============================================================================
   KTG HUB — Design System v1 · TOKENS (única fonte)
   Carregado antes de chrome.css / styles.css / admin.css / folder-view.css.
   Guia visual e racional: docs/design-system/index.html (aprovado 21/09/2026).

   Regras:
   1. Componentes usam só tokens SEMÂNTICOS (--color-*, --space-*, --text-*,
      --radius-*, --shadow-*). Primitivas (--ktg-*) só definem os semânticos.
   2. Nenhum número solto de espaço, fonte, raio, sombra ou cor fora daqui.
   3. Público inclui pessoas mais velhas: corpo 16px, alvo de toque ≥ 44px,
      laranja nunca em texto corrido (3,24:1 com branco).
   ============================================================================ */
:root{
  color-scheme:light;   /* página é tema-claro — impede o auto/force-dark do Chrome de inverter e sumir com o modal */

  /* ---------- 1. PRIMITIVAS ---------- */
  /* oficiais do Guia de Marcas (imutáveis) */
  --ktg-orange:#FF5300;
  --ktg-gray-900:#3C3C3B;
  --ktg-gray-500:#767674;
  --ktg-gray-200:#DDDDDD;
  --ktg-gray-100:#F4F4F3;
  --ktg-orange-tint:#FFF8F5;
  --ktg-white:#FFFFFF;
  /* derivadas (não estão no guia) */
  --ktg-orange-400:#FF7A33;   /* ponta clara de degradê */
  --ktg-orange-600:#E64A00;   /* hover do acento */
  --ktg-orange-700:#B03A00;   /* laranja para TEXTO sobre branco (AA) */
  --ktg-orange-100:#FFE8DC;   /* estado selecionado */
  --ktg-gray-950:#1F1D1C;     /* superfície escura */
  --ktg-gray-800:#2E2A28;
  --ktg-gray-700:#54514F;
  --ktg-gray-150:#ECEBE9;     /* divisória suave */
  --ktg-gray-50:#FAFAF9;      /* campo de formulário */
  --ktg-gray-600:#6B6B69;     /* texto secundário: 5,34:1 no branco, 4,85:1 no fundo */
  --red-700:#B3261E;   --red-50:#FDECEB;
  --green-700:#256A31; --green-50:#E7F4E9;
  --amber-700:#8A5A00; --amber-50:#FFF5E5;

  /* ---------- 2. PAPÉIS (use só estes) ---------- */
  --color-bg:              var(--ktg-gray-100);
  --color-surface:         var(--ktg-white);
  --color-surface-muted:   var(--ktg-gray-50);
  --color-surface-inverse: var(--ktg-gray-950);
  --color-text:            var(--ktg-gray-900);
  --color-text-muted:      var(--ktg-gray-600);
  --color-text-subtle:     var(--ktg-gray-500);   /* metadado/placeholder: 4,5:1 no branco — nunca abaixo disso */
  --color-text-inverse:    #FFFFFF;
  --color-text-inverse-muted: rgba(255,255,255,.76);
  --color-border:          var(--ktg-gray-200);
  --color-divider:         var(--ktg-gray-150);
  --color-accent:          var(--ktg-orange);
  --color-accent-hover:    var(--ktg-orange-600);
  --color-accent-text:     var(--ktg-orange-700);
  --color-accent-soft:     var(--ktg-orange-tint);
  --color-accent-selected: var(--ktg-orange-100);
  --color-danger:  var(--red-700);   --color-danger-soft:  var(--red-50);
  --color-success: var(--green-700); --color-success-soft: var(--green-50);
  --color-warning: var(--amber-700); --color-warning-soft: var(--amber-50);

  /* ---------- 3. TIPOGRAFIA (interface) ---------- */
  --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --text-xs:12px;  --lh-xs:16px;    /* legenda, metadado, contador */
  --text-sm:14px;  --lh-sm:20px;    /* apoio, descrição de card, selo */
  --text-md:16px;  --lh-md:24px;    /* CORPO, campos, botões */
  --text-lg:18px;  --lh-lg:26px;    /* título de card e de seção */
  --text-xl:22px;  --lh-xl:28px;    /* título de página; banner no celular */
  --text-2xl:28px; --lh-2xl:34px;   /* título do banner no desktop */
  --text-3xl:36px; --lh-3xl:42px;   /* display (login) */
  --weight-regular:400; --weight-medium:500; --weight-bold:700;
  --tracking-caps:.08em;            /* só para caixa-alta (cabeçalho de tabela) */

  /* ---------- 4. ESPAÇO (base 4) ---------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  /* ---------- 5. FORMA ---------- */
  --radius-md:8px;     /* campo, thumb */
  --radius-lg:16px;    /* card, modal, banner */
  --radius-pill:999px; /* botão, chip */
  /* Elevação = contorno quase invisível + sombra curta só embaixo.
     O contorno já vem no token: componente com --shadow-* NÃO leva border. */
  --shadow-sm:0 0 0 1px rgba(31,29,28,.07),0 1px 2px rgba(31,29,28,.05);          /* em repouso */
  --shadow-md:0 0 0 1px rgba(31,29,28,.10),0 4px 12px -4px rgba(31,29,28,.12);    /* hover, menu */
  --shadow-lg:0 0 0 1px rgba(31,29,28,.08),0 16px 32px -12px rgba(31,29,28,.18);  /* modal, gaveta */

  /* ---------- 6. CONTROLE / LAYOUT ---------- */
  --control-h:44px;     /* alvo mínimo de toque */
  --control-h-sm:36px;  /* só em tabela/lista densa do admin */
  --focus-ring:0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-accent);
  --sb-w:240px;         /* largura da sidebar (hub e admin) */

  /* ---------- 7. MOVIMENTO ---------- */
  --dur-fast:150ms; --dur:250ms;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ==========================================================================
     LEGADO — nomes antigos apontando para o sistema, para nada quebrar.
     Fase 4 migra cada tela para os nomes novos; ao fim, este bloco é apagado.
     Não usar em código novo (o linter do QA vai reprovar).
     ========================================================================== */
  --laranja:var(--color-accent);          --laranja-2:var(--ktg-orange-400);
  --laranja-soft:var(--color-accent-soft); --laranja-soft-2:var(--color-accent-selected);
  --grafite:var(--color-text);            --cinza:var(--color-border);
  --graf-900:var(--color-surface-inverse); --graf-800:var(--ktg-gray-800);
  --graf-700:var(--ktg-gray-900);         --graf-600:var(--ktg-gray-700);
  --tinta:var(--color-text); --tinta-2:var(--color-text-muted); --tinta-3:var(--color-text-subtle);
  --linha:var(--color-divider); --linha-2:var(--color-divider);
  --branco:var(--color-surface); --painel:var(--color-surface); --fundo:var(--color-bg);
  /* sombras legadas: SEM o contorno, porque os componentes antigos já têm border */
  --sh-1:0 1px 2px rgba(31,29,28,.05);
  --sh-2:0 1px 2px rgba(31,29,28,.05);
  --sh-3:0 4px 12px -4px rgba(31,29,28,.12);
  --sh-glow:0 4px 12px -4px rgba(255,83,0,.35);
  --r-sm:var(--radius-md); --r:12px; --r-lg:var(--radius-lg); --r-xl:22px; --r-pill:var(--radius-pill);
  --ring:2.5px solid var(--color-accent); --ring-offset:3px;
}

/* ícone SVG monocromático (icons.js) — utilitário usado por hub e admin */
.ktg-ic{ flex:0 0 auto; }
.ktg-ic-emoji{ flex:0 0 auto; }