/* GroupChatRobot marketing site tokens. Shares the house palette with the app (public/app/themes.css, Paper and Midnight).
   Load the display face in the page head, not here:
   <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@500..800&display=swap">
   Colour rule: ink blue means you and actions. Manila means the robot. Nothing else uses manila. */

/* Layout: one 1200px container, left-aligned text, hero in two columns from 960px, single column below. */
:root {
  color-scheme: light;

  /* colour: light (Paper) */
  --bg: #F4F5F7;
  --bg-band: #EAEDF1;          /* alternate section band */
  --surface: #FFFFFF;          /* cards, comparison table, screenshot frame */
  --text: #14171C;
  --text-muted: #555C69;
  --border: #D9DDE3;
  --hairline: rgba(20, 23, 28, 0.10);
  --accent: #2448E0;           /* primary button, links on hover, human bubbles in diagrams */
  --accent-hover: #1C3BC4;
  --accent-text: #FFFFFF;
  --accent-soft: #E6EBFD;
  --link: #1F40C8;
  --robot: #FFF3D1;            /* robot card fill in screenshots and diagrams */
  --robot-ink: #2A2110;
  --robot-edge: #E6D29C;
  --robot-fold: #E3C77E;
  --robot-name: #7A5608;
  --focus: #2448E0;
  --dia-line: #7A818E;         /* diagram strokes, 3:1 on --bg */
  --dia-fill: #FFFFFF;
  --shadow-color: 220 30% 20%;

  /* type */
  --font-display: "Funnel Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --fs-hero: clamp(2.375rem, 1.5rem + 3.6vw, 4.25rem);   /* 38px at 390, 68px at 1440 */
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem);    /* 28 to 42 */
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);  /* 19 to 23 */
  --fs-lede: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 to 21 */
  --fs-body: 1.0625rem;        /* 17 */
  --fs-small: 0.9375rem;       /* 15 */
  --fs-caption: 0.8125rem;     /* 13 */
  --lh-display: 1.04; --lh-heading: 1.15; --lh-body: 1.55;
  --tracking-display: -0.025em; --tracking-label: 0.06em;
  --fw-display: 700; --fw-heading: 650; --fw-body: 400; --fw-strong: 600;
  --measure: 62ch;

  /* space: same scale as the app */
  --space-0: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(var(--space-8), 9vw, 128px);
  --container: 1200px;

  /* radius */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px;

  /* elevation */
  --elev-1: 0 1px 2px hsl(var(--shadow-color) / 0.12), 0 1px 1px hsl(var(--shadow-color) / 0.06);
  --elev-2: 0 12px 32px hsl(var(--shadow-color) / 0.16), 0 2px 8px hsl(var(--shadow-color) / 0.08);
  --elev-phone: 0 40px 80px -20px hsl(var(--shadow-color) / 0.35), 0 12px 24px -8px hsl(var(--shadow-color) / 0.18);

  /* motion */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 400ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* colour: dark (Midnight) when the OS is dark and no explicit light choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0D1015; --bg-band: #12161C; --surface: #171B22;
    --text: #E8EBF0; --text-muted: #9AA2AF; --border: #262C36; --hairline: rgba(232, 235, 240, 0.10);
    --accent: #3D5DF5; --accent-hover: #2F4DE0; --accent-text: #FFFFFF; --accent-soft: #1C2447; --link: #8FA6FF;
    --robot: #2E2717; --robot-ink: #F3E6C4; --robot-edge: #4A3E22; --robot-fold: #7A6533; --robot-name: #EDC45F;
    --focus: #8FA6FF; --dia-line: #6B7382; --dia-fill: #171B22; --shadow-color: 220 40% 2%;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D1015; --bg-band: #12161C; --surface: #171B22;
  --text: #E8EBF0; --text-muted: #9AA2AF; --border: #262C36; --hairline: rgba(232, 235, 240, 0.10);
  --accent: #3D5DF5; --accent-hover: #2F4DE0; --accent-text: #FFFFFF; --accent-soft: #1C2447; --link: #8FA6FF;
  --robot: #2E2717; --robot-ink: #F3E6C4; --robot-edge: #4A3E22; --robot-fold: #7A6533; --robot-name: #EDC45F;
  --focus: #8FA6FF; --dia-line: #6B7382; --dia-fill: #171B22; --shadow-color: 220 40% 2%;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0.01ms; --dur-2: 0.01ms; --dur-3: 0.01ms; }
}

/* Minimal base so every site page starts from the same ground */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--fw-body) var(--fs-body) / var(--lh-body) var(--font-body); }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }