/* ==========================================================================
   tiktok banner — design tokens
   Original palette from docs/05_VISUAL_DIRECTION.md, tuned for AA contrast.
   No remote fonts, no framework, no TikTok design assets.
   ========================================================================== */

:root {
  /* surfaces */
  --bg: #0b0f16;
  --bg-deep: #070a0f;
  --surface: #141b24;
  --surface-2: #19212b;
  --surface-3: #222d38;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* text */
  --text: #f5f7fa;
  --muted: #aab8c4;
  --faint: #8695a3;

  /* accents */
  --cyan: #46dbd6;
  --cyan-ink: #04211f;
  --coral: #ff6a86;
  --violet: #a78bfa;
  --amber: #f2b75c;
  --green: #7ce3a8;

  /* glow fills */
  --cyan-soft: rgba(70, 219, 214, 0.12);
  --coral-soft: rgba(255, 106, 134, 0.12);
  --violet-soft: rgba(167, 139, 250, 0.12);
  --amber-soft: rgba(242, 183, 92, 0.12);

  /* geometry */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --wrap: 1120px;
  --gutter: clamp(18px, 4vw, 40px);
  --section-y: clamp(56px, 8vw, 104px);

  --font: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 40px -28px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 24px 50px -30px rgba(0, 0, 0, 0.95);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}