/* ==========================================================================
   chatstaff landing — design tokens
   Palette adapted to ToDesktop structure: violet-led, not sky-dominated.
   ========================================================================== */

:root {
  /* Brand */
  --brand: #5c58ed;
  --brand-deep: #4a46d4;
  --navy: #122d70;
  --sky: #3fa9f5;
  --cyan: #56e1e8;

  /* Surfaces & text */
  --ink: #141414;
  --muted: #656565;
  --ghost: #a4a4a4;
  --white: #ffffff;
  --canvas: #f7f8fb;
  --void: #05061b;
  --surface: #ffffff;
  --surface-soft: #f0f2f7;

  /* Strokes */
  --stroke: rgba(22, 22, 22, 0.06);
  --stroke-muted: rgba(22, 22, 22, 0.12);
  --stroke-light: rgba(255, 255, 255, 0.12);
  --stroke-light-loud: rgba(255, 255, 255, 0.22);

  /* Hero / dark bases */
  --hero-deep: #0a0f2e;
  --hero-navy: #122d70;
  --hero-violet: #5c58ed;
  --hero-cyan: #56e1e8;

  /* Gradients */
  --grad-hero:
    radial-gradient(ellipse 70% 55% at 18% 20%, rgba(92, 88, 237, 0.45), transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 12%, rgba(86, 225, 232, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 45% at 70% 80%, rgba(18, 45, 112, 0.55), transparent 65%),
    linear-gradient(165deg, var(--hero-deep) 0%, var(--hero-navy) 48%, #0c1238 100%);

  --grad-channels:
    linear-gradient(115deg, #122d70 0%, #5c58ed 48%, #3fa9f5 100%);

  --grad-final-cta:
    linear-gradient(135deg, #e8e6ff 0%, #f0f7ff 42%, #e4f9fb 100%);

  --grad-title-light:
    linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.72) 100%);

  --grad-title-ink:
    linear-gradient(180deg, #141414 0%, rgba(20, 20, 20, 0.78) 100%);

  /* Typography */
  --font-display: "Satoshi", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --fs-h1: clamp(2.75rem, 5.2vw, 4.625rem);
  --lh-h1: 1.12;
  --fs-h2: clamp(2.25rem, 4vw, 4rem);
  --lh-h2: 1.12;
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-mono: 0.6875rem;
  --tracking-display: -0.015em;
  --tracking-mono: 0.03em;

  /* Layout */
  --container: 1128px;
  --container-narrow: 960px;
  --nav-max: 1128px;
  --nav-scrolled-max: 656px;
  --gutter: clamp(1rem, 3vw, 1.5rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);
  --section-y-sm: clamp(3rem, 5vw, 4rem);

  /* Radii */
  --radius-pill: 999px;
  --radius-faq: 14px;
  --radius-card: 24px;
  --radius-card-lg: 32px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;

  /* Shadows (ToDesktop-faithful soft stack) */
  --shadow-soft:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 16px 56px rgba(0, 0, 0, 0.08);
  --shadow-nav:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 16px 56px rgba(0, 0, 0, 0.08);
  --shadow-card:
    0 1px 2px rgba(8, 1, 20, 0.04),
    0 4px 12px rgba(8, 1, 20, 0.05),
    0 16px 40px rgba(8, 1, 20, 0.06);
  --shadow-btn:
    0 1px 2px -0.5px rgba(255, 255, 255, 0.12) inset,
    0 0.5px 0.5px rgba(255, 255, 255, 0.16) inset,
    0 8px 24px -4px rgba(255, 255, 255, 0.16) inset,
    0 8px 8px -3px rgba(9, 1, 20, 0.03),
    0 5px 5px -2.5px rgba(9, 1, 20, 0.03),
    0 3px 3px -1.5px rgba(8, 1, 20, 0.03),
    0 2px 2px -1px rgba(8, 1, 20, 0.03),
    0 1px 1px -0.5px rgba(8, 1, 20, 0.03),
    0 0.5px 0.5px rgba(8, 1, 20, 0.03);
  --shadow-demo:
    0 24px 80px rgba(5, 6, 27, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);

  /* Motion */
  --ease-out: cubic-bezier(0.6, 0.6, 0, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur: 0.45s;
  --dur-slow: 0.7s;
  --reveal-y: 28px;
  --reveal-blur: 8px;

  /* Z-index */
  --z-header: 3000;
  --z-menu: 3100;
  --z-modal: 4000;
  --z-toast: 5000;

  color-scheme: light;
}