/* CoinStats Design System — vendored for the standalone /api/ deploy.
 *
 * This is the design system's global stylesheet (tokens + webfonts + component
 * classes), recovered verbatim from the design handoff (preview-standalone.html)
 * so the page is fully self-contained on Cloudflare. The two variable webfonts
 * are self-hosted from assets/fonts/; Roboto (header "/API" lockup) uses a single
 * Latin subset instead of the original 9 unicode-range files.
 *
 * Production source of truth remains coinstats-web (styles/design-system/*).
 * Do not hand-edit token values here — change them upstream and re-vendor. */

/* CoinStats Design System — global entry point.
 * Consumers link THIS one file. Imports tokens, fonts, and component styles.
 * Light mode only (current scope). */

/* CoinStats webfonts — Inter (body) + Outfit (display).
 * Real families used across coinstats.app. */

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("assets/fonts/Outfit.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
/* metric-matched fallbacks (mirror coinstats-web FontFaces.jsx) */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%;
}
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial");
  ascent-override: 100.18%; descent-override: 26.05%; line-gap-override: 0%; size-adjust: 99.82%;
}

/* CoinStats Design System — Color tokens (light mode)
 * Source of truth: coinstats-web styles/design-system/tokens
 * (color-palette-value.css + semantic-colors.css, .light-mode).
 * Scoped to the affiliate landing surface. */

