/* ============================================================================
   CruiseFeed — canonical design tokens + shared primitives.
   SINGLE SOURCE OF TRUTH for brand colors, fonts and shared component styles.

   Loaded by:
     - index.html / playground.html (the marketing site)
     - the generated /stats/ pages (cruise-pipeline/cruise_pipeline/stats_site.py
       emits <link href="https://cruisefeed.io/assets/theme.css">)

   NOTE: index.html's tailwind.config color map MIRRORS the hexes below. Tailwind
   (CDN build) needs literal hexes so opacity utilities like `bg-cyan/20` work, so
   it can't read these CSS variables. If you change a brand color, update BOTH this
   file and the `colors` block in index.html.
   ========================================================================== */

:root {
  --ink:       #07111F;
  --navy:      #0C2340;
  --ocean:     #102E55;
  --teal:      #0E7490;
  --cyan:      #06B6D4;
  --aqua:      #22D3EE;
  --coral:     #FF6B5B;
  --coraldark: #E5503F;
  --gold:      #E7A93A;
  --mist:      #F2F7FB;
  --fog:       #E6EEF5;
  --muted:     #475569;
}

/* Base ---------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Cabinet Grotesk', 'Manrope', sans-serif; }
::selection { background: var(--coral); color: #fff; }

/* Gradient text ------------------------------------------------------------- */
.grad-text {
  background: linear-gradient(100deg, var(--cyan) 0%, var(--aqua) 45%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Buttons ------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem; font-weight: 700;
  border-radius: 9999px;
  transition: transform .25s cubic-bezier(.16,.8,.3,1), box-shadow .25s, background-color .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-coral { background: var(--coral); color: #fff; box-shadow: 0 10px 30px -10px rgba(255,107,91,.7); }
.btn-coral:hover { background: var(--coraldark); box-shadow: 0 16px 40px -12px rgba(255,107,91,.85); }

/* Hover-lift card ----------------------------------------------------------- */
.card-lift { transition: transform .35s cubic-bezier(.16,.8,.3,1), box-shadow .35s, border-color .35s; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(12,35,64,.35); }

/* Animated underline link --------------------------------------------------- */
.underline-link { position: relative; }
.underline-link::after {
  content: ''; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0;
  background: var(--cyan); transition: width .3s ease;
}
.underline-link:hover::after { width: 100%; }