/* ════════════════════════════════════════════════════════════════════
   RIVIAN-INSPIRED DESIGN SYSTEM
   ────────────────────────────────────────────────────────────────────
   Premium, minimal, lots of breathing room. Single accent color used
   sparingly. Ultra-clean typography. Horizontal swipe tiles with
   snap-stop behavior. Drop this file into any page after the page's
   own stylesheet to override the palette + add the new components.

   Usage:
     <link rel="stylesheet" href="/rivian-system.css">
     <div class="r-hero">...</div>
     <div class="r-swipe"><div class="r-tile">...</div>...</div>
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette — modern dark, single accent ─────────────────────── */
  --r-bg:           #0A0B0D;    /* near-black, slightly warm */
  --r-surface:      #111316;    /* card surface */
  --r-surface-2:    #1A1D21;    /* raised card */
  --r-line:         rgba(255,255,255,0.07);
  --r-line-strong:  rgba(255,255,255,0.14);

  --r-ink:          #f8fafc;    /* warm cream — soft white */
  --r-ink-soft:     rgba(248,250,252,0.72);
  --r-ink-dim:      rgba(248,250,252,0.46);
  --r-ink-faint:    rgba(248,250,252,0.28);

  /* ── ONE accent. Used sparingly. ──────────────────────────────── */
  --r-accent:       #00b4ff;    /* electric celadon (Rivian-esque) */
  --r-accent-soft:  rgba(0,180,255,0.14);
  --r-accent-line:  rgba(0,180,255,0.40);
  --r-accent-ink:   #0A0B0D;    /* text on accent backgrounds */

  /* ── Type scale — large jumps, tight tracking ─────────────────── */
  --r-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --r-display:      clamp(40px, 7vw, 88px);
  --r-h1:           clamp(32px, 4.6vw, 56px);
  --r-h2:           clamp(24px, 3vw, 36px);
  --r-h3:           clamp(18px, 1.6vw, 22px);
  --r-body:         16px;
  --r-small:        13px;
  --r-eyebrow:      11px;

  /* ── Spacing — generous ───────────────────────────────────────── */
  --r-gutter:       clamp(20px, 4vw, 56px);
  --r-section-y:    clamp(64px, 10vw, 144px);

  /* ── Motion ───────────────────────────────────────────────────── */
  --r-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --r-dur:          .42s;

  /* ── Radii / shadows ──────────────────────────────────────────── */
  --r-radius:       16px;
  --r-radius-lg:    22px;
  --r-shadow:       0 12px 32px rgba(0,0,0,0.45);
}

/* ════════════════ TYPOGRAPHY ════════════════ */
.r-eyebrow {
  display: inline-block;
  font-size: var(--r-eyebrow);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--r-ink-dim);
}
.r-display {
  font-size: var(--r-display);
  font-weight: 300;                  /* light weight, like Rivian */
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--r-ink);
}
.r-h1 { font-size: var(--r-h1); font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; color: var(--r-ink); }
.r-h2 { font-size: var(--r-h2); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: var(--r-ink); }
.r-h3 { font-size: var(--r-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--r-ink); }
.r-body {
  font-size: var(--r-body); font-weight: 400;
  line-height: 1.62; color: var(--r-ink-soft);
  max-width: 62ch;
}
.r-small { font-size: var(--r-small); color: var(--r-ink-soft); }

/* ════════════════ HERO ════════════════ */
.r-hero {
  position: relative;
  min-height: 78vh;
  padding: clamp(72px, 12vw, 160px) var(--r-gutter) var(--r-section-y);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--r-bg);
  isolation: isolate;
  overflow: hidden;
}
.r-hero::before {                    /* subtle vignette */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(0,180,255,0.06), transparent 60%);
  pointer-events: none; z-index: -1;
}
.r-hero .r-display { max-width: 16ch; }
.r-hero .r-body { margin-top: 18px; }
.r-hero-actions {
  display: flex; gap: 12px; margin-top: 32px;
  flex-wrap: wrap;
}

