/* ==========================================================================
   DESIGN TOKENS — Gestão de Estúdio
   ==========================================================================
   Fase 1 da harmonização de design (auditoria de 24/07/2026).

   O que é: os valores de cor, espaçamento, raio, sombra e tipografia que já
   estão em uso hoje no sistema, extraídos de style.css/studio-theme.css/
   portal.css e reunidos aqui como fonte única. Nenhum valor foi inventado —
   cada bloco abaixo reflete o que já está renderizado em produção.

   O que este arquivo NÃO faz: não substitui nem remove nada dos arquivos CSS
   existentes (style.css, studio-theme.css, admin-style.css, portal.css...).
   Ele é apenas somado a eles. Como os valores abaixo são idênticos aos que já
   estão ativos, carregar este arquivo não deve mudar a aparência de nenhuma
   tela agora — ele só passa a existir como base para as próximas fases
   (componentizar botão/card/tabela e, depois, aposentar os arquivos antigos).

   Nota — divergência encontrada: o meta "theme-color" e o ícone do PWA usam
   #017dd3, mas a cor de destaque realmente aplicada na interface (--color-accent)
   é #226dab. São dois azuis próximos, mas diferentes. Mantive aqui o valor que
   está de fato renderizado (#226dab); reconciliar os dois é uma decisão de
   marca para uma fase futura, não uma correção técnica.

   Nota — bug conhecido, ainda não corrigido (por decisão do usuário em
   24/07/2026): style.css e studio-theme.css têm um `:root {` que não fecha
   antes do bloco de dark mode, fazendo essas sobrescritas de tema escuro
   virarem seletores mortos sob CSS nesting nativo. Os valores de dark mode
   abaixo foram conferidos contra o bloco equivalente em portal.css, que é o
   único dos três escrito corretamente e por isso o que de fato funciona hoje.
   ========================================================================== */

:root {
  /* ---- Cores de marca ---- */
  --color-primary: #374151;
  --color-inactive: #6b7280;
  --color-accent: #226dab;
  --color-brand-secondary: #8b5cf6;
  --color-brand-tertiary: #10b981;

  /* ---- Cores de estado (feedback) ---- */
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #0ea5e9;

  /* ---- Superfícies e fundos ---- */
  --color-white: #ffffff;
  --bg-body: #f0f0f0ed;
  --bg-base: #f3f4f6;
  --bg-surface: #ffffff;
  --bg-subtle: #f3f4f6;

  /* ---- Texto ---- */
  --text-main: #7a8494;
  --text-body: #4b4b4d;
  --text-dark: #111827;
  --text-muted: #6b7280;
  --text-soft: #9ca3af;

  /* ---- Bordas ---- */
  --border-color: #e5e7eb;
  --border-soft: #f3f4f6;

  /* ---- Raios ---- */
  /* Teto de 14px definido pelo usuário em 24/07/2026 — --radius-lg e
     --radius-xl eram 16px/20px e foram achatados para não passar do máximo. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 14px;
  --radius-pill: 50rem;

  /* ---- Sombras ---- */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.05);

  /* ---- Tipografia ---- */
  --font-family-base: 'Google Sans', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-size-body: 1rem;
  --font-size-title: 0.95rem;

  /* ---- Compatibilidade com Bootstrap ---- */
  --bs-primary: var(--color-accent);
  --bs-body-color: var(--text-main);
  --bs-body-bg: var(--bg-body);
  --bs-border-color: var(--border-color);
  --bs-link-color: var(--color-accent);
  --bs-btn-active-color: var(--color-white);
}

html[data-bs-theme="dark"] {
  color-scheme: dark;

  --bg-body: #0b1120;
  --bg-base: #0f172a;
  --bg-surface: #022b46;
  --bg-subtle: #172033;

  --text-main: #cbd5e1;
  --text-body: #e2e8f0;
  --text-dark: #f8fafc;
  --text-muted: #94a3b8;
  --text-soft: #64748b;

  --border-color: #243047;
  --border-soft: #1e293b;

  --color-accent: #38bdf8;
  --bs-primary: #38bdf8;
  --bs-link-color: #7dd3fc;
  --bs-body-color: var(--text-main);
  --bs-body-bg: var(--bg-body);
  --bs-border-color: var(--border-color);
}