/* Tokens SDKOnze · Lacerda District — reutilizável em outros projetos.
   Fontes das regras:
   - Identidade SDKOnze: preto #080808, vermelho #E50914, branco, grafite #292929, Inter.
     Aço #8A8A8A e vermelho de texto #FF4D55 são cores da implementação, ainda a confirmar.
   - Pirâmide (decisão de 24/10/2026): imagens > cores (brilhante > quente > fria > P&B)
     > texto grande > texto pequeno > detalhes. O fundo é a base e nunca disputa atenção.
     Um só brilho por vez. Sem cor fria.
   - Apple HIG, Materials e Adopting Liquid Glass: o vidro fica na camada de controles e
     navegação, nunca no conteúdo; uso com parcimônia; variante regular onde há texto;
     cantos concêntricos; botão proeminente só na ação principal; respeitar reduzir
     transparência, aumentar contraste e reduzir movimento. */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Marca */
  --sdk-black: #080808;
  --sdk-graphite: #292929;
  --sdk-steel: #8a8a8a;
  --sdk-red: #e50914;
  --sdk-red-text: #ff4d55;
  --sdk-white: #ffffff;

  /* Camadas. Fundo = base da pirâmide; superfície = camada de conteúdo (material padrão, sem vidro) */
  --bg: var(--sdk-black);
  --surface: #121212;
  --surface-raised: #181818;
  --fill: rgba(255, 255, 255, 0.07);
  --fill-hover: rgba(255, 255, 255, 0.13);
  --hairline: rgba(255, 255, 255, 0.11);

  /* Níveis de rótulo (equivalentes às vibrâncias label/secondary/tertiary da Apple).
     O quaternário não é usado sobre vidro: contraste baixo demais. */
  --label: #ffffff;
  --label-2: rgba(255, 255, 255, 0.74);
  --label-3: rgba(255, 255, 255, 0.56);

  /* Vidro: camada funcional (barra e painel de controles) */
  --glass-bg: rgba(22, 22, 22, 0.58);
  --glass-blur: blur(26px) saturate(165%);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 10px 36px rgba(0, 0, 0, 0.5);

  /* Cantos concêntricos: raio interno = raio externo − espaçamento */
  --pad-panel: 16px;
  --r-panel: 28px;
  --r-control: calc(var(--r-panel) - var(--pad-panel)); /* 12px */
  --pad-card: 10px;
  --r-card: 22px;
  --r-media: calc(var(--r-card) - var(--pad-card)); /* 12px */
  --r-capsule: 999px;

  /* Tipografia (Inter) */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(1.25rem, 2.2vw, 1.5rem);
  --fs-title: 1.0625rem;
  --fs-body: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-detail: 0.75rem;

  --tap: 44px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Sem backdrop-filter, ou com "reduzir transparência" / "aumentar contraste": fundo sólido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: #1b1b1b; --glass-blur: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: #1b1b1b; --glass-blur: none; --glass-border: rgba(255, 255, 255, 0.22); }
}
@media (prefers-contrast: more) {
  :root {
    --glass-bg: #1b1b1b; --glass-blur: none; --glass-border: rgba(255, 255, 255, 0.5);
    --hairline: rgba(255, 255, 255, 0.4); --label-2: #ffffff; --label-3: rgba(255, 255, 255, 0.85);
  }
}