:root {
  /* ---- Brand ---- */
  --cs-orange:        #ff9332;  /* primary brand / warm accent */
  --cs-orange-soft:   #ff9e47;  /* hover */
  --cs-orange-deep:   #ea5237;
  --cs-pink:          #ff6085;  /* gradient mid */
  --cs-magenta:       #e548ff;  /* gradient end */
  --cs-magenta-vivid: #e751fe;
  --cs-purple:        #935deb;  /* secondary accent */
  --cs-purple-ink:    #3e355b;  /* dark surface + headings on light */
  --cs-purple-ink-deep: #2c2439;/* deepest heading */

  /* ---- Light surfaces ---- */
  --cs-bg:            #ffffff;
  --cs-surface-lilac:    #f4effd;  /* primary section well */
  --cs-surface-bluewhite:#fbfbff;  /* alternating section well */
  --cs-surface-lilac-2:  #f4f3fc;  /* badge background */
  --cs-card-frost:    rgb(255 255 255 / 70%);  /* hero offer card */

  /* ---- Text (light) ---- */
  --cs-text-strong:   #333333;  /* e80 */
  --cs-text:          #4c4c4c;  /* e70 — body */
  --cs-text-muted:    #666666;  /* e60 */
  --cs-text-subtle:   #7f7f7f;  /* e50 — strikethrough / meta */
  --cs-text-on-dark:  #ffffff;

  /* ---- Semantic ---- */
  --cs-green:         #34b349;
  --cs-red:           #f02934;

  /* ---- Neutral gray ramp (light) ---- */
  --cs-gray-05: #f2f2f2;
  --cs-gray-10: #e5e5e5;
  --cs-gray-15: #d9d9d9;
  --cs-gray-20: #cccccc;
  --cs-gray-40: #999999;
  --cs-gray-60: #666666;
  --cs-gray-80: #333333;

  /* ---- Gradients (exact stops from source) ---- */
  --cs-gradient-percent:  linear-gradient(90deg, var(--cs-magenta) 0%, var(--cs-pink) 50%, var(--cs-orange) 100%);
  --cs-gradient-heading:  linear-gradient(90deg, var(--cs-magenta) 30.44%, var(--cs-pink) 50.8%, var(--cs-orange) 71.16%);
  --cs-gradient-heading-warm: linear-gradient(90deg, var(--cs-orange) 30.44%, var(--cs-pink) 50.8%, var(--cs-magenta) 71.16%);
  --cs-gradient-button:   linear-gradient(71deg, var(--cs-magenta) 10.67%, var(--cs-pink) 55.09%);
  --cs-gradient-button-2: linear-gradient(90deg, var(--cs-purple) 0%, var(--cs-magenta-vivid) 100%);
  --cs-gradient-icon:     radial-gradient(141.92% 141.42% at 100% 0%, var(--cs-orange) 0%, var(--cs-pink) 50%, var(--cs-magenta) 100%);

  /* soft ambient hero glows (radial falloff, used at ~15% opacity) */
  --cs-glow-magenta: radial-gradient(50% 50% at 50% 50%, #e548ff 0%, rgb(229 72 255 / 80%) 60%, rgb(229 72 255 / 0%) 100%);
  --cs-glow-orange:  radial-gradient(50% 50% at 50% 50%, #ff9332 0%, rgb(255 147 50 / 80%) 60%, rgb(255 147 50 / 0%) 100%);

  /* faint section panel wash behind product art */
  --cs-wash-tri: linear-gradient(256deg, rgb(255 147 50 / 7%) 3.36%, rgb(255 96 133 / 7%) 51.05%, rgb(229 72 255 / 7%) 98.75%);
}

/* CoinStats Design System — Typography tokens
 * Outfit = display / headings / emphasis · Inter = body.
 * Scale + line-heights lifted verbatim from coinstats-web
 * (font-size-tokens.css + line-height-tokens.css). */

:root {
  --cs-font-display: "Outfit", "Outfit Fallback", sans-serif; /* headings, %off, prices */
  --cs-font-body:    "Inter", "Inter Fallback", sans-serif;   /* body, labels, tweets */

  /* weights */
  --cs-fw-regular: 400;
  --cs-fw-medium: 500;
  --cs-fw-semibold: 600;
  --cs-fw-bold: 700;

  /* type scale (font-size / line-height) */
  --cs-fs-9: 9px;   --cs-lh-9: 12px;
  --cs-fs-10: 10px; --cs-lh-10: 14px;
  --cs-fs-11: 11px; --cs-lh-11: 16px;
  --cs-fs-12: 12px; --cs-lh-12: 17px;
  --cs-fs-13: 13px; --cs-lh-13: 18px;
  --cs-fs-14: 14px; --cs-lh-14: 20px;
  --cs-fs-15: 15px; --cs-lh-15: 22px;
  --cs-fs-16: 16px; --cs-lh-16: 24px;
  --cs-fs-18: 18px; --cs-lh-18: 26px;
  --cs-fs-20: 20px; --cs-lh-20: 28px;
  --cs-fs-23: 23px; --cs-lh-23: 32px;
  --cs-fs-26: 26px; --cs-lh-26: 36px;
  --cs-fs-29: 29px; --cs-lh-29: 38px;
  --cs-fs-32: 32px; --cs-lh-32: 42px;
  --cs-fs-36: 36px; --cs-lh-36: 46px;
  --cs-fs-41: 41px; --cs-lh-41: 50px;
  --cs-fs-46: 46px; --cs-lh-46: 60px;
  --cs-fs-58: 58px; --cs-lh-58: 68px;
  --cs-fs-68: 68px; --cs-lh-68: 82px;

  /* oversized display (hero %OFF) */
  --cs-fs-percent: 152px;
  --cs-fs-off: 110px;
}

/* CoinStats Design System — Spacing, radii & layout tokens
 * Gap + radius ladders from coinstats-web (gap-tokens / radius-tokens),
 * plus the larger marketing radii used on the affiliate surface. */

:root {
  /* gap / spacing ladder */
  --cs-gap-2: 2px;   --cs-gap-4: 4px;   --cs-gap-6: 6px;   --cs-gap-8: 8px;
  --cs-gap-10: 10px; --cs-gap-12: 12px; --cs-gap-16: 16px; --cs-gap-18: 18px;
  --cs-gap-20: 20px; --cs-gap-22: 22px; --cs-gap-24: 24px; --cs-gap-28: 28px;
  --cs-gap-30: 30px; --cs-gap-32: 32px; --cs-gap-40: 40px; --cs-gap-48: 48px;
  --cs-gap-60: 60px; --cs-gap-64: 64px; --cs-gap-100: 100px;

  /* radii — app ladder */
  --cs-r-4: 4px;  --cs-r-6: 6px;  --cs-r-8: 8px;  --cs-r-12: 12px;
  --cs-r-16: 16px; --cs-r-18: 18px; --cs-r-20: 20px; --cs-r-24: 24px;
  --cs-r-28: 28px; --cs-r-32: 32px;

  /* radii — marketing surfaces */
  --cs-r-card: 40px;       /* benefit cards */
  --cs-r-influencer: 48px; /* influencer card */
  --cs-r-hero: 58px;       /* hero offer card */
  --cs-r-banner: 60px;     /* section banners / lottie panels */
  --cs-r-pill: 80px;       /* gradient CTA buttons */
  --cs-r-round: 999px;

  /* section rhythm */
  --cs-section-pad: 240px;     /* desktop vertical section padding */
  --cs-section-pad-md: 160px;
  --cs-maxw-banner: 1680px;
}

/* CoinStats Design System — Effects (light)
 * The affiliate surface leans on gradients + soft glows rather than
 * hard shadows. Values copied from the real component SCSS. */

:root {
  /* big soft drop shadow under floating product art (TrackingExperience) */
  --cs-shadow-art: drop-shadow(70.51px 70.51px 117.517px rgb(62 53 91 / 30%));

  /* gentle card lift */
  --cs-shadow-card: 0 18px 50px rgb(62 53 91 / 10%), 0 4px 12px rgb(62 53 91 / 6%);

  /* pulsing glow on the animated primary CTA (keyframes in components.css) */
  --cs-glow-cta-rest: 0 0 20px rgb(255 96 133 / 47%), 0 0 40px rgb(255 96 133 / 28%), 0 0 60px rgb(229 72 255 / 19%);
  --cs-glow-cta-peak: 0 0 30px rgb(255 96 133 / 75%), 0 0 60px rgb(255 96 133 / 56%), 0 0 90px rgb(229 72 255 / 38%);

  /* frosted header / glass */
  --cs-blur-glass: blur(18px) saturate(160%);

  /* motion */
  --cs-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --cs-dur: 200ms;
}

/* CoinStats Design System — component styles (light)
 * Class-based primitives compiled from the real coinstats-web component
 * SCSS, rewritten against the --cs-* design tokens. */

/* ---------- base ---------- */
.cs-root { font-family: var(--cs-font-body); color: var(--cs-text); background: var(--cs-bg); }
.cs-root *, .cs-root *::before, .cs-root *::after { box-sizing: border-box; }

/* ============================================================
   Button  (.cs-btn)
   ============================================================ */
.cs-btn {
  position: relative; overflow: hidden; cursor: pointer; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--cs-r-pill); padding: 16px 48px; height: 64px;
  background: none; transition: transform var(--cs-dur) var(--cs-ease);
  font-family: var(--cs-font-display); font-weight: var(--cs-fw-medium);
  font-size: var(--cs-fs-23); line-height: var(--cs-lh-23);
}
.cs-btn:hover { transform: translateY(-2px); }
.cs-btn::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: opacity .25s var(--cs-ease); }
.cs-btn > * { position: relative; z-index: 1; white-space: nowrap; }
.cs-btn--primary::before { background: var(--cs-gradient-button); }
.cs-btn--primary { color: var(--cs-bg); }
.cs-btn--secondary::before { background: var(--cs-gradient-button-2); }
.cs-btn--secondary { color: var(--cs-text-on-dark); }
.cs-btn--neutral { background: var(--cs-bg) !important; color: #181032; }
.cs-btn--neutral::before { background: none; }
.cs-btn--animated.cs-btn--primary { animation: cs-cta-glow 2s ease-in-out infinite; }
.cs-btn--sm { height: 48px; border-radius: var(--cs-r-20); padding: 12px 30px; font-size: var(--cs-fs-20); line-height: var(--cs-lh-20); }
.cs-btn--header { height: 44px; border-radius: var(--cs-r-20); padding: 10px 24px; font-size: var(--cs-fs-16); line-height: var(--cs-lh-16); }
.cs-btn--header:hover { transform: scale(1.02); }
.cs-btn:disabled { cursor: default; box-shadow: none; animation: none; }
.cs-btn:disabled::before { background: var(--cs-gray-10) !important; opacity: 1; }
@keyframes cs-cta-glow {
  0%,100% { box-shadow: var(--cs-glow-cta-rest); }
  50%     { box-shadow: var(--cs-glow-cta-peak); }
}
@media (prefers-reduced-motion: reduce) { .cs-btn--animated { animation: none !important; } }

/* ============================================================
   Badge  (.cs-badge)
   ============================================================ */
.cs-badge {
  display: inline-block; width: fit-content;
  padding: 6px 20px; border-radius: var(--cs-r-24);
  background: var(--cs-surface-lilac-2); color: var(--cs-purple-ink);
  font-family: var(--cs-font-body); font-weight: var(--cs-fw-medium);
  font-size: var(--cs-fs-18); line-height: var(--cs-lh-18);
}
.cs-badge--on-dark { background: rgb(255 255 255 / 20%); color: var(--cs-text-on-dark); opacity: 0.9; }

/* ============================================================
   Gradient heading  (.cs-heading)
   ============================================================ */
.cs-heading {
  font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold);
  color: var(--cs-purple-ink-deep); text-align: center;
  font-size: clamp(0.75rem, 4vw, 4.25rem); line-height: clamp(1rem, 5vw, 5rem);
}
.cs-heading b { background: var(--cs-gradient-heading); background-clip: text; -webkit-text-fill-color: transparent; }
.cs-heading--on-dark { color: var(--cs-text-on-dark); }
.cs-heading--on-dark b { background: var(--cs-gradient-heading-warm); background-clip: text; -webkit-text-fill-color: transparent; }

