/*
  Design system - Max Finance V2
  Paleta extraida da logo (azul), escala de neutros propria para profundidade
  sem depender de preto/branco puro, espacamento em grid de 8px, tipografia
  com escala limitada (6 tamanhos), raio e sombra consistentes, motion 150-200ms.
  Suporta tema claro/escuro via prefers-color-scheme + toggle manual (data-theme).
*/
:root {
  /* marca */
  --brand-900: #002c5c;
  --brand-700: #004899;
  --brand-500: #0093d3;
  --brand-300: #00b6ed;
  --brand-100: #dff3fb;
  --brand-ink: var(--brand-700); /* cor de texto sobre fundo tintado (brand-100) - ajustada por tema */

  /* semanticas */
  --success-600: #1a7f4e;
  --success-100: #e3f5ec;
  --danger-600: #b3261e;
  --danger-100: #fbe9e7;
  --warning-600: #9a6300;
  --warning-100: #fff3d6;

  /* neutros - tema claro */
  --n-0: #ffffff;
  --n-50: #f7f8fa;
  --n-100: #eef1f4;
  --n-200: #e2e6eb;
  --n-300: #cdd3da;
  --n-400: #a7afb9;
  --n-500: #7c8896;
  --n-600: #57626e;
  --n-700: #3b444e;
  --n-800: #242a30;
  --n-900: #14181c;

  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-raised: var(--n-0);
  --surface-sunken: var(--n-100);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text: var(--n-800);
  --text-secondary: var(--n-600);
  --text-tertiary: var(--n-500);
  --text-on-brand: #ffffff;

  --shadow-sm: 0 1px 2px rgba(20, 24, 28, 0.06);
  --shadow-md: 0 6px 20px rgba(20, 24, 28, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 24, 28, 0.12);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  --font-ui: -apple-system, "Segoe UI", Inter, Arial, sans-serif;
  --font-display: Georgia, "Iowan Old Style", serif;

  --text-xs: 12px; --text-sm: 13.5px; --text-base: 15px; --text-lg: 18px;
  --text-xl: 24px; --text-2xl: 34px; --text-3xl: 48px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181c; --surface: #1b2025; --surface-raised: #212832; --surface-sunken: #10141a;
    --border: #2b323b; --border-strong: #3a434e;
    --text: #eef1f4; --text-secondary: #b3bcc6; --text-tertiary: #7c8896;
    --brand-100: #0b2c40; --brand-ink: #6cd2ff;
    --success-100: #123425; --danger-100: #3a1815; --warning-100: #3a2c05;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] {
  --bg: #14181c; --surface: #1b2025; --surface-raised: #212832; --surface-sunken: #10141a;
  --border: #2b323b; --border-strong: #3a434e;
  --text: #eef1f4; --text-secondary: #b3bcc6; --text-tertiary: #7c8896;
  --brand-100: #0b2c40; --brand-ink: #6cd2ff;
  --success-100: #123425; --danger-100: #3a1815; --warning-100: #3a2c05;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
}
:root[data-theme="light"] {
  --bg: var(--n-50); --surface: var(--n-0); --surface-raised: var(--n-0); --surface-sunken: var(--n-100);
  --border: var(--n-200); --border-strong: var(--n-300);
  --text: var(--n-800); --text-secondary: var(--n-600); --text-tertiary: var(--n-500);
  --brand-100: #dff3fb; --brand-ink: var(--brand-700);
  --success-100: #e3f5ec; --danger-100: #fbe9e7; --warning-100: #fff3d6;
}