/* Tokens do Finance Hub redesenhado: o mundo "a pasta do cliente".
   Só variáveis: cores, tipo, espaço, raio, movimento, camadas.
   Fonte única: Sora (kit MF8). Valores derivados seguem o padrão dos
   documentos MF8 (texto #3f5068, apoio #5d6d84, filetes #e6ded3…).
   Cena: folhas off-white à luz da sala de reunião; a capa e a faixa
   permanente são o campo Oxford. Não há tema escuro: o Oxford já é a
   região comprometida do mundo. */

:root {
  color-scheme: light;

  /* ---- Kit MF8 (cores de marca) ---- */
  --oxford: #152f4d;
  --ocean: #1a3c69;
  --gold: #b4884c;
  --tan: #ceb590;
  --off-white: #f4ede4;
  --white: #ffffff;

  /* ---- Derivados (padrão dos documentos MF8) ---- */
  --ink-strong: var(--oxford);   /* títulos, números, rótulos de aba ativa */
  --ink: #3f5068;                /* corpo */
  --ink-soft: #5d6d84;           /* apoio, legendas longas */
  --ink-muted: #6b6559;          /* secundário, notas de fonte, 5,1:1 sobre o off-white (o #8b8477 do impresso dá 3,2:1 na tela) */
  --gold-text: #7d6437;          /* dourado em texto pequeno, 4,9:1 sobre o off-white (o #9b8055 dá 3,2:1) */
  --rule: #e6ded3;               /* filete entre blocos */
  --rule-soft: #f2ece3;          /* filete interno de tabela */
  --grid: #efe8de;               /* linhas de grade dos gráficos */
  --zero: #dcd3c6;               /* régua do zero */
  --neutral: #c7bfb2;            /* barras neutras, base de comparação */
  --alert: #a8543f;              /* só negativo ou crítico; custo que sobe */

  /* ---- Papéis por região ---- */
  --ground: var(--off-white);    /* o fundo da tela: a mesa */
  --paper: var(--white);         /* folhas e cartões: a superfície de leitura (v2, alto contraste) */
  --paper-raised: var(--white);  /* a etiqueta */
  --capa: var(--oxford);         /* capa da pasta e faixa permanente */
  --capa-ink: var(--off-white);
  --capa-ink-soft: rgba(244, 237, 228, 0.72); /* tinta secundária sobre Oxford: tingida da frente, nunca cinza */
  --capa-ink-faint: rgba(244, 237, 228, 0.16); /* símbolo cortado tom sobre tom */
  --capa-edge: var(--ocean);     /* separador dentro do campo Oxford */
  --estante: var(--ocean);       /* fundo da estante (átrio, cockpit) */
  --tab: var(--tan);             /* aba de divisória em repouso */
  --tab-ink: var(--oxford);
  --tab-hover: #d9c5a4;
  --tab-active: var(--oxford);   /* aba avançada */
  --tab-active-ink: var(--off-white);
  --tab-edge: #bfa57f;           /* filete da borda da aba */

  /* ---- Controles (etiquetas) ---- */
  --ctl-primary: var(--oxford);
  --ctl-primary-ink: var(--off-white);
  --ctl-primary-hover: var(--ocean);
  --ctl-secondary-ink: var(--oxford);
  --ctl-secondary-edge: var(--tan);
  --ctl-secondary-hover: #ede4d6;
  --ctl-disabled: #d9d2c6;
  --ctl-disabled-ink: #8b8477;
  --field: var(--white);
  --field-edge: var(--tan);
  --field-edge-focus: var(--oxford);
  --field-placeholder: #5d6d84;  /* 5,2:1 sobre branco */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold);
  --focus-ring-on-capa: 0 0 0 2px var(--capa), 0 0 0 4px var(--gold);

  /* ---- Gráficos (SVG à mão) ---- */
  --chart-primary: var(--oxford);   /* série do mês / principal */
  --chart-comparacao: #af8e60;      /* tan DE GRÁFICO: base de comparação, redução, saída; 3,06:1 sobre o branco (o --tan do kit dá 1,97:1 e fica para filete, aba e contorno) */
  --chart-neutro: #8e8678;          /* neutro DE GRÁFICO: fatia "demais", média tracejada; 3,6:1 sobre o branco (o --neutral dá 1,82:1) */
  --chart-secondary: var(--chart-comparacao); /* barra de comparação (mês anterior), nunca linha */
  --chart-tertiary: var(--ocean);
  --chart-series-2: #7d6437;        /* segunda série de linha: bronze tracejado, o único lugar em que a família do ouro codifica dado */
  --chart-series-3: #6a809e;        /* terceira série (barras de entrada nas Semanas): Ocean clareado sólido, 4,0:1; sempre com forma diferente */
  --chart-positive: var(--oxford);  /* direção, não veredito: sem verde */
  --chart-negative: var(--alert);
  --chart-fill: rgba(21, 47, 77, 0.08);
  --chart-grid: var(--grid);
  --chart-zero: var(--zero);
  --chart-marker: var(--gold);

  /* ---- Superfícies do navegador ---- */
  --selection-bg: var(--tan);
  --selection-ink: var(--oxford);
  --caret: var(--oxford);
  --scrollbar-thumb: var(--tan);
  --scrollbar-thumb-hover: var(--gold);
  --scrollbar-track: transparent;
  --underline-offset: 0.18em;
  --underline-thickness: 1px;

  /* ---- Tipo: Sora, escala fixa do kit (48/28/19/15/12) ---- */
  --font: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-12: 0.75rem;
  --fs-15: 0.9375rem;
  --fs-19: 1.1875rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;             /* número dos cartões e dos três números da vitrine (v2) */
  --fs-48: 3rem;
  --lh-12: 1.4;
  --lh-15: 1.55;
  --lh-19: 1.45;
  --lh-28: 1.2;
  --lh-32: 1.15;
  --lh-48: 1.05;
  --track-caps: 0.08em;      /* legendas e nomes de aba em caixa alta */
  --track-display: -0.02em;  /* número-manchete */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --measure: 68ch;           /* medida da prosa */
  --measure-table: 120ch;
  --numeric: "tnum" 1, "lnum" 1; /* toda célula numérica: dígitos tabulares */

  /* ---- Espaço (base 4) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --gutter: clamp(1rem, 3vw, 2.5rem);

  /* ---- Medidas da pasta ---- */
  --faixa-h: 56px;          /* faixa permanente no topo */
  --barra-h: 44px;          /* barra de grupos e subabas, colada sob a faixa (v2) */
  --cartao-pad: var(--s-5); /* cartão do painel */
  --cartao-min-h: 220px; /* 280 deixava ~130px de vazio no cartão sem gráfico e empurrava a 2ª fileira para fora do notebook */
  --painel-max: 88rem;      /* largura máxima do painel e das folhas */
  --capa-h: 40vh;           /* campo Oxford da capa no primeiro viewport */
  --capa-h-min: 280px;
  --aba-h: 44px;            /* altura de cada aba de divisória */
  --aba-w: 176px;           /* largura visível da aba (desktop) */
  --aba-top: 80px;          /* onde a cascata começa, abaixo da faixa */
  --aba-advance: 8px;       /* quanto a aba ativa avança */
  --tira-h: 56px;           /* tira inferior de abas no celular */
  --folha-max: 72rem;
  --etiqueta-w: 46%;
  --etiqueta-pad: var(--s-6);

  /* ---- Raios ---- */
  --radius-etiqueta: 18px;
  --radius-figure: 16px;
  --radius-control: 10px;
  --radius-field: 10px;
  --radius-aba: 8px;
  --radius-lombada: 6px;
  --radius-pill: 999px;

  /* ---- Sombra: só a etiqueta sobre a capa e a folha que desliza (com deslocamento e desfoque) ---- */
  --shadow-etiqueta: 0 12px 32px -16px rgba(21, 47, 77, 0.55), 0 2px 6px -2px rgba(21, 47, 77, 0.25);
  --shadow-folha: -12px 0 32px -20px rgba(21, 47, 77, 0.45);
  --shadow-lombada: 0 6px 16px -10px rgba(21, 47, 77, 0.6);
  --shadow-cartao: 0 1px 2px rgba(21, 47, 77, 0.06), 0 8px 24px -16px rgba(21, 47, 77, 0.18); /* cartão sobre a mesa (v2) */

  /* ---- Movimento: uma curva, três durações ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-state: 160ms;   /* hover, foco, aba que avança */
  --t-folha: 240ms;   /* a folha que desliza por cima da capa */
  --t-draw: 480ms;    /* linha de gráfico que se desenha uma vez */
  --lift: -2px;       /* lombada no hover */

  /* ---- Camadas ---- */
  --z-folha: 10;
  --z-abas: 20;
  --z-faixa: 30;
  --z-tira: 30;
  --z-overlay: 40;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-state: 0ms;
    --t-folha: 0ms;
    --t-draw: 0ms;
    --lift: 0px;
  }
}

@media (max-width: 1023px) {
  :root {
    --capa-h: 32vh;
    --capa-h-min: 220px;
    --etiqueta-w: 100%;
    --etiqueta-pad: var(--s-5);
  }
}