/* ============================================================
   Design tokens — Studio Control
   Redesign V1: paleta clara + modo escuro (mock docs/mock-premium).
   Fonte de verdade: docs/design-system.md.

   Os nomes antigos (--bg, --panel, --panel-ink, --ink-on-dark…) foram mantidos
   — só os valores mudaram — pra não tocar nos ~150 usos espalhados pelo CSS.
   Os nomes novos (--canvas, --surface, --ink…) são os do mock.
   Modo escuro: [data-theme="dark"] no <html> (botão sol/lua) ou, sem escolha
   salva, prefers-color-scheme: dark.
   ============================================================ */

:root {
  /* ---- Mock: superfícies e tinta ---- */
  --canvas: #ECE7E1;
  --surface: #FBF9F6;
  --surface-2: #DCD4CA;
  --card: #F1ECE5;            /* cartão interno (antes #fff) dentro de panel */
  --ink: #1F1C19;
  --ink-2: #4F4943;
  --ink-3: #625B54;            /* mock usa #85857E; escurecido pra manter texto ≥ 4.5:1 (AA) */
  --line: rgba(31, 28, 25, .10);
  --line-strong: rgba(31, 28, 25, .18);
  --on-ink: #FBF9F6;          /* texto sobre fundo --ink (botão, item ativo) */
  --placeholder: #625B54;     /* texto de exemplo nos campos (≥ 4.5:1 sobre o campo) */
  /* Separação entre camadas e contorno de controles (WCAG 1.4.11, ≥ 3:1 nos controles). No claro mantêm o visual do mock. */
  --ctrl-line: var(--line-strong);   /* contorno de botões vazados e chips */
  --kb-card: #F1ECE5;         /* cartão do kanban */
  --kb-card-edge: transparent;       /* filete do cartão do kanban */
  --track: var(--surface-2);         /* trilha das barras de andamento */

  /* ---- Amarelo: só faixa lateral e destaque de dado ---- */
  --gold: #FFC209;
  --on-gold: #191917;
  --gold-soft: #F7E7A6;
  --gold-text: #7A5A00;       /* texto de chamada (CTA) legível sobre claro */

  /* ---- Tiles tintados ---- */
  --tint-butter: #F3EAC2;
  --tint-sage: #DCD4CA;
  --tint-stone: #DCD4CA;
  --tint-clay: #F3DADA;       /* só para atraso */

  /* ---- Estado ---- */
  --danger: #C8323C;
  --on-danger: #FFFFFF;       /* texto sobre fundo --danger (barra atrasada) */
  --danger-ink: #C8323C;      /* texto/ícone de atraso sobre superfície (AA) */
  --ok: #4F4943;
  --conv: #4F4943;
  /* Em curso (negociação, aguardando, em aberto): azul-acinzentado. O dourado fica só para ação. */
  --info: #4F4943;
  --info-ink: #4F4943;
  --ambar-bg: #DCD4CA;        /* topo âmbar (Histórico): fundo quente, não derivado do cinza */

  /* ---- Nomes legados (V1 só troca o valor) ---- */
  --bg: var(--canvas);
  --bg-2: var(--surface-2);
  --pdf-bg: #ECEAE4;          /* fundo claro da peça/proposta — igual nos dois modos */

  --panel: var(--surface);
  --panel-ink: var(--ink);
  --panel-muted: var(--ink-2);
  --panel-line: var(--line);

  --ink-on-dark: var(--ink);        /* texto direto sobre o fundo da página */
  --muted-on-dark: var(--ink-2);
  --line-on-dark: var(--line);

  --gold-1: #E9C46A;
  --gold-2: #C8892E;
  --gold-b: var(--gold);
  --gold-grad: var(--gold);   /* cor CHAPADA, sem degradê */

  /* ---- Direção C (regras-ui 13.1): papéis novos ---- */
  --bloco-painel: #2A2622;      /* painel escuro de destaque */
  --nav-bg: var(--bloco-painel); /* menu fixo do celular */
  --nav-edge: transparent;
  --nav-fg: var(--on-painel-2);
  --on-painel: #F4EFE8;
  --on-painel-2: #CFC7BC;
  --bloco-medio: #DCD4CA;       /* dado secundário */
  --on-medio: #1F1C19;
  --campo: #F1ECE5;
  --campo-line: #D6CEC3;
  --alerta: #C8323C;
  --verde: #2E7D4F;            /* só para estado automático dando certo (ex.: Drive reconectando sozinho) */
  --st-ok-bg: #2E7D4F;         /* chip de concluído (aprovado, faturado, pago, em dia): verde cheio, texto branco 5,1:1 */
  --st-ok-fg: #FFFFFF;
  --st-fim-bg: #1B5333;        /* ciclo fechado (faturado, paga, concluído): verde mais escuro que o de aprovado, 9:1 com texto branco */
  --st-fim-fg: #FFFFFF;
  --alerta-sobre-painel: #F08A8F;
  --cartao: #FBF9F6;            /* cartão claro, para usar dentro de um painel (que redefine --surface) */
  --on-cartao: #1F1C19;
  --on-cartao-2: #4F4943;
  --on-alerta: #FFFFFF;

  /* ---- Forma ---- */
  --radius: 34px;             /* tile / panel */
  --radius-lg: 24px;          /* cartão dentro do panel */
  --radius-sm: 16px;
  /* Chapado por padrão: sem sombra projetada; a separação vem do fio (--line). Elevação real só em toast/diálogo (--shadow-pop).
     Em 2026-10-18 o dono tirou o brilho de canto e o degradê das barras: tudo chapado de novo (regras-ui.md, seção 12). */
  --shadow: 0 0 #0000;
  --brilho-card: none;   /* sem brilho de canto (decisão do dono, 2026-10-18: sem degradê decorativo) */
  --shadow-pop: 0 24px 60px -24px rgba(25, 25, 23, .35);
  --neutral: #A89F94;            /* cinza único de legendas, barras e pilhas ("sem tom") */

  /* ---- Espaço ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* ---- Tipografia ---- */
  --font: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-pdf: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; /* só a peça/proposta, até a V7 */

  color-scheme: light;
}

