@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/*
 * Studio RB7: single-page site of a functional training studio in Penha,
 * São Paulo. Scoped under .site-root and loaded only on pages of this theme.
 * Utilities come from the app's Tailwind (`rb7-*` colors and fonts declared
 * in globals.css); this file holds the tokens, the root typography and the
 * marquee motion.
 *
 * LAYER CONTRACT (same as rana.css): tokens in @layer theme, root rules in
 * @layer components, so every utility in the blocks still wins.
 */

@layer theme {
  .site-root {
    /* Orange follows settings.colors.accent, with the brand value as
       fallback. Mirrors lib/themes/rb7-studio/index.ts. */
    --rb7-orange: var(--theme-accent, #ff5a1f);
    --rb7-orange-deep: #c2410c;
    --rb7-orange-shade: #e84e14;
    --rb7-green: #2ee58a;
    --rb7-ink: #0e0e0d;
    --rb7-paper: #edebe6;
    --rb7-panel: #151513;
    --rb7-surface: #1a1a18;
    --rb7-line: #262624;
    --rb7-rule: #33322f;
    --rb7-edge: #4a4844;
    --rb7-muted: #6e6b65;
    --rb7-subtle: #9a968e;
    --rb7-soft: #bdb9b1;
    --rb7-body: #d3d0c9;
    --rb7-display: "Barlow Condensed", system-ui, sans-serif;
    --rb7-sans: "Barlow", system-ui, sans-serif;
    --rb7-mono: "JetBrains Mono", ui-monospace, monospace;
    /* Side padding of every section. */
    --rb7-gutter: clamp(18px, 4vw, 40px);
  }
}

@layer components {
  .site-root {
    font-family: var(--rb7-sans);
    color: var(--rb7-paper);
    background: var(--rb7-ink);
    -webkit-font-smoothing: antialiased;
  }

  .site-root ::selection {
    background: var(--rb7-orange);
    color: var(--rb7-ink);
  }

  /* Anchor targets stop below the sticky header. */
  .site-root [id] {
    scroll-margin-top: 64px;
  }

  /* Marquee track: holds its items twice and slides by half its width, so
     the loop has no seam. The duration comes from --rb7-marquee-duration. */
  .site-root .rb7-marquee {
    animation: rb7-marquee var(--rb7-marquee-duration, 40s) linear infinite;
  }
  .site-root .rb7-marquee-pausable:hover {
    animation-play-state: paused;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-root .rb7-marquee {
      animation: none;
    }
  }
}

@keyframes rb7-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Unlayered on purpose: the dark page shows under overscroll, and anchors
   scroll smoothly unless the visitor asked for reduced motion. */
html:has(.rb7-site) {
  background: #0e0e0d;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html:has(.rb7-site) {
    scroll-behavior: auto;
  }
}