/* Dialeto visual do caixa Warehouse: set completo copiado do index.html do caixa.
   Ops é dark-first: o dark mora no :root, o light é o override. */
:root {
  color-scheme: dark;

  --bg: #0c0c0e;
  --bg-2: #121215;
  --surface: #17171a;
  --surface-2: #1c1c20;
  --surface-3: #232328;
  --surface-inset: #131316;

  --ink: #f5f4f2;
  --ink-2: #d7d5d1;
  --muted: #9b9995;
  --muted-2: #8c8a86;
  --line: #2a292d;
  --line-2: #3b393e;

  /* ── estado: três tons, e só ──
     late = venceu · due = em aberto · cash = entrou.
     future e cost não exigem decisão, então não gastam matiz: viram neutro
     com peso tipográfico. O -bg e o -glow morreram: a cor vive no ponto e
     no número, nunca na superfície. */

  --cash: #3ed99b;
  --cash-2: var(--cash);
  --cash-line: color-mix(in srgb, var(--cash) 34%, var(--line));
  --cash-bg: transparent;
  --cash-glow: color-mix(in srgb, var(--cash) 22%, transparent);

  --due: #f0b445;
  --due-2: var(--due);
  --due-line: color-mix(in srgb, var(--due) 34%, var(--line));
  --due-bg: transparent;
  --due-glow: color-mix(in srgb, var(--due) 22%, transparent);

  --late: #ff4d62;
  --late-2: var(--late);
  --late-line: color-mix(in srgb, var(--late) 34%, var(--line));
  --late-bg: transparent;
  --late-glow: color-mix(in srgb, var(--late) 22%, transparent);

  /* neutros disfarçados de estado: existem só para as regras antigas não
     ficarem órfãs. Nenhum deles pinta nada. */
  --future: var(--muted);
  --future-2: var(--ink-2);
  --future-line: var(--line);
  --future-bg: transparent;
  --future-glow: transparent;

  --cost: var(--muted);
  --cost-2: var(--ink-2);
  --cost-line: var(--line);
  --cost-bg: transparent;
  --cost-glow: transparent;

  --brand: #ff5426;
  --brand-ink: #ff6a41;
  --brand-2: #ff8a63;
  --brand-bg: transparent;
  --brand-line: #522213;
  --brand-glow: color-mix(in srgb, var(--brand) 24%, transparent);

  --hero-bg: #141416;
  --hero-ink: #ffffff;
  --hero-muted: rgba(255, 255, 255, 0.55);
  --hero-line: rgba(255, 255, 255, 0.1);
  --hero-inset: rgba(255, 255, 255, 0.06);

  /* Aliases da escala antiga de sombra: dois níveis reais, --e1 e --e2. */
  --shadow-xs: var(--e1);
  --shadow-sm: var(--e1);
  --shadow-md: var(--e1);
  --shadow-lg: var(--e2);
  --ring: rgba(255, 84, 38, 0.38);

  /* ── raio: três valores, cada um com dono, e o dono não empresta ──
     bloco (card, sheet, hero, portal) · controle (input, botão, avatar) ·
     pill (chip, badge, dot, barra fina). Aninhamento: raio do filho é o raio
     do pai menos o padding entre eles. */
  --r-block: 16px;
  --r-ctl: 10px;
  --r-pill: 999px;

  /* Aliases da escala antiga. Existem para que nenhuma regra fique órfã;
     todas apontam para os três valores acima. */
  --r-xl: var(--r-block);
  --r-lg: var(--r-block);
  --r-md: var(--r-block);
  --r-sm: var(--r-ctl);
  --r-xs: var(--r-pill);

  /* ── espaço: ritmo de 4pt, escala única, nenhum valor solto ──
     Grupo apertado, separação generosa: mesma ideia usa --s1, ideias
     diferentes saltam dois degraus, nunca um. */
  --s0: 4px;
  --s1: 8px;
  --s2: 12px;
  --s3: 20px;
  --s4: 32px;
  --s5: 56px;
  --s6: 88px;

  /* ── tipografia: cinco degraus, nenhum tamanho solto ── */
  --t-display: clamp(2.25rem, 4.2vw, 3.5rem);
  --t-title: clamp(1.5rem, 2.4vw, 2rem);
  --t-head: clamp(1.05rem, 1.5vw, 1.5rem);
  --t-body: 14px;
  --t-cap: 10.5px;

  /* ── motion: duas curvas com papel, cinco degraus de duração ──
     A escala antiga tinha três degraus e o shell usava trinta e três
     durações soltas. Não faltava disciplina, faltava degrau: sem um
     valor para "toque" e outro para "entrada autoral", cada peça
     inventava o seu. Sair é sempre mais rápido que entrar.

     --ease-move: deslocamento contido entre dois pontos conhecidos.
                  Hover, cor, borda, seleção. É a curva de trabalho.
     --ease-out:  chegada confiante, desaceleração exponencial.
                  Entrada, camada, abertura. É a curva de evento. */
  --ease-move: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: var(--ease-move);
  --spring: var(--ease-out);

  --t-tap: 90ms; /* o dedo saiu: press, cor de ícone, check */
  --t-fast: 150ms; /* estado de controle: hover, borda, chip */
  --t-base: 240ms; /* troca de estado com deslocamento */
  --t-slow: 380ms; /* camada: sheet, view, overlay */
  --t-enter: 560ms; /* entrada autoral: herói, placa, portal */

  /* ── vidro: só onde há conteúdo real atrás ──
     Véu é a barra que cobre conteúdo rolando; scrim é a camada sobre a
     tela inteira. O terceiro valor é o repouso: no topo da página não
     existe nada atrás da topbar, então ali o vidro é zero. */
  --blur-rest: 0px;
  --blur-veil: 20px;
  --blur-scrim: 8px;

  /* ── elevação: borda OU sombra, nunca as duas ── */
  /* Escada de sombra do escuro. No dark uma sombra sozinha nao eleva nada:
     o preto sobre preto some. Quem desenha a borda superior do objeto e o
     realce interno de 1px, e as duas camadas largas dao o assentamento.
     Realce + contato + assentamento, nesta ordem. */
  --e1:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 10px 24px -14px rgba(0, 0, 0, 0.55);
  --e2:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 28px 64px -22px rgba(0, 0, 0, 0.7);
  /* ── tipografia oficial: SF Pro pela stack do sistema ──
     Em Apple, `-apple-system` já entrega SF Pro e troca sozinho entre os
     cortes ópticos Text e Display conforme o tamanho. Por isso ele vem
     primeiro e por isso não servimos webfont: a licença da Apple não
     permite servir SF na web, e baixar o arquivo daria megabytes para
     repetir o que o sistema entrega de graça.
     "SF Pro" é a família variável unificada e cobre quem tem a fonte
     instalada fora do Safari; ela precisa vir antes de "SF Pro Text",
     senão o herói de 68px renderiza no corte de texto miúdo. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  /* Stack de número: a mesma do texto. Ela já foi mono, para alinhar a coluna
     de dinheiro, e o preço foi a tela partida em duas tipografias: o herói do
     caixa saía em SF Pro e o do gráfico, a um palmo dali, em SF Mono. Quem
     alinha agora é `font-variant-numeric: tabular-nums`, que SF Pro entrega de
     graça e que todo lugar que usa este token já declara. O token continua
     existindo porque nomeia a intenção, e é por ele que se troca de ideia. */
  --num: var(--sans);

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-heavy: 800;

  --type-display: clamp(2.75rem, 5.6vw, 4.75rem);
  --type-hero: clamp(2.5rem, 4.8vw, 4rem);
  --type-title: clamp(2.25rem, 4vw, 3.5rem);
  --type-card: clamp(1.7rem, 2.4vw, 2.25rem);

  --header-h: 56px;
  --dock-h: 62px;
  --col: 1180px;
  /* O amplo tinha --col-wide em duas media queries e em lugar nenhum na
     escala: a declaracao caia invalida e a .phone ficava sem teto, esticando
     de borda a borda em tela grande. */
  --col-wide: 1320px;

  /* estrutura do Ops */
  --gap: 10px;
  --portal-min: 88px;
  --pad-x: 16px;
  --track: 0.13em;
  --fog: linear-gradient(90deg, #000 0%, #000 82%, rgba(0, 0, 0, 0.28) 100%);
  --fog-back: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, #000 20%);
  --dur: var(--t-base);
}

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

  --bg: #f5f5f7;
  --bg-2: #eeeef1;
  --surface: #ffffff;
  --surface-2: #fafafb;
  --surface-3: #f2f2f5;
  --surface-inset: #f7f7f9;

  --ink: #0b0b0c;
  --ink-2: #33333a;
  --muted: #585860;
  --muted-2: #6b6b74;
  --line: #e7e7eb;
  --line-2: #d9d9df;

  --cash: #0c7350;
  --cash-bg: transparent;
  --cash-line: color-mix(in srgb, var(--cash) 34%, var(--line));
  --cash-glow: color-mix(in srgb, var(--cash) 22%, transparent);

  --due: #92620a;
  --due-bg: transparent;
  --due-line: color-mix(in srgb, var(--due) 34%, var(--line));
  --due-glow: color-mix(in srgb, var(--due) 22%, transparent);

  --late: #8e1528;
  --late-bg: transparent;
  --late-line: color-mix(in srgb, var(--late) 34%, var(--line));
  --late-glow: color-mix(in srgb, var(--late) 22%, transparent);

  --future: var(--muted);
  --future-bg: transparent;
  --future-line: var(--line);
  --future-glow: transparent;

  --brand: #ff3b00;
  --brand-ink: #c42c00;
  --brand-2: #ff6a3d;
  --brand-bg: transparent;
  --brand-line: color-mix(in srgb, var(--brand) 30%, var(--line));
  --brand-glow: color-mix(in srgb, var(--brand) 20%, transparent);

  --hero-bg: #0b0b0c;
  --hero-ink: #ffffff;
  --hero-muted: rgba(255, 255, 255, 0.52);
  --hero-line: rgba(255, 255, 255, 0.12);
  --hero-inset: rgba(255, 255, 255, 0.07);

  /* No claro o realce interno inverte: vira uma linha branca no topo que ja
     existe no papel, entao ele sai e sobra a sombra, que ali funciona. */
  --e1: 0 1px 2px rgba(9, 9, 11, 0.05), 0 8px 24px -12px rgba(9, 9, 11, 0.12);
  --e2: 0 24px 64px -20px rgba(9, 9, 11, 0.22);
}