/*
 * Design System Jarbas — CSS Tokens
 * acsBrasil Contabilidade · MVP Jarbas
 *
 * Fonte visual: Instagram @acsbrasilcontabilidade + logo oficial
 * Gerado em: 04/11/2026
 *
 * COMO USAR:
 * 1. Importe este arquivo no <head> do projeto
 * 2. Use var(--token) em todo CSS — nunca cor literal
 * 3. Dark mode funciona automaticamente via prefers-color-scheme
 * 4. Para forçar tema: data-theme="dark" ou data-theme="light" no <html>
 */

/* ===========================
   GOOGLE FONTS (incluir no HTML)
   ===========================
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap">
*/

/* ===========================
   LIGHT THEME (padrão)
   =========================== */
:root {
  /* --- MARCA --- */
  --azul: #032B91;
  --azul-hover: #042478;
  --azul-light: #E8EDF8;
  --azul-surface: #F4F6FB;
  --amarelo: #F6B202;
  --amarelo-hover: #D99E02;
  --amarelo-light: #FEF7E0;

  /* --- NEUTROS (viés azul) --- */
  --bg: #FFFFFF;
  --bg-alt: #F5F7FA;
  --surface: #FFFFFF;
  --ink: #14202E;
  --ink-secondary: #4A5568;
  --ink-muted: #8494A7;
  --line: #DFE4EC;
  --line-light: #EEF1F6;

  /* --- SEMÂNTICOS --- */
  --ok: #0E8345;
  --ok-soft: #E6F5ED;
  --warn: #C27800;
  --warn-soft: #FEF3E0;
  --danger: #C53030;
  --danger-soft: #FDE8E8;
  --info: #2563EB;
  --info-soft: #EBF2FF;

  /* --- STATUS DO CONTEÚDO --- */
  --status-aprovado: var(--ok);
  --status-aprovado-bg: var(--ok-soft);
  --status-revisar: var(--warn);
  --status-revisar-bg: var(--warn-soft);
  --status-desatualizado: var(--ink-muted);
  --status-desatualizado-bg: var(--bg-alt);
  --status-retirado: var(--danger);
  --status-retirado-bg: var(--danger-soft);

  /* --- TIPOGRAFIA --- */
  --f-display: "Quicksand", "Segoe UI", system-ui, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* --- ESCALA DE TIPO --- */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 2rem;      /* 32px */

  /* --- ESPAÇAMENTO --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- RAIO --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- SOMBRA --- */
  --shadow-sm: 0 1px 3px rgba(3, 43, 145, 0.06);
  --shadow-md: 0 4px 12px rgba(3, 43, 145, 0.08);
  --shadow-lg: 0 8px 24px rgba(3, 43, 145, 0.10);
}

/* ===========================
   DARK THEME (auto)
   =========================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1220;
    --bg-alt: #121D2E;
    --surface: #162236;
    --ink: #E7EDF4;
    --ink-secondary: #B0BECD;
    --ink-muted: #94A3B8;
    --line: #263647;
    --line-light: #1C2D3E;
    --azul-light: #1A2B52;
    --azul-surface: #111D36;
    --amarelo-light: #2E2510;
    --ok: #34D399;
    --ok-soft: #0E2E1A;
    --warn: #FBBF24;
    --warn-soft: #2E2510;
    --danger: #F87171;
    --danger-soft: #2E1414;
    --info: #60A5FA;
    --info-soft: #121D36;
    --status-aprovado-bg: #0E2E1A;
    --status-revisar-bg: #2E2510;
    --status-desatualizado-bg: #1C2D3E;
    --status-retirado-bg: #2E1414;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}

/* ===========================
   DARK THEME (forçado)
   =========================== */
:root[data-theme="dark"] {
  --bg: #0C1220;
  --bg-alt: #121D2E;
  --surface: #162236;
  --ink: #E7EDF4;
  --ink-secondary: #B0BECD;
  --ink-muted: #94A3B8;
  --line: #263647;
  --line-light: #1C2D3E;
  --azul-light: #1A2B52;
  --azul-surface: #111D36;
  --amarelo-light: #2E2510;
  --ok: #34D399;
  --ok-soft: #0E2E1A;
  --warn: #FBBF24;
  --warn-soft: #2E2510;
  --danger: #F87171;
  --danger-soft: #2E1414;
  --info: #60A5FA;
  --info-soft: #121D36;
  --status-aprovado-bg: #0E2E1A;
  --status-revisar-bg: #2E2510;
  --status-desatualizado-bg: #1C2D3E;
  --status-retirado-bg: #2E1414;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

/* ===========================
   LOGO SVG (copie para o header)
   ===========================

   <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" width="42" height="42">
     <line x1="12" y1="68" x2="12" y2="12" stroke="#F6B202" stroke-width="4" stroke-linecap="round"/>
     <line x1="12" y1="68" x2="72" y2="68" stroke="#F6B202" stroke-width="4" stroke-linecap="round"/>
     <path d="M16 62 C28 58, 36 52, 44 40 S56 18, 68 14" stroke="#032B91" stroke-width="5" stroke-linecap="round" fill="none"/>
   </svg>

   Lettering: "acsBrasil" em Quicksand 700, cor var(--azul)
*/