/* Linvix · Base visual das páginas do MCP (login do OAuth e /docs) — temas: escuro (gradiente) e claro (gradiente) */

/* Fontes servidas pelo próprio MCP (a CSP da página só aceita 'self'). Arquivos variáveis, pesos 400 a 700. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/roboto-condensed-latin.woff2") format("woff2");
}
:root {
  --primary-100: #ECF1F9;
  --primary-200: #B6CDE9;
  --primary-300: #77A8D9;
  --primary-500: #405E7B;
  --primary-600: #273C50;
  --primary-700: #111D28;
  --orange: #F26921;
  --gray-100: #DCE0E1;
  --gray-200: #C1C5C8;
  --gray-300: #9AA2A9;
  --gray-400: #7A7D86;
  --gray-500: #58595F;
  --gray-600: #303E42;
  --surface: #FBFDFF;
  --sunken: #F7F7F8;
  --white: #F7FEFF;
  --success: #44B874;
  --error: #DC4841;
  --error-soft: #FBE9E8;
  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Roboto Condensed", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--gray-500);
  background: var(--primary-700);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-500); text-decoration: none; }
a:hover { color: var(--orange); }

/* Página */
.page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 48px 20px 24px;
}
/* Fundo fixo na tela: só o conteúdo rola, e o gradiente aparece inteiro também em páginas longas como o /docs. */
.page__bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(242, 105, 33, .22), transparent 70%),
    linear-gradient(145deg, var(--primary-700) 0%, var(--primary-600) 55%, var(--primary-500) 100%);
  transition: opacity .4s ease;
}
.page__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(242, 105, 33, .14), transparent 70%),
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(155deg, #F7FDFF 0%, var(--primary-100) 35%, var(--primary-200) 75%, var(--primary-300) 100%);
  transition: opacity .4s ease;
}
[data-theme="claro"] body { background: var(--primary-100); }
[data-theme="claro"] .page__bg::after { opacity: 1; }
[data-theme="claro"] .page__footer { color: #334C65; }

/* Logo por tema */
.logo.logo--positiva { display: none; }
[data-theme="claro"] .logo.logo--negativa { display: none; }
[data-theme="claro"] .logo.logo--positiva { display: block; }

/* Seletor de tema */
.theme-switch {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(247, 254, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(247, 254, 255, .14);
  backdrop-filter: blur(8px);
}
.theme-switch__btn {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 13px var(--font-heading);
  color: var(--primary-200);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.theme-switch__btn:hover { color: var(--white); }
.theme-switch__btn[aria-checked="true"] { background: var(--white); color: var(--primary-700); }
[data-theme="claro"] .theme-switch { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(17, 29, 40, .08); }
[data-theme="claro"] .theme-switch__btn { color: var(--primary-500); }
[data-theme="claro"] .theme-switch__btn:hover { color: var(--primary-700); }
[data-theme="claro"] .theme-switch__btn[aria-checked="true"] { background: var(--primary-500); color: var(--white); }
.page__footer {
  display: flex;
  justify-content: center;
  padding-top: 32px;
  font-size: 13px;
  color: var(--gray-300);
}

.logo { height: 30px; width: auto; display: block; }

/* Sem JavaScript o seletor de tema não funciona: fica escondido. */
.theme-switch[hidden] { display: none; }

@media (max-width: 480px) {
  .page { padding-top: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}