@import "tailwindcss";
@import "@zeno/ui/styles/tokens.css";

@theme {
  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

html,
body,
#root {
  background-color: var(--color-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
}

::selection {
  background: var(--color-gold);
  color: var(--color-text-ink);
}

a {
  color: inherit;
}

@keyframes particle-drift {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: var(--particle-opacity, 0.6);
  }
  50% {
    transform: translate3d(var(--particle-dx, 0), var(--particle-dy, -16px), 0);
    opacity: calc(var(--particle-opacity, 0.6) * 0.35);
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: var(--particle-opacity, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-particle="true"] {
    animation: none !important;
  }
}

/* Terminal copy button hover. */
[data-terminal-copy] {
  transition:
    color 280ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-terminal-copy]:hover {
  color: var(--color-gold);
  border-color: var(--color-gold-line);
  background-color: rgba(217, 179, 98, 0.06);
}

/* Standardized text-link primitive. Used by hero links + footer links.
   Color owned here (NOT inline) so :hover wins over base. Icons inside
   the link keep their inline fill/stroke (text-primary) and are not
   affected by the color cascade because they declare it explicitly. */
[data-text-link] {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-text-link]:hover {
  color: var(--color-gold);
}

/* ============================================================
   Responsive — landing must work on mobile + tablet + desktop.
   The page-level styles use inline styles (per the spec); the
   media queries below override the section-level paddings and
   layouts that don't fit narrow viewports.
   Breakpoints:
     - mobile:   max-width: 640px  (small phones)
     - phablet:  641px - 900px     (large phones / small tablets)
     - tablet:   901px - 1199px    (tablets / small laptops)
     - desktop:  1200px+           (default inline styles)
   ============================================================ */

/* --- Universal: terminal command must always scroll, not break --- */
[data-terminal-body] {
  overflow-x: auto;
}

/* ============================================================
   Tablet (901–1199px): tighten the 192px gutters.
   ============================================================ */
@media (max-width: 1199px) {
  section[aria-label="experimental"],
  section[aria-label="quick-start"],
  section[aria-label="how-it-works"],
  section[aria-label="cta"],
  footer[aria-label="footer"] {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
}

/* ============================================================
   Phablet (641–900px): drop gutters further, allow CTAs to wrap.
   ============================================================ */
@media (max-width: 900px) {
  section[aria-label="experimental"],
  section[aria-label="quick-start"],
  section[aria-label="how-it-works"],
  section[aria-label="cta"],
  footer[aria-label="footer"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  section[aria-label="hero"] {
    padding: 96px 32px 64px !important;
  }

  /* Diagram: stack vertically; rotate arrow glyph 90deg. */
  [data-diagram-flow] {
    flex-direction: column !important;
    padding: 24px !important;
  }
  [data-diagram-arrow] {
    transform: rotate(90deg);
    padding: 4px 0 !important;
  }

  /* CTA tiles: 1 column on phablet (cleaner than 3 cramped tiles). */
  section[aria-label="cta"] {
    flex-direction: column !important;
  }
}

/* ============================================================
   Mobile (≤640px): aggressive scale-down.
   ============================================================ */
@media (max-width: 640px) {
  section[aria-label="experimental"],
  section[aria-label="quick-start"],
  section[aria-label="how-it-works"],
  section[aria-label="cta"],
  footer[aria-label="footer"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Hero: tighter padding, slightly smaller wordmark. */
  section[aria-label="hero"] {
    padding: 72px 20px 56px !important;
  }
  section[aria-label="hero"] h1 {
    font-size: 40px !important;
    line-height: 44px !important;
  }
  section[aria-label="hero"] p {
    font-size: 16px !important;
    line-height: 24px !important;
  }
  /* Tagline kicker — squeeze letter-spacing so it fits one line. */
  section[aria-label="hero"] > span:first-of-type {
    letter-spacing: 0.16em !important;
    font-size: 10px !important;
  }
  /* Particles are anchored at 1440-wide-hero pixel positions; on
     mobile they cluster on the left and look broken. Hide them. */
  section[aria-label="hero"] [data-particle="true"] {
    display: none !important;
  }

  /* Quick Start heading + footnote tighten. */
  section[aria-label="quick-start"] h2,
  section[aria-label="how-it-works"] h2 {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  /* Terminal block on mobile. Layout intentionally stacks:
       row 1: tab (`one-liner`)
       row 2: OS selector
       row 3: BETA toggle + copy button
     The 3 traffic-light dots are hidden (decorative). The actions
     wrapper uses display: contents so OS + BETA become direct flex
     children of the header, which lets the OS toggle take its own
     row via flex-basis: 100%. */
  [data-terminal-body] {
    padding: 16px !important;
  }
  [data-terminal-body] code,
  [data-terminal-body] span:first-of-type {
    font-size: 12px !important;
  }
  [data-terminal-header] {
    row-gap: 8px !important;
    column-gap: 8px !important;
    padding: 10px 12px !important;
    align-items: center !important;
  }
  [data-terminal-header] > div:first-child {
    display: none !important;
  }
  [data-terminal-header] [data-terminal-actions] {
    display: contents !important;
  }
  /* tab fills its own row */
  [data-terminal-header] > span:first-of-type {
    flex-basis: 100% !important;
  }
  /* OS selector fills its own row */
  [data-terminal-header] fieldset[aria-label="Operating system"] {
    flex-basis: 100% !important;
    margin-left: 0 !important;
  }
  /* BETA + copy share the third row, copy pushed to the right */
  [data-terminal-header] [role="switch"] {
    margin-left: 0 !important;
  }
  [data-terminal-copy] {
    margin-left: auto !important;
  }

  /* Footer: stack vertically + center on mobile (desktop unchanged). */
  footer[aria-label="footer"] {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 16px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  footer[aria-label="footer"] > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  /* Gold-rule callout (the EXPERIMENTAL block) — stack kicker above
     body on mobile so the body has the full width to flow. */
  [data-gold-rule] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
}
