/*
 * Design tokens for the new landing page.
 *
 * Pulled from the Figma variables of "Landing page Iter 2"
 * (file SgA1rHTHzB0LszfdtFE11p, node 2194:50635) — names kept close to the
 * design's own so a value can be traced back without guessing.
 *
 * What is NOT here: the bright green and magenta seen on the hero and the
 * section CTAs. Those are raw fills in the design, not bound to variables, so
 * they are deliberately left out until the brand question is settled — the
 * tokenised primary is the app's teal.
 */

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --wt-primary: #057d80;
  --wt-primary-stroke: #d4efef;
  --wt-primary-tint: #ecf8f8;
  --wt-turquoise-150: rgba(185, 219, 219, 0.8);
  --wt-text-on-primary: #f9f9f9;

  /*
   * The bright green the design puts on dark sections. Not a Figma variable,
   * but not invented either: it is the exact fill of the existing
   * walktalk-logo-dark.svg, i.e. the brand's own colour for dark backgrounds.
   */
  --wt-accent-green: #0cff81;

  /*
   * Dark sections and the final CTA card. Sampled from the design render and
   * identical to the fill of walktalk-logo.svg — brand, not a one-off.
   */
  --wt-deep: #004349;
  --wt-deep-muted: #698a8d;

  /* Store badges on the CTA card. Sampled; the design binds no variable. */
  --wt-accent-pink: #ff9ffa;

  /*
   * The magenta the design uses for a headline over photography. Related to
   * the badge pink but a stronger, saturated version — sampled, not derived.
   */
  --wt-accent-magenta: #e544dd;

  /* The light green field this section sits on. */
  --wt-lime: #dbfab3;

  /* FAQ rows — a pale green close to the app's "free label" surface. */
  --wt-faq-row: #f0f6e8;

  /* ── Text ──────────────────────────────────────────────── */
  --wt-text: #1e1e1e;
  --wt-text-secondary: #282626;
  --wt-text-tertiary: #636363;
  --wt-text-disabled: #7b7b7b;

  /* ── Surfaces ──────────────────────────────────────────── */
  --wt-surface: #ffffff;
  --wt-background: #f9f9f9;
  --wt-stroke: #f3f3f3;

  /* ── Grays ─────────────────────────────────────────────── */
  --wt-gray-50: #fafafa;
  --wt-gray-100: #f9f9f9;
  --wt-gray-150: #f3f3f3;
  --wt-gray-300: #d2d2d2;
  --wt-gray-450: #7b7b7b;
  --wt-gray-600: #3e3e3e;
  --wt-gray-800: #282626;
  --wt-gray-950: #1e1e1e;

  /* ── Accents ───────────────────────────────────────────── */
  --wt-star: #ffd700;
  --wt-free-text: #008055;
  --wt-free-bg: #f0fdf4;
  --wt-darken: rgba(0, 0, 0, 0.1);
  --wt-scrim: rgba(0, 0, 0, 0.3);

  /* ── Type families ─────────────────────────────────────── */
  --wt-font-display: "Anton", "Arial Narrow", sans-serif;
  --wt-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /*
   * Type scale. Sizes are the desktop values from the design; line height and
   * letter spacing are carried over as-is, including the tight tracking the
   * display face relies on.
   */
  --wt-h2-size: 68px;
  --wt-h2-line: 1;
  --wt-h2-track: -1px;

  --wt-h3-size: 40px;
  --wt-h3-line: 1.2;
  --wt-h3-track: 0;
  --wt-h3-caps-track: -2px;

  --wt-h4-size: 32px;
  --wt-h4-line: 1;
  --wt-h4-track: -2px;

  /* H5 is the one heading set in Inter, not Anton. */
  --wt-h5-size: 24px;
  --wt-h5-line: 1;
  --wt-h5-track: -2px;
  --wt-h5-weight: 700;

  --wt-h6-size: 20px;
  --wt-h6-line: 1.2;
  --wt-h6-track: -2px;

  --wt-s1-size: 20px;
  --wt-s1-line: 1.3;
  --wt-s1-track: -1px;

  --wt-b1-size: 18px;
  --wt-b1-line: 1.2;
  --wt-b1-track: -1px;

  --wt-b2-size: 16px;
  --wt-b2-line: 1.3;
  --wt-b2-track: -1px;

  --wt-b14-size: 14px;
  --wt-b14-line: 1.4;
  --wt-b14-track: -1px;

  /* ── Layout ────────────────────────────────────────────── */
  --wt-content-width: 1440px;
}