/* oficina-tokens.css — bundled, sem @import */

/* === theme-vars.css === */

/* ============================================================================
   IMPACT — tokens de identidade (cor + tipografia)
   Extraído de impact.html, valores idênticos — impact.html não foi alterado.
   Esta é agora a FONTE ÚNICA de identidade visual do ecossistema. Outros
   sistemas de design (Oficina) consomem este arquivo em vez de definir
   cor/tipografia próprias — decisão de Wagner, 2026-07-05.
   ============================================================================ */

:root {
  --ink: #0d0d0d;
  --paper: #f5f0e8;
  --accent: #c8401a;
  --muted: #6b6560;
  --border: #d4cec4;
  --mono: 'DM Mono', monospace;
  --serif: 'DM Serif Display', serif;
  --sans: 'DM Sans', sans-serif;

  /* Tom de texto de corpo usado em impact.html (nunca tokenizado lá,
     mantido literal aqui pelo mesmo motivo — não alterar o que já existe) */
  --ink-soft: #2a2520;

  /* Hover sutil sobre --paper, usado em .artifact:hover no impact.html */
  --paper-hover: #ede8df;
}


/* === layout-utils.css === */

/* ============================================================================
   IMPACT — utilitários de layout (novos, aditivos)
   Sidebar e layout de formulário flexbox automático — não existiam no
   impact.html original. Usam os tokens de cor/tipografia de theme-vars.css,
   sem introduzir paleta ou fonte nova. Autorizado por Wagner, 2026-07-05:
   "pode criar [componentes], não pode criar conceito [de identidade] novo".

   Escala de espaçamento derivada dos valores já usados em impact.html
   (0.5rem, 1rem, 1.5rem, 2rem, 3rem) — não inventada do zero.
   ============================================================================ */

:root {
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;

  /* Impact não tokeniza raio nem transição (usa 0 e valores ad-hoc) — estes
     são mínimos, só para elementos interativos não parecerem quebrados.
     Cards e superfícies continuam sem raio, retos, como no impact.html. */
  --radius-interactive: 3px;
  --transition: 150ms ease-in-out;
}

/* ============================================================
   FORM ROW — removido em 2026-07-06 (nunca utilizado em nenhuma página;
   a Oficina já cobre layout de formulário via .form-grid/.form-field
   em oficina-shell.css, com responsividade completa)
   ============================================================ */

.form-field-impact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.form-field-impact label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-field-impact input,
.form-field-impact select,
.form-field-impact textarea {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-interactive);
  padding: 0.55rem 0.75rem;
  outline: none;
  transition: border-color var(--transition);
}
.form-field-impact input:focus,
.form-field-impact select:focus,
.form-field-impact textarea:focus {
  border-color: var(--accent);
}
.form-field-impact .hint {
  font-size: 0.72rem;
  color: var(--muted);
}

/* ============================================================
   SIDEBAR — estrutura para painéis administrativos (Oficina)
   Sempre tom --ink (o mesmo "tinta" do corpo do Impact), invertido —
   não é uma cor nova, é o próprio --ink usado como fundo em vez de texto.
   ============================================================ */
:root {
  --sidebar-width: 240px;
  --topbar-height: 60px;
}

.sidebar-impact {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--ink-soft);
  color: var(--paper);
  display: flex; flex-direction: column;
  font-family: var(--sans);
}
.sidebar-impact-brand {
  height: var(--topbar-height);
  display: flex; align-items: center; gap: var(--space-1);
  padding: 0 var(--space-3);
  border-bottom: 1px solid rgba(245,240,232,.12);
  font-family: var(--serif);
  font-size: 1.05rem;
}
.sidebar-impact-section {
  padding: var(--space-3) var(--space-2) var(--space-1);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,240,232,.5);
}
.sidebar-impact-item {
  display: flex; align-items: center; gap: var(--space-1);
  padding: 0.55rem var(--space-2);
  margin: 1px var(--space-1);
  font-size: 0.85rem;
  color: rgba(245,240,232,.8);
  cursor: pointer;
  border: none; background: none;
  width: calc(100% - var(--space-1) * 2);
  text-align: left;
  transition: background var(--transition), color var(--transition);
}
.sidebar-impact-item:hover { background: rgba(245,240,232,.08); color: var(--paper); }
.sidebar-impact-item.active {
  background: var(--accent);
  color: var(--paper);
  font-weight: 500;
}

