/* ============================================================================
   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: frontend/tailwind.config.js's color map MIRRORS the hexes below. Tailwind
   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 frontend/tailwind.config.js.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Fonts — SELF-HOSTED from /assets/fonts/.

   These used to be <link>ed from fonts.googleapis.com / api.fontshare.com on every
   page, which disclosed each visitor's IP address to Google and to the Indian Type
   Foundry before any consent was possible. They are now served from our own origin,
   so a page load makes zero third-party requests.

   `font-display: swap` is kept deliberately — it matches the old `&display=swap`
   query, so text still paints immediately in the fallback face and no page has a
   blocking font fetch.

   Manrope and JetBrains Mono are VARIABLE fonts: one file per unicode subset covers
   the whole weight range, which is why there is no file-per-weight here. Cabinet
   Grotesk ships as static instances, so it gets one file per weight.

   Licences (all permit self-hosting):
     Manrope, JetBrains Mono — SIL Open Font License 1.1
     Cabinet Grotesk         — ITF Free Font License (Fontshare)
   --------------------------------------------------------------------------- */

/* Manrope — variable, weights 200-800 */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — variable, weights 100-800 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cabinet Grotesk — static instances (display face; weights 700/800/900 in use) */
@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/cabinet-grotesk-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/cabinet-grotesk-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/cabinet-grotesk-900.woff2') format('woff2');
}

: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%; }

/* ---------------------------------------------------------------------------
   Marketing-page primitives — were copy-pasted verbatim into the inline <style>
   of index.html, cruise-api/index.html and cruise-data/index.html.

   ORDER MATTERS: .reveal must stay BELOW .card-lift. Many cards carry both and
   both set `transition`; the reveal fade has to win, as it did when these rules
   sat in each page's inline <style> (parsed after this file). Hoisting .reveal
   above .card-lift silently kills the fade-in.
   --------------------------------------------------------------------------- */

/* Reveal on scroll — the IntersectionObserver in each page adds .in */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* Grain overlay — needs a positioned, overflow-hidden parent */
.grain::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Code-sample token highlighting (hand-marked-up <span>s in the code blocks) */
.tok-key { color:#67E8F9; } .tok-str { color:#6EE7B7; } .tok-num { color:#FCD34D; }
.tok-pun { color:#64748B; } .tok-brace { color:#94A3B8; }
.tok-verb { color:#FF8A7A; } .tok-com { color:#64748B; font-style:italic; }

/* FAQ accordion (<details>/<summary>) */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }
details[open] .faq-card { border-color: var(--cyan); }