/* ==========================================================================
   HOTBOT Holder Early Access: design tokens
   Values mirror usehotbot.com (surfaces, ink, brand orange, agent colors,
   system type stack, control radius) so this page reads as first-party.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #0b0c10;
  --bg-deep: #08090c;
  --surface: #14151a;
  --surface-raised: #1b1c21;
  --surface-sunken: #0f1014;
  --surface-glass: rgba(20, 21, 26, 0.72);
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.12);
  --line-bright: rgba(255, 255, 255, 0.2);

  /* Ink */
  --ink: #f0eff4;
  --ink-soft: #ccced7;
  --muted: #a3a3ad;
  --muted-2: #9498a5;
  --dim: #868a96;
  --heading-dim: #93949d;

  /* Brand */
  --brand: #f47a38;
  --brand-hot: #ff8b30;
  --brand-soft: #ffb27d;
  --brand-ink: #21130b;
  --brand-glow: rgba(244, 122, 56, 0.3);
  --brand-wash: rgba(244, 122, 56, 0.1);

  /* Agent colors (official) */
  --c-research: #e5e8ef;
  --c-sniper: #ef6689;
  --c-hotbot: #f47a38;
  --c-trader: #649af1;
  --c-launch: #68d69b;

  /* Status tones */
  --tone-idle: #5d616d;
  --tone-info: #8fb3f5;
  --tone-pending: #f5b84a;
  --tone-ok: #5fd39a;
  --tone-bad: #f0616d;
  --tone-brand: #f47a38;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --track-display: -0.052em;
  --track-heading: -0.045em;
  --track-tight: -0.02em;
  --track-caps: 0.15em;

  /* Shape */
  --r-control: 1.25em;
  --r-sm: 10px;
  --r-md: 14px;
  --r-card: 20px;
  --r-panel: 24px;
  --r-pill: 999px;

  /* Layout */
  --gutter: 48px;
  --container: min(1180px, 100% - var(--gutter) * 2);
  --container-wide: min(1320px, 100% - var(--gutter) * 2);
  --header-h: 72px;
  --section-y: 128px;

  /* Elevation */
  --shadow-panel: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line);
  --shadow-card: 0 18px 48px -24px rgba(0, 0, 0, 0.75);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.25, 1.35);
  --dur-fast: 0.15s;
  --dur: 0.25s;
  --dur-slow: 0.5s;
}

@media (max-width: 1024px) {
  :root {
    --gutter: 32px;
    --section-y: 104px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --header-h: 64px;
    --section-y: 80px;
  }
}