/* ============================================================
   Account-type gradient icon  (.cs-plan-icon)
   ============================================================ */
.cs-plan-icon { border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: var(--cs-gradient-icon); }
.cs-plan-icon svg { width: 48px; height: 48px; color: var(--cs-text-on-dark); flex-shrink: 0; }
.cs-plan-icon--sm { width: 40px; height: 40px; } .cs-plan-icon--sm svg { width: 40px; height: 40px; }

/* ============================================================
   Percent-off display  (.cs-percent)
   ============================================================ */
.cs-percent { display: inline-flex; align-items: baseline; height: fit-content; }
.cs-percent__num {
  font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold);
  font-size: var(--cs-fs-percent); line-height: var(--cs-fs-percent);
  background: var(--cs-gradient-percent); background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.cs-percent__off {
  font-family: var(--cs-font-body); font-weight: var(--cs-fw-bold); font-style: italic;
  color: var(--cs-purple-ink); font-size: var(--cs-fs-off); line-height: var(--cs-fs-off); margin-left: -24px;
}

/* ============================================================
   Price display  (.cs-price)
   ============================================================ */
.cs-price { display: inline-flex; align-items: center; gap: var(--cs-gap-10); }
.cs-price__old { color: var(--cs-text-subtle); text-decoration: line-through; font-family: var(--cs-font-display); font-weight: var(--cs-fw-medium); font-size: var(--cs-fs-23); line-height: var(--cs-lh-23); }
.cs-price__new { color: var(--cs-purple-ink); font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); font-size: var(--cs-fs-23); line-height: var(--cs-lh-23); }
.cs-price__period { color: var(--cs-text); font-family: var(--cs-font-body); font-weight: var(--cs-fw-regular); font-size: var(--cs-fs-18); line-height: var(--cs-lh-18); }

