/* ============================================================
   RoidOcean — Design System / Tokens
   Measured from roidocean.to (source-cdp/design-tokens.json + merged.css)
   Consumed by every later phase. Build once, properly.
   ============================================================ */

/* ---- Self-hosted Jost (next/font woff2 on source; here from Google-hosted static
   or a bundled copy). We register the family so the whole theme inherits it. ---- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/jost-var.woff2') format('woff2');
}

:root {
  /* --- Brand palette (measured) --- */
  --ro-navy:        #103178;   /* rgb(16,49,120)  brand / h2 / headings */
  --ro-navy-700:    #0d285f;
  --ro-navy-900:    #0a1f4a;
  --ro-orange:      #F59E0B;   /* rgb(245,158,11) accent / CTA / chips */
  --ro-orange-600:  #d97706;
  --ro-amber-50:    #fffbeb;
  --ro-amber-600:   #d97706;

  --ro-section-bg:  #f8faff;   /* light-blue section background */
  --ro-white:       #ffffff;
  --ro-ink:         #1f2937;   /* body text */
  --ro-ink-soft:    #4b5563;
  --ro-muted:       #6b7280;
  --ro-line:        #e5e7eb;   /* hairline borders */
  --ro-line-soft:   #eef2f7;

  /* review-band brand tints */
  --ro-trustpilot:  #00b67a;
  --ro-reviewsio:   #103178;

  /* --- Type --- */
  --ro-font: 'Jost', 'PT Sans', 'Raleway', 'Roboto', system-ui, -apple-system, Segoe UI, sans-serif;

  /* type scale */
  --ro-fs-xs:   11px;
  --ro-fs-sm:   13px;
  --ro-fs-base: 15px;
  --ro-fs-md:   17px;
  --ro-fs-lg:   20px;
  --ro-fs-xl:   24px;
  --ro-fs-2xl:  30px;   /* section h2 desktop */
  --ro-fs-3xl:  40px;
  --ro-fs-hero: clamp(34px, 5vw, 64px);

  --ro-fw-normal: 400;
  --ro-fw-medium: 500;
  --ro-fw-semi:   600;
  --ro-fw-bold:   700;

  /* --- Spacing --- */
  --ro-gap-1: 4px;
  --ro-gap-2: 8px;
  --ro-gap-3: 12px;
  --ro-gap-4: 16px;
  --ro-gap-5: 24px;
  --ro-gap-6: 32px;
  --ro-gap-8: 48px;
  --ro-section-y: 60px;          /* vertical rhythm between sections (mb-[60px]) */
  --ro-container: 1400px;        /* .container-x max-width */

  /* --- Radius / shadow --- */
  --ro-radius-sm: 8px;
  --ro-radius:    12px;          /* cards rounded-xl */
  --ro-radius-lg: 16px;
  --ro-radius-full: 9999px;
  --ro-shadow-sm: 0 1px 3px rgba(16,49,120,.08);
  --ro-shadow:    0 4px 16px rgba(16,49,120,.10);
  --ro-shadow-md: 0 8px 28px rgba(16,49,120,.14);

  --ro-header-h: 64px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body.roidocean {
  margin: 0;
  font-family: var(--ro-font);
  font-size: var(--ro-fs-base);
  color: var(--ro-ink);
  background: var(--ro-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.roidocean h1, .roidocean h2, .roidocean h3, .roidocean h4 {
  font-family: var(--ro-font);
  color: var(--ro-navy);
  font-weight: var(--ro-fw-bold);
  line-height: 1.15;
  margin: 0 0 .5em;
}

.roidocean a { color: var(--ro-navy); text-decoration: none; }
.roidocean a:hover { color: var(--ro-orange); }
.roidocean img { max-width: 100%; height: auto; display: block; }

/* container */
.ro-container {
  width: 100%;
  max-width: var(--ro-container);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (max-width: 640px){
  .ro-container { padding-left: 1rem; padding-right: 1rem; }
}

/* section heading (amber pill + navy h2) — matches source */
.ro-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.ro-sec-head .ro-sec-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ro-sec-head .ro-sec-pill {
  width: 4px;
  height: 28px;
  border-radius: var(--ro-radius-full);
  background: var(--ro-orange);
  flex-shrink: 0;
}
.ro-sec-head h2 {
  font-size: var(--ro-fs-2xl);
  color: var(--ro-navy);
  line-height: 1;
  margin: 0;
}
@media (max-width: 640px){ .ro-sec-head h2 { font-size: var(--ro-fs-lg); } }
.ro-sec-head .ro-viewall {
  font-size: var(--ro-fs-sm);
  color: var(--ro-orange);
  font-weight: var(--ro-fw-medium);
}
.ro-sec-head .ro-viewall:hover { color: var(--ro-orange-600); }

/* ============================================================
   Primitives — buttons / badges / cards
   ============================================================ */
.ro-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--ro-font);
  font-weight: var(--ro-fw-semi);
  font-size: var(--ro-fs-sm);
  line-height: 1;
  padding: 11px 20px;
  border-radius: var(--ro-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s, transform .05s;
}
.ro-btn:active { transform: translateY(1px); }
.ro-btn-primary { background: var(--ro-orange); color: #fff; }
.ro-btn-primary:hover { background: var(--ro-orange-600); color: #fff; }
.ro-btn-navy { background: var(--ro-navy); color: #fff; }
.ro-btn-navy:hover { background: var(--ro-navy-700); color: #fff; }
.ro-btn-ghost { background: #fff; color: var(--ro-navy); border-color: var(--ro-line); }
.ro-btn-ghost:hover { border-color: var(--ro-orange); color: var(--ro-orange); }
.ro-btn-block { width: 100%; }

/* badges */
.ro-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--ro-fs-xs);
  font-weight: var(--ro-fw-bold);
  padding: 3px 8px;
  border-radius: var(--ro-radius-sm);
  line-height: 1;
}
.ro-badge-new   { background: #10b981; color: #fff; }
.ro-badge-bulk  { background: rgba(255,255,255,.95); color: var(--ro-amber-600); box-shadow: var(--ro-shadow-sm); backdrop-filter: blur(4px); }
.ro-badge-flag  { background: rgba(255,255,255,.95); color: #374151; box-shadow: var(--ro-shadow-sm); backdrop-filter: blur(4px); }

/* chips (qty-tier discount) */
.ro-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px;
  font-weight: var(--ro-fw-bold);
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--ro-amber-50);
  color: var(--ro-amber-600);
  white-space: nowrap;
  line-height: 1.3;
}
.ro-chip .ro-chip-x { color: var(--ro-navy); }

/* generic card surface */
.ro-card {
  background: #fff;
  border-radius: var(--ro-radius);
  box-shadow: var(--ro-shadow-sm);
  overflow: hidden;
  border: 1px solid var(--ro-line-soft);
}

/* utility */
.ro-sr-only {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.ro-section { margin-bottom: var(--ro-section-y); }