/* Página da raiz (roicraft.app): o logo, um joinha e a paleta do app. Escura, sem nada de fora. */
@font-face{font-family:'Plus Jakarta Sans';src:url('/fontes/jakarta.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/fontes/spacemono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/fontes/spacemono-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#07090e;--bg2:#0a0d14;--card:#0e1520;--card2:#121c2a;--line:#18253a;
  --text:#ddeae8;--muted:#7d98a4;--muted2:#2a3d4a;
  --accent:#22d3ee;--accent2:#10b981;--ok:#10b981;--warn:#f59e0b;--bad:#f87171;
  --grad:linear-gradient(135deg,#10b981,#22d3ee);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:16px;line-height:1.5;
  display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;
}
code{font-family:'Space Mono',ui-monospace,monospace}

/* Logo como marca d'água, bem transparente, ocupando quase a tela toda (como no app). */
.marca-dagua{
  position:fixed;inset:0;margin:auto;width:min(92vw,1100px);height:auto;
  opacity:.04;pointer-events:none;z-index:0;
}

.centro{
  position:relative;z-index:1;flex:1;width:100%;max-width:760px;margin:0 auto;
  padding:48px 16px 40px;display:flex;flex-direction:column;gap:40px;
}

.abertura{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.logo{width:clamp(88px,22vw,128px);height:auto}
h1{
  font-size:clamp(32px,8vw,48px);font-weight:800;letter-spacing:-.01em;line-height:1.1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.joinha{
  font-size:clamp(96px,32vw,168px);line-height:1;margin-top:8px;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  filter:drop-shadow(0 12px 40px rgba(34,211,238,.25));
}

.bloco{display:flex;flex-direction:column;gap:14px}
h2{
  font-family:'Space Mono',ui-monospace,monospace;font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}

.amostras{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.amostra{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 10px 12px;
}
.amostra-larga{grid-column:1/-1}
.cor{display:block;height:72px;border-radius:9px;margin-bottom:8px;border:1px solid rgba(221,234,232,.08)}
.amostra-larga .cor{height:88px}
.nome{font-size:14px;font-weight:700}
.amostra code,.fonte code{font-size:12px;color:var(--muted);overflow-wrap:anywhere}

.c-fundo{background:#07090e}
.c-fundo2{background:#0a0d14}
.c-cartao{background:#0e1520}
.c-cartao2{background:#121c2a}
.c-linha{background:#18253a}
.c-texto{background:#ddeae8}
.c-suave{background:#7d98a4}
.c-suave2{background:#2a3d4a}
.c-destaque{background:#22d3ee}
.c-destaque2{background:#10b981}
.c-aviso{background:#f59e0b}
.c-erro{background:#f87171}
.c-gradiente{background:linear-gradient(135deg,#10b981,#22d3ee)}

.fontes{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.fonte{
  display:flex;flex-direction:column;gap:4px;min-width:0;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;
}
.fonte-jakarta{font-size:22px;font-weight:800}
.fonte-mono{font-family:'Space Mono',ui-monospace,monospace;font-size:20px;font-weight:700}

.rodape{
  position:relative;z-index:1;text-align:center;padding:20px 16px;
  font-family:'Space Mono',ui-monospace,monospace;font-size:12px;color:var(--muted);
}