/*
  Marketing subset aligned with webapp/a62i/src/index.css design tokens.
*/
:root {
  /* Brand */
  --brand-teal: #26a4b4; /* logo SVG only */
  --brand-blue: #1976d2; /* = --color-brand-primary */
  --brand-blue-hover: #0066cc; /* = --color-graph-blue-dark-02 */
  --brand-selection: #e8f0fe; /* = --color-brand-selection-light */
  --brand-iris: #753aab;

  /* Ink */
  --ink: #212121;
  --ink-secondary: #5f6368;
  --ink-subtle: #767676;
  --ink-inverse: #ffffff;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #f8f9fa;
  /* Cool tint that separates the flow + demo bands from the plain white sections. */
  --surface-flow: #eef1f8;
  --footer-bg: #0a1c2b; /* = --color-data-blue-dark-04 */
  --surface-dark-2: #0059b3;

  /* Borders */
  --border-default: #e0e0e0;
  --border-strong: #c3c8ce;

  /* Feedback */
  --success: #0f7a3b;
  --success-strong: #1fc16b;
  --warning: #dfb400;
  --error: #d00416;

  /* Radii (= product border-radius-*) */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-pill: 9999px;

  /* Shadows — flatter, closer to product cards */
  --shadow-card: 0 1px 2px rgb(0 0 0 / 6%);
  --shadow-card-lg: 0 4px 16px rgb(0 0 0 / 8%);

  /* Type (= product typography tokens; sized up from the product's own scale -- a marketing
     page is read at a glance, not worked in all day, so it needs a stronger, more confident
     hierarchy than a dense product UI does). */
  --font-base: "Roboto", sans-serif;
  --fs-eyebrow: 13px;
  --lh-eyebrow: 18px;
  --fs-caption: 13px;
  --lh-caption: 18px;
  --fs-body: 16px;
  --lh-body: 25px;
  --fs-h3: 21px;
  --lh-h3: 28px;
  --fs-h2: 26px;
  --lh-h2: 34px;
  --fs-h1: clamp(34px, 4.5vw + 0.5rem, 54px);
  --lh-h1: 1.15;
  --fs-stat: clamp(32px, 3.5vw + 1rem, 42px);

  /* Spacing */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 56px;
  --space-section: 56px;
  --container-max: 1240px;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration-standard: 400ms;
}

@media (min-width: 1024px) {
  :root {
    --space-section: 96px;
  }
}

/* Phones keep the same scale as a marketing page read at arm's length, which made every
   headline and band feel oversized. Tighten the vertical rhythm here; type floors live
   with the components that set them. */
@media (max-width: 639px) {
  :root {
    --space-section: 36px;
    --space-xl: 36px;
    --space-l: 24px;
  }
}