/* ============================================================
   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: #E7E7E2;
  --surface: #F4F4F0;
  --surface-2: #ECECE7;
  --card: #FAFAF8;            /* cartão interno (antes #fff) dentro de panel */
  --ink: #191917;
  --ink-2: #55554F;
  --ink-3: #66665F;            /* mock usa #85857E; escurecido pra manter texto ≥ 4.5:1 (AA) */
  --line: rgba(25, 25, 23, .10);
  --line-strong: rgba(25, 25, 23, .18);
  --on-ink: #F4F4F0;          /* texto sobre fundo --ink (botão, item ativo) */
  --placeholder: #66665F;     /* 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: var(--surface);         /* 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: #DCE5D8;
  --tint-stone: #DADFE8;
  --tint-clay: #F0D9CE;       /* só para atraso */

  /* ---- Estado ---- */
  --danger: #C0553B;
  --danger-ink: #9E3A25;      /* texto/ícone de atraso sobre superfície (AA) */
  --ok: #3F7D53;
  --conv: #3F7D53;

  /* ---- 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ê */

  /* ---- Forma ---- */
  --radius: 28px;             /* tile / panel */
  --radius-lg: 20px;          /* cartão dentro do panel */
  --radius-sm: 14px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px -26px rgba(25, 25, 23, .28);

  /* ---- 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"] {
  --canvas: #121211;
  --surface: #1D1D1B;
  --surface-2: #262624;
  --card: #262624;
  --ink: #EFEEE8;
  --ink-2: #B3B2AA;
  --ink-3: #96958C;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .17);
  --on-ink: #191917;
  --placeholder: #AAA9A0;
  --ctrl-line: rgba(255, 255, 255, .38);   /* ≥ 3:1 sobre cartão e fundo escuros */
  --kb-card: #2B2B29;
  --kb-card-edge: rgba(255, 255, 255, .10);
  --track: rgba(255, 255, 255, .36);

  --gold-soft: #5B4A0E;
  --gold-text: #E9C46A;
  --tint-butter: #2C2819;
  --tint-sage: #1F2A22;
  --tint-stone: #202631;
  --tint-clay: #3A2620;

  --danger-ink: #E58A70;
  --conv: #6FBF8A;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -26px 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]) {
    --canvas: #121211;
    --surface: #1D1D1B;
    --surface-2: #262624;
    --card: #262624;
    --ink: #EFEEE8;
    --ink-2: #B3B2AA;
    --ink-3: #96958C;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .17);
    --on-ink: #191917;
    --placeholder: #AAA9A0;
    --ctrl-line: rgba(255, 255, 255, .38);
    --kb-card: #2B2B29;
    --kb-card-edge: rgba(255, 255, 255, .10);
    --track: rgba(255, 255, 255, .36);

    --gold-soft: #5B4A0E;
    --gold-text: #E9C46A;
    --tint-butter: #2C2819;
    --tint-sage: #1F2A22;
    --tint-stone: #202631;
    --tint-clay: #3A2620;

    --danger-ink: #E58A70;
    --conv: #6FBF8A;
    --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -26px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}