.topbar-impact {
  position: fixed; top: 0; left: var(--sidebar-width); right: 0;
  height: var(--topbar-height);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-3);
}

.main-impact {
  margin-left: var(--sidebar-width);
  margin-top: var(--topbar-height);
  padding: var(--space-4);
}


/* === theme-vars.css === */

/* ============================================================================
   OFICINA — ponte de tokens
   A Oficina NÃO define identidade própria (cor/tipografia) — consome o
   Impact. Decisão de Wagner, 2026-07-05: Oficina é uma implementação do
   Impact, não um sistema paralelo. Ver design/impact/README.md.

   Importa:
   - impact/tokens/theme-vars.css  (--ink, --paper, --accent, --muted,
     --border, --serif, --sans, --mono)
   - impact/tokens/layout-utils.css (--space-*, --sidebar-width,
     --topbar-height, --radius-interactive, --transition)

   Define apenas o que é genuinamente novo e não existe no Impact:
   - Escala de tamanho de fonte (Impact usa valores ad-hoc, não escala —
     os valores abaixo são os MESMOS já usados em impact.html, só nomeados)
   - Cores de status (sucesso/aviso/erro/info) — Impact não tem, backoffice
     precisa. Tons contidos, não competem com --accent.
   ============================================================================ */

:root {
  /* ---- aliases semânticos -> identidade do Impact (sem cor/fonte nova) ---- */
  --bg: var(--paper);
  --surface: var(--paper);
  --text: var(--ink);
  --text-muted: var(--muted);
  --topbar-bg: var(--paper);
  --color-primary: var(--accent);
  --color-primary-dark: var(--accent);
  --font-family-sans: var(--sans);
  --font-family-mono: var(--mono);

  /* Sidebar — --ink como fundo (o próprio tom, invertido), não uma cor nova */
  --sidebar-bg: var(--paper);
  --sidebar-text: var(--muted);
  --sidebar-active: #ffffff;
  --sidebar-active-bg: var(--accent);
  --sidebar-hover: var(--paper-hover);

  /* ---- escala de tamanho — valores já usados em impact.html, só nomeados ---- */
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.82rem;
  --font-size-base: 0.95rem;
  --font-size-lg: 1.05rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.9rem;

  /* ---- raio e sombra — Impact é reto/sem sombra; só o mínimo pra inputs/
     botões não parecerem quebrados (decisão explícita, não omissão) ---- */
  --radius-full: 9999px;
  --radius-lg: var(--radius-interactive);
  --radius-md: var(--radius-interactive);
  --radius-xl: 0;
  --shadow-sm: none;
  --transition-base: var(--transition);

  /* ---- cores de status — Impact não define, backoffice precisa.
     Tons contidos, não competem com --accent (vermelho-tijolo). ---- */
  --color-success: #4a7c59;
  --color-success-dark: #325a3d;
  --color-success-light: #e3ecdf;
  --color-warning: #b8873b;
  --color-warning-dark: #8f6526;
  --color-warning-light: #f2e8d6;
  --color-danger: #a13a2e;
  --color-danger-dark: #7c2c22;
  --color-danger-light: #f0ddd8;
  --color-info: #4a6b7c;
  --color-info-light: #dde6ea;

  /* Neutros de apoio (badge neutro, rótulo de seção da sidebar) —
     derivados de --border/--muted, não uma escala de cinza nova */
  --color-gray-100: var(--border);
  --color-gray-400: rgba(245, 240, 232, .5);
  --color-gray-500: rgba(245, 240, 232, .5);
  --color-gray-600: var(--muted);
}