/* FormOasis design tokens, from the "FormOasis Concept" canvas. The only place colors, type and spacing are defined. */
:root {
  /* Color */
  --sand: #F6F5F1;          /* page background */
  --white: #FFFFFF;         /* cards, header */
  --ink: #16191D;           /* text, dark buttons, footer */
  --ink-soft: #3E434A;      /* body copy in cards */
  --muted: #5B6168;         /* secondary text */
  --muted-2: #6B7078;       /* labels, ad labels */
  --muted-3: #8A8F96;       /* chevrons */
  --line: #E3E1DA;          /* card borders */
  --line-strong: #D6D3CA;   /* input borders */
  --line-soft: #EEECE6;     /* row dividers */
  --field: #F1EFE9;         /* segmented control track */

  --teal: #0E6B5C;          /* brand, result panel, links */
  --teal-dark: #0A4F44;     /* hover, text on teal-soft */
  --teal-soft: #E3F0EC;     /* chips, tags */
  --teal-pale: #D4ECE6;     /* labels on teal */
  --teal-tint: #E6F3EF;     /* copy on teal */
  --teal-line: #2E8577;     /* dividers on teal */
  --teal-mid: #5FA597;      /* outline buttons on teal */

  --amber: #F2B66D;         /* result bar segment 2 */
  --sky: #9FC7DE;           /* result bar segment 3 */

  --clay-bg: #F8E7DC; --clay-fg: #A3460A;
  --blue-bg: #E4EAF2; --blue-fg: #3A5A80;
  --purple-bg: #EDE6F3; --purple-fg: #674A8A;

  --ad-bg: #EFEDE7; --ad-line: #C9C5BA;
  --sponsored-bg: #E9F2EE; --sponsored-line: #9FC7B9; --sponsored-fg: #3F6B60;

  --on-dark: #C9CCD1; --on-dark-muted: #9EA3AA;

  /* Type */
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-md: 17px;
  --text-lg: 18px;
  --h3: 20px;
  --h2: 24px;
  --h1: 40px;
  --result: 52px;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  /* Layout */
  --wrap: 1200px;
  --gutter: 24px;
  --side: 340px;
  --section-y: 48px;

  /* Shape */
  --radius-sm: 8px;
  --radius-input: 10px;
  --radius-btn: 12px;
  --radius-card: 14px;
  --radius-panel: 16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 10px 30px rgba(22, 25, 29, 0.06);

  /* Motion */
  --ease: 160ms ease;
}

@media (max-width: 760px) {
  :root {
    --gutter: 16px;
    --h1: 28px;
    --h2: 20px;
    --result: 44px;
    --section-y: 24px;
  }
}