/* ==========================================================================
   UM_digital — tokens do design system v1.1.0
   Valores extraídos de um-digital-style-guide.pdf. Não usar hex solto no
   restante do CSS: só variáveis daqui.

   Os tokens de série (--series-*) e a rampa de aging (--ramp-*) não vêm do
   style guide — a marca não define paleta de dados. Foram derivados dos hues
   de marca e validados com o validador de paleta do método de dataviz
   (banda de lightness, piso de croma, separação CVD protan/deutan, piso de
   visão normal e contraste contra a superfície) nos dois modos. Ver
   METODOLOGIA.md § Paleta de dados antes de trocar qualquer um deles.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- marca: primárias --- */
  --color-purple: #6f5091;
  --color-lime: #e3e935;
  --color-white: #ffffff;

  /* --- marca: secundárias análogas --- */
  --color-aqua: #1da193;
  --color-orange: #f58c2c;
  --color-mint: #2df5a5;
  --gradient-brand: linear-gradient(135deg, #1da193, #f58c2c);

  /* --- variantes de UI --- */
  --color-purple-dark: #5a3f78;
  --color-purple-deep: #493263;
  --color-purple-light: #8b6bad;
  --color-lime-hover: #d4da20;
  --color-lime-dark: #c8ce1e;
  --color-aqua-hover: #178b7f;
  --color-aqua-dark: #13746a;
  --color-orange-hover: #e37d1f;
  --color-orange-dark: #c96a15;

  /* --- neutros --- */
  --color-black: #000000;
  --color-gray-dark: #545454;
  --color-gray-mid: #a8a8a8;
  --color-dark: #1a1129;
  --color-dark-lighter: #2a1f3d;
  --color-cream: #f7f5f2;

  /* --- superfícies do produto --- */
  --surface-page: var(--color-cream);
  --surface-card: var(--color-white);
  --surface-sunken: #f1eee9;
  --surface-hover: #faf9f7;

  /* --- texto --- */
  --color-text-primary: #1a1129;
  --color-text-secondary: #4a4358;
  --color-text-muted: #71697e;
  --color-text-inverse: #ffffff;
  --color-text-lime: #e3e935;

  /* --- bordas --- */
  --color-border-light: #e8e5e0;
  --color-border-purple: #6f5091;
  --color-border-lime: #e3e935;
  --color-border-subtle: rgba(26, 17, 41, 0.1);

  /* --- semânticas (feedback de estado) --- */
  --color-error: #e53e3e;
  --color-success: #22c55e;
  --color-danger: #ef4444;

  /* estados em texto — steps escurecidos para passar contraste em fundo claro
     (>= 4.5:1 medido: 5.02 / 5.09 / 5.88) */
  --state-good: #15803d;
  --state-warn: #a85a00;
  --state-bad: #c0272d;
  --state-good-soft: #e8f6ed;
  --state-warn-soft: #fdf1e3;
  --state-bad-soft: #fdeceb;

  /* --- séries de dados (validadas para superfície clara #ffffff) --- */
  --series-in: #1da193;      /* entrada / receita  — contraste 3.20:1 */
  --series-out: #d67000;     /* saída / despesa    — contraste 3.41:1 */
  --series-balance: #6f5091; /* saldo / resultado  — contraste 6.50:1 */
  --series-neutral: #a8a8a8;

  /* rampa ordinal de aging (mais claro = mais novo) — hue do purple de marca,
     ΔL 0.07 por passo, ponta clara 2.56:1 */
  --ramp-1: #b494da;
  --ramp-2: #9e7ec3;
  --ramp-3: #8969ad;
  --ramp-4: #745597;
  --ramp-5: #604181;

  /* --- cromo do gráfico --- */
  --chart-grid: rgba(26, 17, 41, 0.08);
  --chart-axis: rgba(26, 17, 41, 0.28);
  --chart-zero: rgba(26, 17, 41, 0.45);
  --chart-surface: var(--surface-card);
  --chart-today: var(--color-purple);

  /* --- tipografia --- */
  --font-display: "Industry", "Arial Black", "Titillium Web", system-ui, sans-serif;
  --font-body: "Titillium Web", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  --text-hero: 4rem;
  --text-section: 2.5rem;
  --text-card-title: 1.5rem;
  --text-ui: 1.25rem;
  --text-body: 1.125rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  /* --- espaçamento e raio --- */
  --spacing-section-y: 6rem;
  --spacing-section-y-mobile: 4rem;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* --- sombras (difusas, sem offset) --- */
  --shadow-sm: rgba(0, 0, 0, 0.15) 0 0 12px 0;
  --shadow-md: rgba(0, 0, 0, 0.25) 0 0 12px 0;
  --shadow-lg: rgba(0, 0, 0, 0.15) 0 0 24px 0;
}

/* ==========================================================================
   Modo escuro. Steps próprios — não é inversão automática: as séries foram
   re-escalonadas para a banda de lightness escura e revalidadas contra a
   superfície do card (#2a1f3d).
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --surface-page: #140e1f;
    --surface-card: #2a1f3d;
    --surface-sunken: #1f1730;
    --surface-hover: #33264a;

    --color-text-primary: #ffffff;
    --color-text-secondary: #c9c2d6;
    --color-text-muted: #9a92a8;
    --color-text-inverse: #1a1129;

    --color-border-light: rgba(255, 255, 255, 0.11);
    --color-border-subtle: rgba(255, 255, 255, 0.08);

    --state-good: #4ade80;
    --state-warn: #fbbf24;
    --state-bad: #f87171;
    --state-good-soft: rgba(74, 222, 128, 0.14);
    --state-warn-soft: rgba(251, 191, 36, 0.14);
    --state-bad-soft: rgba(248, 113, 113, 0.14);

    --series-in: #23a496;      /* 5.01:1 no card */
    --series-out: #d67000;     /* 4.54:1 */
    --series-balance: #9e7ec3; /* 4.57:1 */
    --series-neutral: #7d7489;

    --ramp-1: #715293;
    --ramp-2: #8666a9;
    --ramp-3: #9b7bc0;
    --ramp-4: #b190d7;
    --ramp-5: #c7a6ee;

    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-axis: rgba(255, 255, 255, 0.3);
    --chart-zero: rgba(255, 255, 255, 0.45);
    --chart-today: var(--color-lime);
  }
}

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

  --surface-page: #140e1f;
  --surface-card: #2a1f3d;
  --surface-sunken: #1f1730;
  --surface-hover: #33264a;

  --color-text-primary: #ffffff;
  --color-text-secondary: #c9c2d6;
  --color-text-muted: #9a92a8;
  --color-text-inverse: #1a1129;

  --color-border-light: rgba(255, 255, 255, 0.11);
  --color-border-subtle: rgba(255, 255, 255, 0.08);

  --state-good: #4ade80;
  --state-warn: #fbbf24;
  --state-bad: #f87171;
  --state-good-soft: rgba(74, 222, 128, 0.14);
  --state-warn-soft: rgba(251, 191, 36, 0.14);
  --state-bad-soft: rgba(248, 113, 113, 0.14);

  --series-in: #23a496;
  --series-out: #d67000;
  --series-balance: #9e7ec3;
  --series-neutral: #7d7489;

  --ramp-1: #715293;
  --ramp-2: #8666a9;
  --ramp-3: #9b7bc0;
  --ramp-4: #b190d7;
  --ramp-5: #c7a6ee;

  --chart-grid: rgba(255, 255, 255, 0.08);
  --chart-axis: rgba(255, 255, 255, 0.3);
  --chart-zero: rgba(255, 255, 255, 0.45);
  --chart-today: var(--color-lime);
}