/* Convobeam brandkit v4 — design tokens (Chatbase.co direction, Brian 2026-10-05).
   Single source of truth. components.css and every page consume only these variables. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Variable.woff2') format('woff2');
}

:root {
  /* ── Neutrals ─────────────────────────────── */
  --cb-black: #000000;          /* primary text, primary buttons, dark sections */
  --cb-white: #FFFFFF;          /* main background, card faces, button text */
  --cb-night: #0B0B0B;          /* alternate dark section surface */
  --cb-night-2: #141416;        /* card face on dark */
  --cb-grey-50: #F9FAFB;        /* subtle section background */
  --cb-grey-100: #F3F4F6;       /* bot bubble, hover wash */
  --cb-grey-200: #E5E7EB;       /* 1px borders on light */
  --cb-grey-500: #6B7280;       /* secondary text on light (4.8:1 on white) */
  --cb-grey-400: #A1A1AA;       /* secondary text on dark (7.4:1 on #0B0B0B) */
  --cb-line-dark: #26262B;      /* 1px borders on dark */

  /* ── "Magic" gradient palette: four pairs ─── */
  --cb-magenta-a: #FF00FF;  --cb-magenta-b: #FF66CC;
  --cb-coral-a:   #FF4D00;  --cb-coral-b:   #FF9966;
  --cb-violet-a:  #8A2BE2;  --cb-violet-b:  #BF5AF2;
  --cb-cyan-a:    #00D2FF;  --cb-cyan-b:    #3A7BD5;

  /* Reusable gradient tokens. Backgrounds only, never text-fill. */
  --grad-magenta: linear-gradient(135deg, var(--cb-magenta-a), var(--cb-magenta-b));
  --grad-coral:   linear-gradient(135deg, var(--cb-coral-a), var(--cb-coral-b));
  --grad-violet:  linear-gradient(135deg, var(--cb-violet-a), var(--cb-violet-b));
  --grad-cyan:    linear-gradient(135deg, var(--cb-cyan-a), var(--cb-cyan-b));
  /* The multi-stop "magic" field: four radial pools over a violet base. Static fallback for the lava blobs. */
  --grad-magic:
    radial-gradient(60% 70% at 12% 18%, var(--cb-cyan-a) 0%, transparent 62%),
    radial-gradient(55% 65% at 92% 10%, var(--cb-magenta-a) 0%, transparent 60%),
    radial-gradient(60% 70% at 88% 92%, var(--cb-coral-a) 0%, transparent 62%),
    radial-gradient(55% 60% at 18% 95%, var(--cb-violet-b) 0%, transparent 60%),
    linear-gradient(135deg, var(--cb-violet-a), var(--cb-cyan-b));
  /* Diagonal sweep for full-bleed feature cards */
  --grad-sweep: linear-gradient(120deg, var(--cb-violet-a) 0%, var(--cb-magenta-a) 48%, var(--cb-coral-a) 100%);
  /* Soft glow halo behind mockups (low alpha, used on a blurred pseudo-element) */
  --grad-glow:
    radial-gradient(50% 50% at 30% 40%, rgb(255 0 255 / .55), transparent 70%),
    radial-gradient(50% 50% at 75% 35%, rgb(0 210 255 / .5), transparent 70%),
    radial-gradient(50% 50% at 60% 80%, rgb(255 77 0 / .45), transparent 70%);
  --scrim-on-gradient: rgb(0 0 0 / .42); /* white text >= 4.5:1 over the brightest pool; cards that sit text on the gradient use it */

  /* ── Semantic ────────────────────────────── */
  --c-bg: var(--cb-white);
  --c-bg-soft: var(--cb-grey-50);
  --c-bg-dark: var(--cb-night);
  --c-text: var(--cb-black);
  --c-text-2: var(--cb-grey-500);
  --c-border: var(--cb-grey-200);
  --c-accent: var(--cb-violet-a);
  --c-accent-tint: rgb(138 43 226 / .08);   /* faint brand tint behind icons */
  --c-ok: #16A34A;
  --c-err: #DC2626;
  --c-focus: var(--cb-violet-a);

  /* ── Type (Inter, geometric sans; no serif) ─ */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-display: clamp(2.5rem, 1.2rem + 4.6vw, 4.5rem);  /* H1  40 → 72 */
  --fs-h2: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);       /* H2  30 → 48 */
  --fs-h3: 1.25rem;                                     /* H3  20 */
  --fs-lead: 1.1875rem;                                 /* 19 */
  --fs-body: 1.0625rem;                                 /* 17 */
  --fs-small: .875rem;                                  /* 14 */
  --fs-over: .75rem;                                    /* 12 overline */
  --lh-tight: 1.04; --lh-snug: 1.2; --lh-body: 1.65;
  --tr-display: -.045em; --tr-h2: -.03em; --tr-h3: -.012em; --tr-over: .1em;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  /* ── Radii ladder ────────────────────────── */
  --r-ui: 4px;        /* mockup internals */
  --r-ui-2: 8px;      /* mockup internals, inputs, secondary buttons */
  --r-card: 16px;     /* small cards */
  --r-card-lg: 24px;  /* cards, panels, gradient feature cards */
  --r-panel: 32px;    /* hero mockup frame */
  --r-pill: 999px;    /* buttons, chips */
  --r-squircle: 28%;  /* icon tiles */

  /* ── Soft-UI shadows: diffuse, low opacity, large spread ── */
  --sh-1: 0 1px 2px rgb(16 24 40 / .04), 0 4px 16px rgb(16 24 40 / .04);
  --sh-2: 0 10px 40px -10px rgb(16 24 40 / .10);
  --sh-3: 0 30px 80px -20px rgb(16 24 40 / .18);
  --sh-dark: 0 30px 80px -20px rgb(0 0 0 / .6);
  --sh-btn: 0 8px 24px -8px rgb(0 0 0 / .35);

  /* ── Spacing & layout ────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(72px, 10vw, 136px);   /* very generous vertical rhythm */

  /* ── Motion language: calm ───────────────── */
  --ease-out: cubic-bezier(.22, 1, .36, 1);       /* reveals, lifts */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);  /* press release, chip pop */
  --dur-fast: 140ms; --dur-base: 240ms; --dur-reveal: 700ms; --dur-lava: 34s;
  --reveal-y: 18px;
}