/* Bangers landing styles - flattened from the design-system tokens */
/* Bangers webfonts — Google Fonts (see readme: substitute self-hosted files when available) */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* Bangers color tokens — "Signal Pop": bright accents on warm white; first-class dark mode. */
:root {
  /* Brand accents */
  --blurple: #5B4DFF;         /* primary action, links, brand */
  --blurple-hover: #4A3DE8;
  --blurple-active: #3E33C9;
  --blurple-soft: #B8B0FF;    /* on dark surfaces */
  --blurple-tint: #F1EFFE;    /* chip/stat backgrounds */
  --blurple-tint-text: #4A3DE8;
  --blurple-deep: #2A2740;    /* chips on ink surfaces */
  --coral: #FF5C38;           /* energy, highlights, warnings-with-attitude */
  --coral-hover: #EE4B27;
  --coral-tint: #FFEDE7;
  --coral-tint-text: #D6431F;
  --amber: #FFB02E;           /* underlines, tertiary accent */
  --amber-tint: #FFF4DC;
  --amber-tint-text: #8F6400;
  --gradient-banger: linear-gradient(120deg, #5B4DFF, #FF5C38 55%, #FFB02E);

  /* Neutrals */
  --ink: #14121F;
  --paper: #FBFAF7;
  --wash: #F6F5F1;
  --card: #FFFFFF;
  --border: #E6E3DC;
  --border-soft: #ECE9E2;

  /* Text */
  --text-primary: var(--ink);
  --text-body: #39354A;
  --text-muted: #5A5665;
  --text-faint: #8A8694;

  /* Surfaces */
  --surface-page: var(--paper);
  --surface-card: var(--card);
  --surface-sunken: var(--wash);
  --surface-ink: var(--ink);      /* the dark "agent" panel, both themes */

  /* Action aliases */
  --accent: var(--blurple);
  --accent-hover: var(--blurple-hover);
  --accent-contrast: #FFFFFF;

  /* Semantic */
  --success: #2E7D32;
  --success-tint: #EAF7E9;
  --danger: #D6431F;
  --danger-tint: #FFEDE7;

  /* Channel accents (network identity colors) */
  --ch-x: #14121F;
  --ch-linkedin: #0A66C2;
  --ch-instagram: #E1306C;
  --ch-tiktok: #14121F;
  --ch-youtube: #FF0000;
  --ch-facebook: #1877F2;
  --ch-bluesky: #0085FF;
  --ch-telegram: #229ED9;
  --ch-mastodon: #6364FF;
  --ch-wordpress: #21759B;
  --ch-threads: #14121F;
  --ch-pinterest: #BD081C;
  --ch-reddit: #FF4500;
}

[data-theme="dark"] {
  --blurple: #6C5FFF;
  --blurple-hover: #7D71FF;
  --blurple-active: #5B4DFF;
  --blurple-tint: #262040;
  --blurple-tint-text: #B8B0FF;
  --coral-tint: #3A2119;
  --coral-tint-text: #FF8A6B;
  --amber-tint: #33290F;
  --amber-tint-text: #FFC963;

  --paper: #0F0D18;
  --wash: #14121F;
  --card: #1A1726;
  --border: #2A2740;
  --border-soft: #241F35;

  --text-primary: #F5F3FC;
  --text-body: #C9C4D8;
  --text-muted: #9992AC;
  --text-faint: #6E6884;

  --surface-ink: #14121F;
  --accent-contrast: #FFFFFF;

  --success: #7BD67F;
  --success-tint: #16281A;
  --danger: #FF8A6B;
  --danger-tint: #3A2119;

  --ch-x: #F5F3FC;
  --ch-tiktok: #F5F3FC;
  --ch-threads: #F5F3FC;
}

/* Bangers type tokens.
   Display: Bricolage Grotesque 800 — headlines, big numbers.
   UI/body: Archivo — everything else.
   Mono: IBM Plex Mono — meta, labels, timestamps, kickers. */
:root {
  --font-display: "Bricolage Grotesque", "Archivo", sans-serif;
  --font-ui: "Archivo", sans-serif;
  --font-mono: "Space Grotesk", "Archivo", sans-serif;

  --text-hero: 64px;      /* landing hero; 800, line-height 1.0 */
  --text-display: 48px;   /* section headlines; 800 */
  --text-h1: 36px;
  --text-h2: 28px;
  --text-h3: 22px;
  --text-lg: 19px;        /* lede / subheads */
  --text-md: 15.5px;      /* body */
  --text-sm: 13.5px;      /* dense UI, card body */
  --text-meta: 12px;      /* mono meta */
  --text-micro: 11px;     /* mono micro labels, chips */

  --tracking-display: -0.025em;
  --tracking-mono: 0.13em;      /* label font is uppercase + wide-tracked */
  --leading-display: 1.0;
  --leading-body: 1.55;
}

/* Bangers spacing — 4px base. */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px;
  --sp-16: 64px; --sp-20: 80px;
  --container: 1120px;    /* landing content width */
  --gutter: 32px;
}

/* Bangers radii, shadows, motion. */
:root {
  --r-card: 14px;
  --r-control: 10px;   /* inputs, small tiles */
  --r-chip: 6px;       /* schedule chips */
  --r-pill: 100px;     /* buttons, badges */

  --shadow-card: 0 2px 8px rgba(20, 18, 31, 0.05);
  --shadow-lift: 0 8px 24px rgba(20, 18, 31, 0.10);
  --shadow-glow-accent: 0 4px 16px rgba(91, 77, 255, 0.35);

  --ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-med: 240ms;

  --ring: 0 0 0 3px rgba(91, 77, 255, 0.30);
}
[data-theme="dark"] {
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow-accent: 0 4px 18px rgba(108, 95, 255, 0.45);
}

/* Bangers base element styles. */
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; color: var(--text-primary); letter-spacing: var(--tracking-display); line-height: 1.05; margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: var(--blurple-tint); }
@keyframes bangers-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }