/* swiperoll.app base: tokens, type, footer, phone shell, storage bar.
   Colours come from App/Sources/Theme/Theme.swift (marketing/BRAND.md). The lead owns this file. */

/* Dark only (owner, 8 Nov 2026): the site has one theme, the app's dark one. */
:root {
  color-scheme: dark;

  /* Fills: separation by fill, never by shadow */
  --page: #030813;
  --card: #07111F;
  --control: #091828;
  --edge: rgba(63, 175, 243, 0.18);

  /* Text */
  --text: rgba(255, 255, 255, 0.95);
  --text-2: rgba(255, 255, 255, 0.66);
  --text-3: rgba(255, 255, 255, 0.48);

  /* One sky act per section */
  --sky: #3FAFF3;
  --sky-text: #87CAF3;
  --button: #2B77A8;
  --on-button: #FFFFFF;

  /* Colour means decision */
  --keep: #34D399;
  --marked: #EF806F;
  --pending: #FBBF24;

  /* Phone shell */
  --phone-body: #0B0F14;
  --phone-edge: #313B47;

  /* Metrics (Theme.swift) */
  --gutter: 16px;
  --radius: 24px;
  --radius-s: 14px;
  --tap: 44px;
  --measure: 34rem;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--sky-text); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--button); color: var(--on-button);
  padding: 10px 16px; border-radius: 12px; z-index: 10;
}
.skip:focus { top: var(--gutter); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Type: heavy headlines, tight tracking, sentence case (BRAND.md) */
.display {
  font-size: clamp(2.4rem, 7.2vw, 4.6rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0;
}
h1, h2, h3 { margin: 0; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; }
.title { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.lead { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--text-2); max-width: var(--measure); margin: 0; }
.small { font-size: 0.875rem; color: var(--text-3); }

/* Site header */
/* Fixed on every page: the wordmark and the App Store badge stay on top while scrolling (owner, 8 Nov 2026) */
:root { --head-h: 68px; }
body { padding-top: var(--head-h); }
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(var(--gutter), calc((100% - 72rem) / 2 + var(--gutter)));
  background: var(--page);
  border-bottom: 1px solid var(--edge);
}
.skip:focus { z-index: 60; }
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none; font-weight: 750; letter-spacing: -0.01em;
  min-height: var(--tap);
}
.wordmark img { width: 32px; height: 32px; border-radius: 8px; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 20px; border-radius: 999px;
  background: var(--button); color: var(--on-button); text-decoration: none; font-weight: 600;
}

/* App Store badge: Apple's artwork, unmodified, never animated */
.badge { display: inline-block; min-height: var(--tap); padding: 4px 0; }
.badge svg { height: 40px; width: auto; }

/* Footer, on every page */
.site-foot {
  background: var(--card);
  border-top: 1px solid var(--edge);
  margin-top: 64px;
}
.site-foot .inner {
  max-width: 72rem; margin: 0 auto; padding: 32px var(--gutter) 40px;
  display: grid; gap: 20px;
}
.site-foot nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-foot nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text); text-decoration: none; }
.site-foot nav a:hover { color: var(--sky-text); }
.site-foot .legal { color: var(--text-3); font-size: 0.875rem; margin: 0; }
@media (min-width: 720px) {
  .site-foot .inner { grid-template-columns: 1fr auto; align-items: center; }
}

/* Phone shell: our own drawing, no Apple details (no island, buttons or logo) */
.phone {
  --w: 300px;
  position: relative;
  width: var(--w);
  aspect-ratio: 1206 / 2622;
  padding: calc(var(--w) * 0.035);
  border-radius: calc(var(--w) * 0.155);
  background: var(--phone-body);
  border: 3px solid var(--phone-edge);
  transform-style: preserve-3d;
}
.phone .screen {
  position: relative; width: 100%; height: 100%;
  border-radius: calc(var(--w) * 0.125);
  overflow: hidden; background: #030813;
}
.phone .screen > img, .phone .screen > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Storage bar: colour means decision */
.storage { width: min(100%, 340px); }
.storage .label { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9375rem; margin-bottom: 8px; }
.storage .label strong { font-variant-numeric: tabular-nums; }
.storage .track {
  display: flex; height: 12px; border-radius: 999px; overflow: hidden;
  background: var(--control);
}
.storage .used { background: var(--text-3); }
.storage .waiting { background: var(--pending); }
.storage .back { background: var(--sky); }
.storage .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--text-2); }
.storage .legend li::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; vertical-align: 0; background: currentColor;
}
.storage .legend .is-waiting::before { background: var(--pending); }
.storage .legend .is-back::before { background: var(--sky); }
.storage .legend .is-used::before { background: var(--text-3); }

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