/* ════════════════ BUTTONS ════════════════ */
.r-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; min-height: 48px;
  border-radius: 999px;
  font-family: var(--r-font); font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer; user-select: none;
  border: 1px solid transparent;
  transition: background var(--r-dur) var(--r-ease),
              color var(--r-dur) var(--r-ease),
              border-color var(--r-dur) var(--r-ease),
              transform .12s var(--r-ease);
  text-decoration: none;
}
.r-btn:active { transform: scale(0.98); }
.r-btn--primary {
  background: var(--r-accent); color: var(--r-accent-ink);
}
.r-btn--primary:hover { background: #4dc9ff; }
.r-btn--ghost {
  background: transparent; color: var(--r-ink);
  border-color: var(--r-line-strong);
}
.r-btn--ghost:hover { border-color: var(--r-ink-soft); }

/* ════════════════ SECTION ════════════════ */
.r-section {
  padding: var(--r-section-y) var(--r-gutter);
  background: var(--r-bg);
}
.r-section--surface { background: var(--r-surface); }
.r-section-head {
  max-width: 880px; margin: 0 0 56px;
}
.r-section-head .r-eyebrow { margin-bottom: 14px; }
.r-section-head .r-body { margin-top: 16px; }

/* ════════════════ HORIZONTAL SWIPE TILES ════════════════ */
/* Full-bleed horizontal scroll with snap. Mobile-first, scales to
   desktop. No scrollbar. Touch-locked to horizontal. */
.r-swipe-wrap {
  /* Lets the swipe bleed past container padding for that Rivian
     edge-to-edge feel while content above still respects the gutter. */
  margin-left: calc(var(--r-gutter) * -1);
  margin-right: calc(var(--r-gutter) * -1);
  padding-block: 8px;
}
.r-swipe {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-padding-inline: var(--r-gutter);
  padding: 4px var(--r-gutter) 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;               /* lock to horizontal */
  contain: layout paint;
}
.r-swipe::-webkit-scrollbar { display: none; }
.r-swipe-hint {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 16px var(--r-gutter);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--r-ink-dim);
}
.r-swipe-hint::after {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.5;
}

/* ════════════════ TILE ════════════════ */
.r-tile {
  flex: 0 0 78%;
  max-width: 360px;
  min-width: 260px;
  scroll-snap-align: start;
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-lg);
  padding: 28px 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  transition: border-color var(--r-dur) var(--r-ease),
              background var(--r-dur) var(--r-ease),
              transform .18s var(--r-ease);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 720px) { .r-tile { flex-basis: 42%; } }
@media (min-width: 1100px) { .r-tile { flex-basis: 28%; } }
.r-tile:hover { border-color: var(--r-line-strong); }
.r-tile:active { transform: scale(0.99); }
.r-tile[data-on="true"] {
  border-color: var(--r-accent-line);
  background: linear-gradient(180deg, var(--r-accent-soft), transparent 60%), var(--r-surface);
}
.r-tile[data-on="true"]::after {     /* check mark */
  content: "✓";
  position: absolute; top: 18px; right: 18px;
  width: 24px; height: 24px;
  background: var(--r-accent); color: var(--r-accent-ink);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
}
.r-tile-logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; letter-spacing: -0.02em;
  flex: none;
}
.r-tile-title {
  font-size: 18px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--r-ink); line-height: 1.25;
}
.r-tile-desc {
  font-size: 13px; line-height: 1.55;
  color: var(--r-ink-soft);
}
.r-tile-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: auto;
}
.r-tile-meta-pill {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--r-line);
  color: var(--r-ink-soft);
}
.r-tile-price {
  font-size: 14px; font-weight: 700; color: var(--r-ink);
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.r-tile-price-sub {
  font-size: 12px; font-weight: 500; color: var(--r-ink-dim); margin-left: 4px;
}

/* ════════════════ COMPACT CHIP (channel preview row) ════════════════ */
.r-chip-row {
  display: flex; gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px var(--r-gutter) 12px;
  margin-left: calc(var(--r-gutter) * -1);
  margin-right: calc(var(--r-gutter) * -1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.r-chip-row::-webkit-scrollbar { display: none; }
.r-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 7px;
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--r-ink-soft);
  scroll-snap-align: start;
  max-width: 220px;
}
.r-chip-logo {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: -0.02em;
  flex: none;
}
.r-chip-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ════════════════ SMOOTH SCROLL ════════════════ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .r-tile, .r-btn, .r-swipe { transition: none !important; animation: none !important; }
}

/* ════════════════ UTILITY ════════════════ */
.r-container { max-width: 1280px; margin: 0 auto; }
.r-divider { height: 1px; background: var(--r-line); border: 0; margin: var(--r-section-y) 0; }

/* ════════════════ APPLY GLOBALLY (when wired) ════════════════ */
/* These overrides only activate when a page adds class="r-themed" on
   <body>. That way you can opt pages in one at a time without breaking
   the rest of the site. */
body.r-themed {
  background: var(--r-bg);
  color: var(--r-ink);
  font-family: var(--r-font);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.r-themed * { letter-spacing: inherit; }
body.r-themed h1, body.r-themed h2, body.r-themed h3 { color: var(--r-ink); font-weight: 500; letter-spacing: -0.022em; }
body.r-themed p { color: var(--r-ink-soft); }