/* ═══════════════════════════════════════════════════════════════
   Contas em Dia — design tokens
   Ratified: PRJ-DEC-006 (2026-07-18) · values: MEM-2026-07-18-017
   Supersedes the provisional dark-only navy Pico theme.

   Rules encoded here:
   · Teal #1F6F5C is the brand anchor (trust + money, non-punishing).
   · Ledger-red is retired from everyday semantics — irreversible only.
   · Sun-yellow carries attention as bordered fill / chip background.
     It is NEVER light-mode text (yellow at 4.5:1 is mustard #8A6D00).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand constants (theme-independent) ───────────────────── */
  --brand-teal: #1F6F5C;
  --brand-sun: #E9BB2E;   /* fill only in light mode, never text */
  --brand-sun-edge: #967315;
  --brand-red: #A63D2F;   /* irreversible actions only */

  /* ── Radius: half scale ────────────────────────────────────── */
  --radius-card: 5px;
  --radius-control: 4px;  /* controls + chips */
  --radius-meter: 2px;

  /* ── Typography ────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --weight-display: 700;
  --weight-body: 400;
  --weight-body-strong: 600;

  /* Escala tipográfica fechada. 11px é o piso do sistema — nada abaixo,
     em lugar nenhum. Ver design_directions_ii.md §3. */
  --text-xs: 11px;    /* rótulos de coluna, metadados secundários */
  --text-sm: 12px;    /* corpo de tabela */
  --text-base: 13px;  /* corpo de formulário, navegação */
  --text-md: 14px;    /* ênfase em linha, nomes de conta */
  --text-lg: 20px;    /* título de página */
  --text-hero: 28px;  /* número-herói */

  /* ── Escala de controles ───────────────────────────────────────
     Todo controle encosta numa destas três alturas. Nenhuma avulsa.
     Controles na mesma linha compartilham altura, sem exceção. */
  --control-sm: 28px;
  --control-md: 32px;   /* padrão */
  --control-lg: 36px;

  --control-sm-px: 8px;   /* padding horizontal por tamanho */
  --control-md-px: 10px;
  --control-lg-px: 14px;

  --control-sm-fs: var(--text-sm);
  --control-md-fs: var(--text-base);
  --control-lg-fs: var(--text-md);

  /* Seta de dropdown — todo select a carrega (§4 do estudo II) */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235A6B64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

  --icon-sm: 16px;
  --icon-lg: 18px;

  --row-h: 28px;  /* altura de linha de tabela */

  /* Largura da barra lateral — variável porque é redimensionável pelo
     usuário (arraste na borda direita), persistida em localStorage.
     O valor aqui é só o padrão antes de qualquer ajuste. */
  --sidebar-w: 220px;
  --sidebar-w-min: 180px;
  --sidebar-w-max: 420px;

  /* ── Spacing ───────────────────────────────────────────────── */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */

  --transition: 0.12s ease;
}

/* ── Escala de toque ───────────────────────────────────────────
   Celular é secundário no geral, mas é a superfície primária para
   lançar transações. Dois pisos duros: alvo de toque (iOS 44pt /
   Material 48dp) e o zoom automático do Safari iOS em campo com
   fonte < 16px. Ver design_directions_ii.md §11. */
