/*
  Design tokens do Meta App.

  Três camadas, da mais crua para a mais específica:
  1. Primitivas: rampas de cor em OKLCH (matiz constante por rampa), escalas de texto, espaço, raio e tempo.
  2. Papéis: o que cada cor faz na interface (fundo, superfície, texto, borda, destaque). O tema escuro só troca esta camada.
  3. Famílias: meta, gasto, recuperação e info. Cada uma tem cor sólida (barras, ícones), suave (fundos) e tinta (texto).

  Os componentes em app.css usam apenas papéis e famílias, nunca uma primitiva ou um valor solto.
  Todos os pares texto/fundo abaixo foram conferidos em 4,5:1 ou mais (WCAG AA) nos dois temas.
*/

:root {
  /* ---------- 1. Primitivas ---------- */

  /* Neutros levemente esverdeados (matiz 125–155), para conversar com o lime da marca. */
  --n-0: oklch(1 0 0);
  --n-50: oklch(0.985 0.004 125);
  --n-100: oklch(0.972 0.005 125);
  --n-150: oklch(0.945 0.007 125);
  --n-200: oklch(0.915 0.009 130);
  --n-300: oklch(0.86 0.011 132);
  --n-400: oklch(0.7 0.014 138);
  --n-500: oklch(0.5 0.018 140);
  --n-600: oklch(0.4 0.016 145);
  --n-700: oklch(0.29 0.012 152);
  --n-800: oklch(0.235 0.012 155);
  --n-850: oklch(0.205 0.01 155);
  --n-900: oklch(0.165 0.008 155);
  --n-950: oklch(0.14 0.008 155);
  --ink: oklch(0.225 0.012 155);

  /* Lime: a cor da marca. */
  --lime-100: oklch(0.955 0.055 128);
  --lime-300: oklch(0.91 0.19 128);
  --lime-400: oklch(0.87 0.2 129);
  --lime-500: oklch(0.76 0.19 132);
  --lime-700: oklch(0.45 0.125 136);
  --lime-900: oklch(0.27 0.07 135);

  /* Coral (gastos), âmbar (recuperações) e azul (informação). */
  --coral-100: oklch(0.955 0.022 25);
  --coral-500: oklch(0.68 0.17 25);
  --coral-700: oklch(0.5 0.165 27);
  --amber-100: oklch(0.96 0.055 95);
  --amber-500: oklch(0.83 0.15 88);
  --amber-700: oklch(0.47 0.095 80);
  --blue-100: oklch(0.955 0.02 262);
  --blue-500: oklch(0.7 0.13 262);
  --blue-700: oklch(0.47 0.15 262);

  /* Texto: 7 tamanhos, nunca abaixo de 12px. */
  --fs-xs: 0.75rem;   /* 12 · legendas e rótulos */
  --fs-sm: 0.875rem;  /* 14 · texto de interface */
  --fs-md: 1rem;      /* 16 · leitura e campos */
  --fs-lg: 1.25rem;   /* 20 · títulos de seção */
  --fs-xl: 1.5rem;    /* 24 · valores */
  --fs-2xl: 2rem;     /* 32 · título de página */
  --fs-3xl: 3rem;     /* 48 · número em destaque */
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-display: Manrope, 'DM Sans', system-ui, sans-serif;
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.5;

  /* Espaço em múltiplos de 4. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Três raios. Em elementos aninhados: raio de fora = raio de dentro + respiro entre eles. */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 999px;

  /* Três durações e duas curvas. */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-swap: cubic-bezier(0.2, 0, 0, 1);

  /* Área mínima de toque: 40px com mouse, 44px em telas de toque (ver app.css). */
  --hit: 40px;

  /* ---------- 2. Papéis (tema claro) ---------- */
  color-scheme: light;
  --bg: var(--n-100);
  --surface: var(--n-0);
  --surface-2: var(--n-50);
  --sunken: var(--n-150);
  --text: var(--ink);
  --text-2: var(--n-600);
  --text-muted: var(--n-500);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --accent: var(--lime-300);
  --accent-hover: var(--lime-400);
  --accent-ink: var(--lime-900);
  --accent-text: var(--lime-700);
  --focus: oklch(0.6 0.17 134);
  --overlay: oklch(0.15 0.02 150 / 0.55);

  /* A barra lateral e o painel de saldo são escuros nos dois temas: é a assinatura visual da marca. */
  --side-bg: oklch(0.215 0.012 155);
  --side-raised: oklch(0.27 0.014 155);
  --side-border: oklch(0.3 0.014 155);
  --side-text: oklch(0.96 0.006 130);
  --side-text-2: oklch(0.78 0.012 140);
  --side-muted: oklch(0.68 0.014 140);

  /* Três níveis de sombra, em camadas transparentes: funcionam sobre qualquer fundo e dispensam borda sólida. */
  --shadow-1: 0 0 0 1px oklch(0.2 0.02 150 / 0.07), 0 1px 2px oklch(0.2 0.02 150 / 0.04);
  --shadow-2: 0 0 0 1px oklch(0.2 0.02 150 / 0.07), 0 2px 4px oklch(0.2 0.02 150 / 0.04), 0 8px 20px oklch(0.2 0.02 150 / 0.06);
  --shadow-3: 0 0 0 1px oklch(0.2 0.02 150 / 0.08), 0 8px 16px oklch(0.2 0.02 150 / 0.08), 0 24px 64px oklch(0.2 0.02 150 / 0.16);

  /* ---------- 3. Famílias ---------- */
  --meta-solid: var(--lime-500);
  --meta-soft: var(--lime-100);
  --meta-ink: oklch(0.42 0.115 136);
  --gasto-solid: var(--coral-500);
  --gasto-soft: var(--coral-100);
  --gasto-ink: var(--coral-700);
  --gasto-track: oklch(0.9 0.045 25);
  --rec-solid: var(--amber-500);
  --rec-soft: var(--amber-100);
  --rec-ink: var(--amber-700);
  --info-solid: var(--blue-500);
  --info-soft: var(--blue-100);
  --info-ink: var(--blue-700);
}