/* ============================================================
   Influencer card  (.cs-influencer)
   ============================================================ */
.cs-influencer { display: inline-flex; }
.cs-influencer__inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--cs-gap-20);
  background: var(--cs-purple-ink); border-radius: var(--cs-r-influencer); padding: 38px; transform: rotate(4deg); min-height: 362px; max-width: 278px;
}
.cs-influencer__by { color: var(--cs-text-on-dark); font-family: var(--cs-font-body); font-weight: var(--cs-fw-semibold); font-size: var(--cs-fs-14); line-height: var(--cs-lh-14); text-align: center; }
.cs-influencer__photo { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; background: rgb(255 255 255 / 10%); }
.cs-influencer__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-influencer__name { display: flex; align-items: center; gap: var(--cs-gap-4); justify-content: center; color: var(--cs-text-on-dark); font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: var(--cs-fs-20); line-height: var(--cs-lh-20); text-align: center; max-width: 186px; }

/* ============================================================
   Benefit card  (.cs-benefit)
   ============================================================ */
.cs-benefit { position: relative; overflow: hidden; width: 100%; max-width: 520px; padding: 2.5rem 2rem; border-radius: var(--cs-r-card); background: var(--cs-purple-ink); }
.cs-benefit::before { content: ""; position: absolute; width: 670px; height: 310px; border-radius: 670px; transform: translateX(-50%); left: 50%; bottom: -38%; z-index: 0; }
.cs-benefit--insights::before   { background: radial-gradient(50% 50% at 50% 50%, rgb(255 133 24 / 70%) 0%, rgb(255 133 24 / 0%) 100%); }
.cs-benefit--allocation::before { background: radial-gradient(50% 50% at 50% 50%, rgb(255 96 133 / 70%) 0%, rgb(255 96 133 / 0%) 100%); }
.cs-benefit--performance::before{ background: radial-gradient(50% 50% at 50% 50%, rgb(229 72 255 / 70%) 0%, rgb(229 72 255 / 0%) 100%); }
.cs-benefit__head { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.cs-benefit__name { color: var(--cs-text-on-dark); font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: var(--cs-fs-29); line-height: var(--cs-lh-29); max-width: 174px; }
.cs-benefit__art { margin-top: 4rem; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--cs-r-16); position: relative; z-index: 1; object-fit: contain; }

