/* TribeMD Design System — component stylesheet
 * The element and utility rules of colors_and_type.css (its earlier self: archived/colors_and_type.css).
 * Every value that has a token lives in tokens.json (compiled to tokens.css); these rules read those variables.
 */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=Inconsolata:wght@400;500;700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Space Grotesk is used as the display face in lieu of Roc Grotesk (no free source). */

:root {
  /* Type scale (mobile) — the element rules below read these; the type styles themselves are in tokens.json */
  --text-display-size:   56px;  --text-display-lh: 64px;  --text-display-weight: 700;
  --text-h1-size:        36px;  --text-h1-lh: 44px;       --text-h1-weight: 700;
  --text-h2-size:        28px;  --text-h2-lh: 36px;       --text-h2-weight: 700;
  --text-h3-size:        24px;  --text-h3-lh: 32px;       --text-h3-weight: 600;
  --text-subtitle-size:  20px;  --text-subtitle-lh: 28px; --text-subtitle-weight: 600;
  --text-body-size:      16px;  --text-body-lh: 24px;     --text-body-weight: 400;
  --text-bodys-size:     14px;  --text-bodys-lh: 20px;    --text-bodys-weight: 400;
  --text-caption-size:   12px;  --text-caption-lh: 16px;  --text-caption-weight: 500;
  --text-meta-size:      10px;  --text-meta-lh: 12px;     --text-meta-weight: 400;

  /* ======================= BORDERS ======================================== */
  --border-hairline: 1px solid var(--border-subtle);
  --border-doc:      8px solid var(--common-neutral-1000);  /* doc-only neobrutalist */

  /* ======================= MOTION ========================================= */
  --ease-standard: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --ease-enter:    cubic-bezier(0, 0, .2, 1); /* @kind other */
  --ease-exit:     cubic-bezier(.4, 0, 1, 1); /* @kind other */
  --dur-fast:   150ms; /* @kind other */
  --dur-normal: 220ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
  --dur-sheet:  400ms; /* @kind other */
}

/* -------------------------------------------------------------------------- */
/* SEMANTIC ELEMENT STYLES                                                    */
/* The .display .h1 .h2 .h3 .subtitle .body .body-s .caption .meta classes    */
/* come from tokens.css; only what tokens.css does not set stays here.        */
/* -------------------------------------------------------------------------- */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-default);
  background: var(--bg-app);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  font-weight: var(--text-h1-weight);
  color: var(--fg-default);
  letter-spacing: -0.01em;
}
.h1 { color: var(--fg-default); }

h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: var(--text-h2-weight);
  color: var(--fg-default);
}
.h2 { color: var(--fg-default); }

h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: var(--text-h3-weight);
}

p {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--fg-default);
}
.body { color: var(--fg-default); }

.body-s { color: var(--fg-muted); }

.caption { color: var(--fg-muted); }

code {
  font-family: var(--font-mono);
  font-size: var(--text-meta-size);
  line-height: var(--text-meta-lh);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.meta { color: var(--fg-muted); }

/* -------------------------------------------------------------------------- */
/* UTILITY                                                                    */
/* -------------------------------------------------------------------------- */

.card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-5);
}
.card--flat {
  box-shadow: none;
  border: var(--border-default);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: var(--text-caption-size);
  font-weight: 500;
  line-height: 1;
}