/* Modo escuro escolhido no botão. */
:root[data-theme="dark"] {
  --gold-soft: #5B4A0E;
  --gold-text: #E9C46A;
  --canvas: #171513;
  --surface: #38332F;
  --surface-2: #2D2926;
  --card: #2D2926;
  --ink: #F1ECE5;
  --ink-2: #D2CAC0;
  --ink-3: #A59D93;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .17);
  --on-ink: #1F1C19;
  --placeholder: #A59D93;
  --kb-card: #2D2926;
  --kb-card-edge: rgba(255, 255, 255, .10);
  --tint-butter: #2C2819;
  --tint-sage: #2D2926;
  --tint-stone: #2D2926;
  --tint-clay: #4A2427;
  --danger: #B42D36;
  --danger-ink: #F08A8F;
  --conv: #D2CAC0;
  --info: #D2CAC0;
  --info-ink: #D2CAC0;
  --ambar-bg: #2D2926;
  --neutral: #6B635B;
  --bloco-painel: #23201D;
  --nav-bg: #ECE7E1;            /* no escuro o menu é claro: destaca do fundo */
  --nav-edge: transparent;
  --nav-fg: #3A352F;
  --bloco-medio: #BBB4AB;
  --on-medio: #1F1C19;
  --cartao: #38332F;
  --on-cartao: #F1ECE5;
  --on-cartao-2: #D2CAC0;
  --campo: #2D2926;
  --campo-line: #4F4943;
  --alerta: #B42D36;
  --verde: #2F8F5B;
  --st-ok-bg: #7FD1A0;         /* escuro: verde-menta com texto escuro (9:1) */
  --st-ok-fg: #0E2417;
  --st-fim-bg: #2A7A4E;        /* escuro: verde denso (mais escuro que a menta de aprovado), texto branco 5,4:1 */
  --st-fim-fg: #FFFFFF;
  --ctrl-line: rgba(255, 255, 255, .38);
  --track: rgba(255, 255, 255, .30);
  --shadow: 0 0 #0000;
  --shadow-pop: 0 24px 60px -24px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* Sem escolha salva (sem data-theme), segue o sistema. Mesmos valores do bloco acima. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --gold-soft: #5B4A0E;
    --gold-text: #E9C46A;
    --canvas: #171513;
    --surface: #38332F;
    --surface-2: #2D2926;
    --card: #2D2926;
    --ink: #F1ECE5;
    --ink-2: #D2CAC0;
    --ink-3: #A59D93;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .17);
    --on-ink: #1F1C19;
    --placeholder: #A59D93;
    --kb-card: #2D2926;
    --kb-card-edge: rgba(255, 255, 255, .10);
    --tint-butter: #2C2819;
    --tint-sage: #2D2926;
    --tint-stone: #2D2926;
    --tint-clay: #4A2427;
    --danger: #B42D36;
    --danger-ink: #F08A8F;
    --conv: #D2CAC0;
    --info: #D2CAC0;
    --info-ink: #D2CAC0;
    --ambar-bg: #2D2926;
    --neutral: #6B635B;
    --bloco-painel: #23201D;
    --nav-bg: #ECE7E1;
    --nav-edge: transparent;
    --nav-fg: #3A352F;
    --bloco-medio: #BBB4AB;
    --cartao: #38332F;
    --on-cartao: #F1ECE5;
    --on-cartao-2: #D2CAC0;
    --on-medio: #1F1C19;
    --campo: #2D2926;
    --campo-line: #4F4943;
    --alerta: #B42D36;
    --verde: #2F8F5B;
    --st-ok-bg: #7FD1A0;
    --st-ok-fg: #0E2417;
    --st-fim-bg: #2A7A4E;
    --st-fim-fg: #FFFFFF;
    --ctrl-line: rgba(255, 255, 255, .38);
    --track: rgba(255, 255, 255, .30);
    --shadow: 0 0 #0000;
    --shadow-pop: 0 24px 60px -24px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}