/* HeardFeed design tokens — mirror these in the host panel (Scott).
   Source: Anthony final logo (Cindy vector rebuild 2026-11-06).
   Do not rename variables without coordinating with Scott. */

:root {
  /* Surfaces */
  --hf-bg: #0B0B0D;
  --hf-bg-elevated: #121216;
  --hf-bg-card: #16161C;
  --hf-bg-card-hover: #1C1C24;
  --hf-border: rgba(244, 241, 239, 0.10);
  --hf-border-strong: rgba(244, 241, 239, 0.18);

  /* Text */
  --hf-text: #F4F1EF;
  --hf-text-muted: #B0ADAC;
  --hf-text-dim: #5A5756;
  --hf-text-on-accent: #0B0B0D;

  /* Brand gradient stops (H mark) */
  --hf-cyan: #52C6FC;
  --hf-blue: #2F8CF5;
  --hf-indigo: #2E38F0;
  --hf-coral: #FDA653;
  --hf-salmon: #FB5F5A;
  --hf-magenta: #E00BB0;
  --hf-wave-a: #D4A8FF;
  --hf-wave-b: #FF8FB0;
  --hf-wave-c: #FF5A7A;
  --hf-feed-a: #FF7B78;
  --hf-feed-b: #FF3DB8;

  /* Gradients */
  --hf-gradient-brand: linear-gradient(
    105deg,
    var(--hf-cyan) 0%,
    var(--hf-blue) 28%,
    var(--hf-indigo) 46%,
    var(--hf-magenta) 68%,
    var(--hf-salmon) 86%,
    var(--hf-coral) 100%
  );
  --hf-gradient-wordmark: linear-gradient(
    90deg,
    var(--hf-feed-a) 0%,
    var(--hf-feed-b) 100%
  );
  --hf-gradient-wave: linear-gradient(
    90deg,
    var(--hf-wave-a),
    var(--hf-wave-b),
    var(--hf-wave-c)
  );

  /* Live / status */
  --hf-live: #FF2D55;
  --hf-live-glow: rgba(255, 45, 85, 0.45);
  --hf-ok: #3DDC97;
  --hf-warn: #FFB020;

  /* Type */
  --hf-font-display: "Poppins", "Inter", system-ui, sans-serif;
  --hf-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hf-fw-regular: 400;
  --hf-fw-medium: 500;
  --hf-fw-semibold: 600;
  --hf-fw-bold: 700;
  --hf-fw-black: 800;

  /* Radii / space */
  --hf-radius-sm: 8px;
  --hf-radius: 14px;
  --hf-radius-lg: 16px;
  --hf-radius-pill: 999px;
  --hf-space-1: 4px;
  --hf-space-2: 8px;
  --hf-space-3: 12px;
  --hf-space-4: 16px;
  --hf-space-5: 24px;
  --hf-space-6: 32px;
  --hf-space-7: 48px;
  --hf-space-8: 72px;
  --hf-tap: 48px;

  /* Shadows */
  --hf-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
  --hf-shadow-glow: 0 0 40px rgba(47, 140, 245, 0.22);

  /* Layout */
  --hf-max: 1120px;
  --hf-gutter: clamp(16px, 4vw, 32px);
}