/* NavBarOn — hover, focus and motion; values from the TribeMD On project */
@keyframes navbaron-live-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes navbaron-notif-in { from { opacity: 0; transform: translateY(-6px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes navbaron-notif-view { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
.navbaron-apps { background: transparent; color: #8A9599; }
.navbaron-apps:hover, .navbaron-apps--on { background: rgba(181,143,255,.14); color: #E4E9EA; }
.navbaron-apps:focus-visible { box-shadow: 0 0 0 2px #B58FFF; }
.navbaron-app:hover { background: rgba(181,143,255,.1); }
.navbaron-ic { background: transparent; }
.navbaron-ic:hover, .navbaron-ic--on { background: rgba(181,143,255,.14); }
.navbaron-entrar { background: transparent; color: #F4F6F6; }
.navbaron-entrar:hover { background: rgba(181,143,255,.1); color: #FFFFFF; }
.navbaron-assine { background: linear-gradient(135deg,#7B3FD9 0%,#5213B9 58%,#431490 100%); background-size: 230% 100%; background-position: 0% 50%; box-shadow: 0 0 0 rgba(82,19,185,0); }
.navbaron-assine:hover { background: linear-gradient(135deg,#6B24D6 0%,#431490 58%,#340F73 100%); background-size: 230% 100%; background-position: 100% 50%; box-shadow: 0 6px 18px rgba(82,19,185,.35); color: #FFFFFF; }
.navbaron-assine:active { background: #3A1180; }
.navbaron-entrar:active, .navbaron-assine:active, .navbaron-link:active, .navbaron-btn:active { transform: translateY(1px); }
.navbaron-link { background: transparent; color: #B58FFF; }
.navbaron-link:hover { background: rgba(181,143,255,.1); color: #C9AAFF; }
.navbaron-nitem { background: transparent; }
.navbaron-nitem--nova { background: rgba(181,143,255,.07); }
.navbaron-nitem:hover { background: rgba(181,143,255,.1); }
.navbaron-rel { background: #14181A; box-shadow: inset 0 0 0 1px #262C2E; }
.navbaron-rel:hover { background: #171C1E; box-shadow: inset 0 0 0 1px #394143; }
.navbaron-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; border: 0; border-radius: 999px; padding: 8px 18px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1), transform .12s cubic-bezier(.4,0,.2,1); }
.navbaron-btn--primario { background: #5213B9; color: #FFFFFF; }
.navbaron-btn--primario:hover { background: #431490; }
.navbaron-btn--contorno { background: transparent; color: #C9B6F5; box-shadow: inset 0 0 0 1px rgba(181,143,255,.45); }
.navbaron-btn--contorno:hover { background: rgba(181,143,255,.14); }
.navbaron-xp { background: rgba(255,255,255,.04); }
.navbaron-xp:hover { background: rgba(181,143,255,.12); }
.navbaron-mc { color: #E4E9EA; }
.navbaron-mc:hover { background: rgba(181,143,255,.12); color: #FFFFFF; }
.navbaron-mc--sair { color: #D79AA2; }
.navbaron-mc--sair:hover { background: rgba(194,50,63,.16); color: #F0C3C8; }

/* NavBar — the ecosystem button, styled after NavBarOn's, and its light menu */
.navbar-apps { background: transparent; color: #646F73; }
.navbar-apps:hover, .navbar-apps--on { background: rgba(181,143,255,.14); color: #5213B9; }
.navbar-apps:focus-visible { box-shadow: 0 0 0 2px #5213B9; }
.navbar-app { background: transparent; color: #2E3233; }
.navbar-app:hover { background: #F3EDFF; color: #5213B9; }
.navbar-app:focus-visible { box-shadow: 0 0 0 2px #5213B9; }
.navbar-apps-grid { scrollbar-width: thin; scrollbar-color: #B58FFF transparent; }
.navbar-apps-grid::-webkit-scrollbar { width: 8px; }
.navbar-apps-grid::-webkit-scrollbar-track { background: transparent; }
.navbar-apps-grid::-webkit-scrollbar-thumb { background: #B58FFF; border-radius: 999px; border: 2px solid #FFFFFF; }
.navbar-apps-grid::-webkit-scrollbar-thumb:hover { background: #8A38F5; }

/* Footer — layout and hover from tribemd.com/br: 12 columns (9 + 3) from 1440px, 8 (4 + 4) from 768px, one below */
.footer-cols { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 24px; }
.footer-selo { width: 100px; height: 100px; }
@media (min-width: 768px) {
  .footer-cols { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .footer-col-main, .footer-col-side { grid-column: span 4 / span 4; }
  .footer-selo { width: 130px; height: 130px; }
}
@media (min-width: 1440px) {
  .footer-cols { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin: 0 64px; }
  .footer-col-main { grid-column: span 9 / span 9; }
  .footer-col-side { grid-column: span 3 / span 3; }
}
@media (max-width: 767px) { .footer-social { align-self: center; } }
.footer-link { transition: transform .3s cubic-bezier(.4,0,.2,1); }
.footer-link:hover { transform: scale(1.05); }
.footer-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.2); transition: box-shadow .15s cubic-bezier(.4,0,.2,1); }
.footer-flag:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.4); }