@media (max-width: 720px) {
  :root {
    --control-sm: 36px;
    --control-md: 44px;
    --control-lg: 48px;
    --control-md-fs: 16px;  /* obrigatório: abaixo disso o iOS dá zoom */
    --control-lg-fs: 16px;
    --text-sm: 14px;        /* corpo de tabela sobe no toque */
    --row-h: 36px;
    --sidebar-w: 220px;     /* redimensionamento é recurso de desktop */
  }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — the default
   ═══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  --bg: #F4F7F5;
  --surface: #FFFFFF;
  --surface-sunk: #F4F7F5;
  --ink: #172420;
  --muted: #5A6B64;
  --border: #DCE5E0;
  --border-strong: #749585;  /* 3.05:1 on bg — WCAG 1.4.11 control boundary */
  --primary: #1F6F5C;
  --primary-hover: #175647;
  --primary-on: #FFFFFF;
  --track: #E3EBE7;
  --focus-ring: rgba(31, 111, 92, 0.28);
  --row-hover: #F0F5F2;

  /* Attention fill — the A4 "sol" treatment (bordered, background/meter
     fill only — chip-warn-text was designed for the light chip-warn-bg
     wash, not for text sitting directly on this bolder fill, so the
     "Atenção" callout pill in the help KB needs its own safe pairing). */
  --attention-fill: #E9BB2E;
  --attention-edge: #967315;
  --attention-fill-text: #6B4E00;

  /* Chip: atenção */
  --chip-warn-bg: #F6E4A5;
  --chip-warn-border: #967315;
  --chip-warn-text: #6B4E00;

  /* Chip: em dia */
  --chip-ok-bg: #DDEFE6;
  --chip-ok-border: #1F6F5C;
  --chip-ok-text: #14523F;

  /* Chip: irreversível */
  --chip-danger-bg: #F6DED8;
  --chip-danger-border: #A63D2F;
  --chip-danger-text: #7E2A1F;

  /* Chip: neutral / zero state */
  --chip-neutral-bg: #EDF2EF;
  --chip-neutral-border: #DCE5E0;
  --chip-neutral-text: #5A6B64;

  /* Semantic text — note: no red for ordinary negatives */
  --text-ok: #14523F;
  --text-danger: #7E2A1F;

  /* Categórica de gráficos — PRJ-DEC-007. Validada em TODOS os pares
     (critério da rosca), ΔE mín. 20,7. O resto usa cinza neutro:
     resto é resíduo, não identidade. */
  --chart-1: #0E8266;  /* teal 170° */
  --chart-2: #C77E22;  /* laranja 66° */
  --chart-3: #3D6FC2;  /* azul 260° */
  --chart-4: #68387C;  /* ameixa 315° */
  --chart-5: #516000;  /* oliva 120° */
  --chart-remainder: #869790;  /* 3.07:1 vs branco · ΔE 14.2 vs categóricas */
  --chart-grid: #E3EBE7;
  --chart-axis: #5A6B64;
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME
   Shipped as a system-preference default plus an explicit opt-in.
   Both blocks carry the same values; keep them in sync.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0F1A16;
    --surface: #16241F;
    --surface-sunk: #0F1A16;
    --ink: #E4EEE8;
    --muted: #93A69D;
    --border: #24352E;
    --border-strong: #537463;  /* 3.10:1 on surface — WCAG 1.4.11 */
    --primary: #3EA487;
    --primary-hover: #55B99C;
    --primary-on: #0F1A16;
    --track: #223129;
    --focus-ring: rgba(62, 164, 135, 0.32);
    --row-hover: #1B2E27;

    --attention-fill: #F2C24A;
    --attention-edge: #F2C24A;
    --attention-fill-text: #241B03;

    --chip-warn-bg: #3A2F10;
    --chip-warn-border: #F2C24A;
    --chip-warn-text: #F2C24A;

    --chip-ok-bg: #14342A;
    --chip-ok-border: #3EA487;
    --chip-ok-text: #86D6B8;

    --chip-danger-bg: #3A1D17;
    --chip-danger-border: #D07260;
    --chip-danger-text: #EFA795;

    --chip-neutral-bg: #1B2E27;
    --chip-neutral-border: #24352E;
    --chip-neutral-text: #93A69D;

    --text-ok: #86D6B8;
    --text-danger: #EFA795;

    /* Categórica de gráficos — PRJ-DEC-007, ΔE mín. 15,3 em todos os pares */
    --chart-1: #3D9D80;
    --chart-2: #B77114;
    --chart-3: #5588DD;
    --chart-4: #A274B7;
    --chart-5: #819249;
    --chart-remainder: #9FACA7;  /* 6.84:1 vs superfície · ΔE 12.4 */
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2393A69D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

    --chart-grid: #24352E;
    --chart-axis: #93A69D;
  }
}

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

  --bg: #0F1A16;
  --surface: #16241F;
  --surface-sunk: #0F1A16;
  --ink: #E4EEE8;
  --muted: #93A69D;
  --border: #24352E;
  --border-strong: #537463;  /* 3.10:1 on surface — WCAG 1.4.11 */
  --primary: #3EA487;
  --primary-hover: #55B99C;
  --primary-on: #0F1A16;
  --track: #223129;
  --focus-ring: rgba(62, 164, 135, 0.32);
  --row-hover: #1B2E27;

  --attention-fill: #F2C24A;
  --attention-edge: #F2C24A;
  --attention-fill-text: #241B03;

  --chip-warn-bg: #3A2F10;
  --chip-warn-border: #F2C24A;
  --chip-warn-text: #F2C24A;

  --chip-ok-bg: #14342A;
  --chip-ok-border: #3EA487;
  --chip-ok-text: #86D6B8;

  --chip-danger-bg: #3A1D17;
  --chip-danger-border: #D07260;
  --chip-danger-text: #EFA795;

  --chip-neutral-bg: #1B2E27;
  --chip-neutral-border: #24352E;
  --chip-neutral-text: #93A69D;

  --text-ok: #86D6B8;
  --text-danger: #EFA795;

  --chart-1: #3D9D80;
  --chart-2: #B77114;
  --chart-3: #5588DD;
  --chart-4: #A274B7;
  --chart-5: #819249;
  --chart-remainder: #9FACA7;  /* 6.84:1 vs superfície · ΔE 12.4 */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2393A69D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

  --chart-grid: #24352E;
  --chart-axis: #93A69D;
}