/* ============================================================
   CleanerApp — design tokens
   ------------------------------------------------------------
   Layer 1  FROM FIGMA   — read from Figma variables, do not edit here
   Layer 2  DERIVED      — measured off the UI kit / app screens
   Layer 3  LANDING ONLY — web-only additions, need sign-off
   ============================================================ */

:root {
  /* ---------- Layer 1 · FROM FIGMA (variables) ---------- */
  --white: #ffffff;
  --accent: #53b2e9;
  --primary: #25262b;      /* main text */
  --secondary: #838997;    /* muted text */
  --card: #eef1f9;         /* card / surface fill */
  --shadow-gray: #6a6d8333;

  /* Type — Inter, exactly as in the kit */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --title-18-size: 18px;  --title-18-lh: 24px;  --title-18-weight: 600;
  --title-16-size: 16px;  --title-16-lh: 24px;  --title-16-weight: 600;
  --body-16-size: 16px;   --body-16-lh: 24px;   --body-16-weight: 400;
  --body-14-size: 14px;   --body-14-lh: 18px;   --body-14-weight: 400;
  --button-16-size: 16px; --button-16-lh: 20px; --button-16-weight: 500;

  /* ---------- Layer 2 · DERIVED (measured, verify) ---------- */
  --accent-soft: #e4f2fc;      /* secondary button fill */
  --accent-press: #3a9ed8;     /* pressed state */
  --disabled: #c6d0de;         /* disabled button fill */
  --hairline: #e3e7f0;         /* dividers, card borders */

  --grad-main: linear-gradient(135deg, #6ec5f2 0%, #3aa3e3 100%);
  --grad-main-press: linear-gradient(135deg, #5bb6ea 0%, #2f93d2 100%);

  --success: #34c759;          /* swipe "keep" */
  --danger: #ff3b30;           /* swipe "delete", error toast */

  --r-pill: 999px;
  --r-card: 16px;
  --r-media: 12px;
  --r-chip: 8px;

  --shadow-card: 0 4px 16px var(--shadow-gray);
  --shadow-bar: 0 -2px 12px var(--shadow-gray);

  --ctrl-h: 52px;              /* button height in the kit */

  /* ---------- Layer 3 · LANDING ONLY (needs sign-off) ---------- */

  /* Display sizes — the app tops out at 18px, a landing hero needs more.
     Mobile-first values; desktop bumps live in the media query below. */
  --display-size: 34px; --display-lh: 40px; --display-weight: 700;
  --h2-size: 26px;      --h2-lh: 32px;      --h2-weight: 700;
  --h3-size: 20px;      --h3-lh: 26px;      --h3-weight: 600;
  --lead-size: 17px;    --lead-lh: 26px;    --lead-weight: 400;
  --caption-size: 13px; --caption-lh: 18px; --caption-weight: 400;

  /* Spacing — 4px base */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  --gutter: 20px;              /* page side padding on mobile */
  --section-y: 56px;           /* vertical rhythm between sections */
  --max-w: 1120px;             /* desktop content cap */

  --page-bg: var(--white);
  --page-bg-alt: #f7f9fd;      /* alternating section background */
}

/* Two steps rather than one: a single 34→52px jump at 768 leaves the mid range
   (tablet, and any narrow desktop pane) with type sized for a layout it isn't in. */
@media (min-width: 640px) {
  :root {
    --display-size: 42px; --display-lh: 48px;
    --h2-size: 30px;      --h2-lh: 38px;
    --h3-size: 21px;      --h3-lh: 28px;
    --lead-size: 18px;    --lead-lh: 28px;
    --gutter: 32px;
    --section-y: 76px;
  }
}

@media (min-width: 1024px) {
  :root {
    --display-size: 52px; --display-lh: 58px;
    --h2-size: 36px;      --h2-lh: 44px;
    --h3-size: 22px;      --h3-lh: 30px;
    --lead-size: 19px;    --lead-lh: 30px;
    --gutter: 40px;
    --section-y: 96px;
  }
}