/* ==========================================================================
   Runey Design System — Component recipes (framework-agnostic CSS)
   Depends on: ../tokens/tokens.css
   Class prefix: .r-
   ========================================================================== */

/* ---------- Base ---------- */
.r-root, body.r-root {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum";
}
* { border-color: hsl(var(--border)); }

/* ---------- Layout ---------- */
.r-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.r-container--narrow { max-width: var(--container-narrow); }
.r-prose { max-width: var(--content-prose); margin-inline: auto; }
.r-section { padding-block: var(--section-y); }
@media (min-width: 768px) {
  .r-container { padding-inline: var(--gutter-md); }
  .r-section { padding-block: var(--section-y-md); }
}
.r-section__head { text-align: center; max-width: var(--content-narrow); margin: 0 auto var(--space-10); }
.r-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .r-grid { gap: var(--space-6); } .r-grid--3 { grid-template-columns: repeat(3, 1fr); } .r-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Typography ---------- */
.r-display { font-size: var(--text-4xl); line-height: var(--leading-none); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.r-h2 { font-size: var(--text-xl); line-height: var(--leading-tight); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.r-h3 { font-size: var(--text-xl); line-height: var(--leading-tight); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.r-h4 { font-size: var(--text-base); line-height: var(--leading-snug); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.r-lead { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: hsl(var(--foreground) / 0.6); }
.r-body { font-size: var(--text-base); line-height: var(--leading-normal); }
.r-body-sm { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.r-caption { font-size: var(--text-sm-); line-height: var(--leading-normal); color: hsl(var(--muted-foreground)); }
.r-stat { font-size: var(--text-4xl); line-height: 1.1; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
@media (min-width: 768px) {
  .r-display { font-size: var(--text-6xl); }
  .r-h2 { font-size: var(--text-3xl); }
  .r-h3 { font-size: var(--text-2xl); }
  .r-lead { font-size: var(--text-lg); }
}
.r-link { color: hsl(var(--muted-foreground)); text-decoration: none; transition: color var(--duration-fast); }
.r-link:hover { color: hsl(var(--foreground)); }
.r-link--underline { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Buttons ---------- */
.r-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  white-space: nowrap; border-radius: var(--radius-full); border: 1px solid transparent;
  font-family: inherit; font-weight: var(--weight-medium); cursor: pointer;
  height: 2.75rem; padding: 0 var(--space-7); font-size: var(--text-sm);
  transition: all var(--duration-fast) var(--ease-out);
}
.r-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.r-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
.r-btn:disabled { pointer-events: none; opacity: 0.5; }
.r-btn--sm { height: 2rem; padding: 0 var(--space-4); font-size: var(--text-sm-); }
.r-btn--md { height: 2.5rem; padding: 0 var(--space-6); }
.r-btn--lg { height: 2.75rem; padding: 0 var(--space-7); font-weight: var(--weight-semibold); }
.r-btn--block { width: 100%; }

/* Primary: embossed dark pill (signature) */
.r-btn--primary {
  color: hsl(var(--primary-foreground));
  background: linear-gradient(to bottom, hsl(var(--primary-light)), hsl(var(--primary)));
  box-shadow: var(--shadow-cta);
}
.r-btn--primary:hover { box-shadow: var(--shadow-cta-hover); filter: brightness(1.06); }
.r-btn--primary:active { box-shadow: var(--shadow-cta-active); filter: brightness(0.96); }

/* Secondary: outlined pill */
.r-btn--secondary { background: hsl(var(--background)); border-color: hsl(var(--input)); color: hsl(var(--foreground)); font-weight: var(--weight-semibold); }
.r-btn--secondary:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

/* Ghost */
.r-btn--ghost { background: transparent; color: hsl(var(--foreground)); font-weight: var(--weight-semibold); }
.r-btn--ghost:hover { background: hsl(var(--accent)); }

/* Solid (flat) */
.r-btn--solid { background: hsl(var(--foreground)); color: hsl(var(--background)); }
.r-btn--solid:hover { background: hsl(var(--foreground) / 0.9); }

/* Destructive */
.r-btn--destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.r-btn--destructive:hover { background: hsl(var(--destructive) / 0.9); }

/* ---------- Cards ---------- */
.r-card {
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border) / 0.6);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-6);
}
@media (min-width: 768px) { .r-card { border-radius: var(--radius-xl); padding: var(--space-8); } }
.r-card--flat { box-shadow: none; }
.r-card--interactive { transition: border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-base); }
.r-card--interactive:hover { border-color: hsl(var(--border)); box-shadow: var(--shadow-md); }
.r-card--pricing { border-radius: var(--radius-lg); padding: var(--space-6); position: relative; text-align: left; }
@media (min-width: 768px) { .r-card--pricing { padding: var(--space-7); } }
.r-card--pricing.is-featured { border-color: hsl(var(--foreground)); box-shadow: var(--shadow-lg); }
.r-card--step { width: 220px; height: 300px; flex-shrink: 0; scroll-snap-align: start; overflow: hidden; border-color: hsl(var(--border) / 0.5); }
@media (min-width: 768px) { .r-card--step { width: 240px; height: 320px; } }
/* Glass card for dark/media backgrounds (app frame) */
.r-card--glass { background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--radius-xl); padding: var(--space-2-5, 10px); box-shadow: none; }

/* ---------- Icon tile ---------- */
.r-tile { width: 3rem; height: 3rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.r-tile svg { width: 1.25rem; height: 1.25rem; }
.r-tile--sky { background: #E0F2FE; color: #0284C7; }
.r-tile--violet { background: #EDE9FE; color: #7C3AED; }
.r-tile--fuchsia { background: #FAE8FF; color: #C026D3; }
.r-tile--rose { background: #FFE4E6; color: #E11D48; }
.r-tile--amber { background: #FEF3C7; color: #D97706; }
.r-tile--orange { background: #FFEDD5; color: #EA580C; }
.r-tile--lime { background: #ECFCCB; color: #4D7C0F; }
.r-tile--emerald { background: #D1FAE5; color: #059669; }
.r-tile--teal { background: #CCFBF1; color: #0D9488; }
.r-tile--cyan { background: #CFFAFE; color: #0891B2; }
.r-tile--indigo { background: #E0E7FF; color: #4F46E5; }
.r-tile--neutral { background: hsl(var(--muted)); color: hsl(var(--foreground)); }

/* ---------- Badges & chips ---------- */
.r-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: hsl(var(--primary) / 0.08); color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.1); border-radius: var(--radius-full);
  padding: var(--space-1-5) var(--space-4); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide);
}
.r-chip {
  display: inline-flex; width: fit-content; border-radius: var(--radius-full);
  background: hsl(var(--muted)); color: hsl(var(--foreground) / 0.6);
  padding: var(--space-0-5) var(--space-2); font-size: var(--text-2xs);
  font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider);
}
.r-badge {
  display: inline-flex; align-items: center; border-radius: var(--radius-full);
  padding: var(--space-0-5) var(--space-1-5); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
}
.r-badge--inverse { background: hsl(var(--background) / 0.2); color: hsl(var(--background)); }
.r-badge--dark { background: hsl(var(--foreground)); color: hsl(var(--background)); }
.r-badge--success { background: hsl(var(--success) / 0.15); color: hsl(93 64% 32%); }
.r-badge--warning { background: hsl(var(--warning) / 0.2); color: hsl(39 100% 30%); }
.r-badge--destructive { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); }
.r-badge--neutral { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

/* ---------- Tabs (pill) ---------- */
.r-tabs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.r-tab {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-1-5);
  border-radius: var(--radius-full); padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs); font-weight: var(--weight-medium); font-family: inherit; cursor: pointer;
  background: hsl(var(--card)); color: hsl(var(--foreground) / 0.7);
  border: 1px solid hsl(var(--border)); transition: all var(--duration-fast);
}
.r-tab svg { width: 0.875rem; height: 0.875rem; }
.r-tab:hover { color: hsl(var(--foreground)); border-color: hsl(var(--foreground) / 0.3); }
.r-tab.is-active { background: hsl(var(--foreground)); color: hsl(var(--background)); border-color: hsl(var(--foreground)); }

/* ---------- Segmented toggle (Monthly / Yearly) ---------- */
.r-segment { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-full); background: hsl(var(--muted)); }
.r-segment__item {
  display: inline-flex; align-items: center; gap: var(--space-2); border: 0; cursor: pointer; font-family: inherit;
  border-radius: var(--radius-full); padding: var(--space-1-5) var(--space-4);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  background: transparent; color: hsl(var(--muted-foreground)); transition: all var(--duration-fast);
}
.r-segment__item:hover { color: hsl(var(--foreground)); }
.r-segment__item.is-active { background: hsl(var(--foreground)); color: hsl(var(--background)); box-shadow: var(--shadow-sm); }

/* ---------- Inputs ---------- */
.r-input, .r-textarea, .r-select {
  width: 100%; height: 2.5rem; padding: 0 var(--space-3); font: inherit; font-size: var(--text-sm);
  color: hsl(var(--foreground)); background: hsl(var(--background));
  border: 1px solid hsl(var(--input)); border-radius: var(--radius-md);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.r-textarea { height: auto; min-height: 6rem; padding: var(--space-3); resize: vertical; }
.r-input::placeholder, .r-textarea::placeholder { color: hsl(var(--muted-foreground)); }
.r-input:focus-visible, .r-textarea:focus-visible, .r-select:focus-visible {
  outline: none; border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}
.r-input[aria-invalid="true"] { border-color: hsl(var(--destructive)); }
.r-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-1-5); }
.r-help { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); margin-top: var(--space-1-5); }
.r-field { display: flex; flex-direction: column; }

/* ---------- Nav ---------- */
.r-nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); width: 100%; transition: all var(--duration-slow) var(--ease-in-out); }
.r-nav__logo { height: 1.75rem; }
.r-nav__links { display: none; gap: var(--space-6); font-size: var(--text-sm-); }
@media (min-width: 768px) { .r-nav__links { display: flex; } }
.r-nav__links a { color: hsl(var(--foreground) / 0.7); text-decoration: none; transition: color var(--duration-fast); }
.r-nav__links a:hover { color: hsl(var(--foreground)); }
/* Floating pill nav (after scroll) */
.r-nav.is-floating { position: sticky; top: var(--space-4); z-index: var(--z-nav); height: 3.5rem; padding-inline: var(--space-5);
  background: hsl(var(--card) / 0.85); backdrop-filter: blur(12px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); }

/* ---------- Footer ---------- */
.r-footer { background: hsl(var(--footer-bg)); color: hsl(var(--footer-fg)); padding: var(--space-14) var(--space-6) var(--space-8); }
.r-footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .r-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); } }
.r-footer__title { font-size: var(--text-sm-); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.r-footer__desc { font-size: var(--text-sm-); color: rgb(255 255 255 / 0.5); line-height: var(--leading-relaxed); }
.r-footer a { display: block; font-size: var(--text-sm-); color: rgb(255 255 255 / 0.5); text-decoration: none; margin-bottom: var(--space-2); transition: color var(--duration-fast); }
.r-footer a:hover { color: #fff; }
.r-footer__bottom { border-top: 1px solid rgb(255 255 255 / 0.1); margin-top: var(--space-10); padding-top: var(--space-6); font-size: var(--text-xs); color: rgb(255 255 255 / 0.4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Feature list (check marks) ---------- */
.r-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.r-checklist li { display: flex; align-items: flex-start; gap: var(--space-2-5, 10px); font-size: var(--text-sm); }
.r-checklist svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 2px; color: hsl(var(--muted-foreground)); }

/* ---------- Price ---------- */
.r-price { display: flex; align-items: baseline; gap: var(--space-1-5); margin-block: var(--space-4); }
.r-price__amount { font-size: var(--text-4xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); line-height: 1; }
.r-price__period { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.r-price__was { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); text-decoration: line-through; }

/* ---------- Accordion (FAQ) ---------- */
.r-accordion__item { border-bottom: 1px solid hsl(var(--border)); }
.r-accordion__trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; background: none; border: 0; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); color: hsl(var(--foreground)); text-align: left; cursor: pointer; }
.r-accordion__trigger svg { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); transition: transform var(--duration-base); }
.r-accordion__item[open] .r-accordion__trigger svg { transform: rotate(180deg); }
.r-accordion__content { padding-bottom: var(--space-4); font-size: var(--text-sm); color: hsl(var(--muted-foreground)); line-height: var(--leading-relaxed); }

/* ---------- Cookie / toast panel ---------- */
.r-panel { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xl); max-width: 400px; }
.r-panel__title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.r-panel__body { font-size: var(--text-sm-); color: hsl(var(--muted-foreground)); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); }

/* ---------- App frame (product screenshot wrapper) ---------- */
.r-frame { border-radius: var(--radius-xl); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); overflow: hidden; box-shadow: var(--shadow-xl); }

/* ---------- Motion ---------- */
.r-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.r-reveal.is-visible { opacity: 1; transform: none; }
.r-lift { transition: transform var(--duration-base) var(--ease-out); }
.r-lift:hover { transform: var(--hover-lift); }
@media (prefers-reduced-motion: reduce) { .r-reveal, .r-lift, .r-btn, .r-card--interactive { transition: none !important; transform: none !important; } .r-reveal { opacity: 1; } }