/* RR Tecnologia: tema do Claude Design (Grafite, Aço, Névoa, Azul) */
:root {
  --bg: #F4F5F6;
  --surface: #FFFFFF;
  --sunk: #ECEEF0;
  --ink: #14171A;
  --muted: #545C66;
  --line: #D9DDE2;
  --accent: #1F57C7;
  --accent-bright: #4F86F7;
  --accent-ink: #FFFFFF;
  --accent-soft: #E7EEFB;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1114;
    --surface: #161A1F;
    --sunk: #1B2026;
    --ink: #E8EBEE;
    --muted: #A0A8B2;
    --line: #2B323A;
    --accent: #7EA6FF;
    --accent-bright: #1F57C7;
    --accent-ink: #0B1530;
    --accent-soft: #1B2742;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
a { color: inherit; }
a:hover { opacity: .85; }
a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
svg { max-width: 100%; }

/* telas dos apps: ilustração, com o fundo cinza um pouco mais fundo */
.tela { --sunk: #E3E6E9; pointer-events: none; user-select: none; }
@media (prefers-color-scheme: dark) { .tela { --sunk: #262C33; } }

/* cartão da etiqueta no topo: no celular não sai da tela */
@media (max-width: 560px) {
  .cartao-etiqueta { left: -8px !important; }
}

/* páginas legais: o texto que já existia */
.secao-legal p { margin: 0 0 12px; }
.secao-legal ul { margin: 0 0 12px; padding-left: 20px; }
.secao-legal li { margin: 6px 0; }
.secao-legal a { color: var(--accent); font-weight: 500; }
.indice a:hover { color: var(--ink) !important; }
@media (max-width: 860px) {
  .indice { display: none; }
}