/* O tema é resolvido por theme-init.js antes da primeira pintura: "system" vira light ou dark aqui. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: var(--n-900);
  --surface: var(--n-850);
  --surface-2: var(--n-800);
  --sunken: var(--n-950);
  --text: oklch(0.95 0.006 130);
  --text-2: oklch(0.83 0.01 135);
  --text-muted: var(--n-400);
  --border: var(--n-700);
  --border-strong: oklch(0.36 0.014 150);
  --accent-text: oklch(0.88 0.17 128);
  --focus: var(--lime-300);
  --overlay: oklch(0.08 0.01 150 / 0.7);

  --side-bg: var(--n-950);
  --side-raised: oklch(0.21 0.012 155);
  --side-border: oklch(0.25 0.012 155);

  --shadow-1: 0 0 0 1px oklch(1 0 0 / 0.07);
  --shadow-2: 0 0 0 1px oklch(1 0 0 / 0.08), 0 8px 20px oklch(0 0 0 / 0.3);
  --shadow-3: 0 0 0 1px oklch(1 0 0 / 0.1), 0 24px 64px oklch(0 0 0 / 0.55);

  --meta-solid: oklch(0.8 0.19 131);
  --meta-soft: oklch(0.3 0.06 135);
  --meta-ink: oklch(0.88 0.16 128);
  --gasto-solid: oklch(0.7 0.17 25);
  --gasto-soft: oklch(0.3 0.06 25);
  --gasto-ink: oklch(0.82 0.1 25);
  --gasto-track: oklch(0.36 0.075 25);
  --rec-solid: oklch(0.84 0.15 88);
  --rec-soft: oklch(0.31 0.055 85);
  --rec-ink: oklch(0.87 0.13 90);
  --info-solid: oklch(0.72 0.13 262);
  --info-soft: oklch(0.3 0.06 262);
  --info-ink: oklch(0.82 0.09 262);
}

/* Cada família expõe as mesmas três variáveis locais, para um componente servir a todas. */
.meta { --fam-solid: var(--meta-solid); --fam-soft: var(--meta-soft); --fam-ink: var(--meta-ink); }
.gasto { --fam-solid: var(--gasto-solid); --fam-soft: var(--gasto-soft); --fam-ink: var(--gasto-ink); }
.rec { --fam-solid: var(--rec-solid); --fam-soft: var(--rec-soft); --fam-ink: var(--rec-ink); }
.info { --fam-solid: var(--info-solid); --fam-soft: var(--info-soft); --fam-ink: var(--info-ink); }