/* ============================================================
   Tweet card  (.cs-tweet)
   ============================================================ */
.cs-tweet { display: flex; flex-direction: column; justify-content: space-between; gap: var(--cs-gap-4);
  width: 284px; min-height: 180px; padding: 16px; border-radius: 17px; background: var(--cs-bg); }
.cs-tweet__head { display: flex; align-items: center; gap: var(--cs-gap-8); margin: 2px 0 12px; }
.cs-tweet__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cs-tweet__name { display: flex; align-items: center; gap: var(--cs-gap-2); color: var(--cs-text-strong); font-family: var(--cs-font-body); font-weight: var(--cs-fw-medium); font-size: var(--cs-fs-13); line-height: var(--cs-lh-13); }
.cs-tweet__handle { color: var(--cs-text-muted); font-family: var(--cs-font-body); font-weight: var(--cs-fw-medium); font-size: var(--cs-fs-10); line-height: var(--cs-lh-10); }
.cs-tweet__body { color: var(--cs-text-strong); font-family: var(--cs-font-body); font-weight: var(--cs-fw-regular); font-size: var(--cs-fs-13); line-height: var(--cs-lh-13); overflow-wrap: break-word; }
.cs-tweet__date { color: var(--cs-text-subtle); font-family: var(--cs-font-body); font-size: var(--cs-fs-10); line-height: var(--cs-lh-10); }

/* ============================================================
   Section helpers
   ============================================================ */
.cs-section { width: 100%; }
.cs-section--lilac     { background: var(--cs-surface-lilac); }
.cs-section--bluewhite { background: var(--cs-surface-bluewhite); }
.cs-section--ink       { background: var(--cs-purple-ink); }
.cs-panel-wash { border-radius: var(--cs-r-banner); background: var(--cs-wash-tri); }

/* ---- Roboto 400 (Latin subset) — header "/API" lockup only ---- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/Roboto-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;
}