/*
 * Design tokens do Ponto (Q62) — custom properties, zero-build.
 * Direção visual (revisada 06/07/2026): moderna, minimal densa — PALETA CATPPUCCIN
 * (Latte no claro, Mocha no escuro; https://catppuccin.com — decisão do dono).
 * Acento = TEAL (escolha do dono; o Mauve foi testado e rejeitado no claro).
 * Hierarquia por tipografia/espaço, chrome quieto, UM acento.
 * Tema padrão segue o sistema via light-dark(); usuário pode forçar claro/escuro no
 * body[data-theme] do shell interno.
 * NÃO colocar regras de layout aqui — só tokens.
 *
 * ⚠️ Contraste: o Teal do Latte (#179299) NÃO passa AA como texto (3.4:1) — o
 * acento claro usa um teal ESCURECIDO (#0d7379, ~5:1), mantendo o hue; o próprio
 * Catppuccin prevê ajuste por acessibilidade. No Mocha o Teal puro (#94e2d5) passa
 * folgado (~11:1). Texto subtle: Subtext1/Subtext0 (~6:1 / ~7:1). Danger = Red.
 */

@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/InterVariable-884c49a1.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* Tipografia */
  --font-sans: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala de tamanhos — poucos passos, densa */
  --text-xs: 0.75rem;    /* 12px — legendas, metadados */
  --text-sm: 0.8125rem;  /* 13px — texto denso, labels */
  --text-base: 0.875rem; /* 14px — corpo padrão */
  --text-lg: 1rem;       /* 16px — destaques */
  --text-xl: 1.25rem;    /* 20px — títulos de seção */
  --text-2xl: 1.75rem;   /* 28px — título de página */

  --leading: 1.5;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Espaçamento — escala curta (base 4px) */
  --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-8: 3rem;     /* 48px */

  /* Raio — cantos discretos */
  --radius: 6px;
  --radius-sm: 4px;

  /*
   * Cores SEMÂNTICAS — Catppuccin Latte → Mocha.
   * Latte: Base #eff1f5 · Mantle #e6e9ef · Crust #dce0e8 · Surface0 #ccd0da ·
   *        Surface2 #acb0be · Text #4c4f69 · Subtext1 #5c5f77
   * Mocha: Base #1e1e2e · Mantle #181825 · Crust #11111b · Surface0 #313244 ·
   *        Surface1 #45475a · Text #cdd6f4 · Subtext0 #a6adc8
   */
  --color-surface: light-dark(#eff1f5, #1e1e2e);          /* fundo base (Base) */
  --color-surface-sunken: light-dark(#e6e9ef, #181825);   /* recuado: sidebar, listras (Mantle) */
  --color-surface-deep: light-dark(#dce0e8, #11111b);     /* mais fundo: chips, wells (Crust) */
  --color-surface-raised: light-dark(#ffffff, #313244);   /* painéis/menus elevados */
  --color-text: light-dark(#4c4f69, #cdd6f4);             /* texto principal (~7.4:1 / ~11:1) */
  --color-text-subtle: light-dark(#5c5f77, #a6adc8);      /* secundário (~6:1 / ~7:1, AA) */
  --color-border: light-dark(#ccd0da, #313244);           /* divisórias sutis (Surface0) */
  --color-border-strong: light-dark(#acb0be, #45475a);    /* borda de campo/hover */
  --color-accent: light-dark(#0d7379, #94e2d5);           /* TEAL — o único acento (AA) */
  --color-accent-hover: light-dark(#0a5d62, #a9e9de);     /* hover do acento */
  --color-on-accent: light-dark(#ffffff, #11111b);        /* texto sobre o acento */
  --color-danger: light-dark(#d20f39, #f38ba8);           /* Red do Catppuccin (AA) */
  --color-weekend: light-dark(#fe640b, #fab387);          /* Peach — barras de sáb/dom no report (pedido 07/07) */
  --color-on-danger: light-dark(#ffffff, #11111b);

  /* Anel de foco (acento translúcido) */
  --focus-ring: 0 0 0 3px light-dark(rgba(13, 115, 121, 0.30), rgba(148, 226, 213, 0.35));
}

body[data-theme="light"] {
  color-scheme: light;
}

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

/* ── Seletores de acento por usuário ─────────────────────────────────────
   Lógica: claro = hue Catppuccin escurecido para contraste AA sobre Base do Latte
           escuro = acento Mocha puro (já atende AA sobre Surface0 do Mocha)
   O --color-on-accent não muda: branco (claro) / Crust (escuro) passam AA em todos.
   teal é o default definido no :root — não precisa de bloco aqui.
   ──────────────────────────────────────────────────────────────────────── */

body[data-accent="mauve"] {
  --color-accent:       light-dark(#8839ef, #cba6f7);
  --color-accent-hover: light-dark(#7326d3, #d7bbf9);
  --focus-ring:         0 0 0 3px light-dark(rgba(136,57,239,.28), rgba(203,166,247,.35));
}
body[data-accent="blue"] {
  --color-accent:       light-dark(#1a5ce0, #89b4fa);
  --color-accent-hover: light-dark(#1550c4, #a3c5fb);
  --focus-ring:         0 0 0 3px light-dark(rgba(26,92,224,.28), rgba(137,180,250,.35));
}
body[data-accent="green"] {
  --color-accent:       light-dark(#2b7222, #a6e3a1);
  --color-accent-hover: light-dark(#235e1c, #b8eab4);
  --focus-ring:         0 0 0 3px light-dark(rgba(43,114,34,.28), rgba(166,227,161,.35));
}
body[data-accent="peach"] {
  --color-accent:       light-dark(#b34700, #fab387);
  --color-accent-hover: light-dark(#9a3d00, #fbc19e);
  --focus-ring:         0 0 0 3px light-dark(rgba(179,71,0,.30), rgba(250,179,135,.35));
}
body[data-accent="pink"] {
  --color-accent:       light-dark(#b8368f, #f5c2e7);
  --color-accent-hover: light-dark(#9c2d79, #f8d3ee);
  --focus-ring:         0 0 0 3px light-dark(rgba(184,54,143,.28), rgba(245,194,231,.35));
}