/* ─────────────────────────────────────────────────────────────────────
   Vesh design tokens — web mirror of the mobile app's v2.2 system.

   Source of truth: ../vesh-app/src/theme/tokens2.ts
   ("extracted from the Vesh App v2.2 design comp")

   Hand-mirrored, because the two repos are separate. Generating this from
   the app would remove the drift risk but needs a shared package or a
   monorepo — the same trade-off CLAUDE.md already records for hc<AppType>.
   If you change a value here, change it there too, or the two products
   start disagreeing about what Vesh looks like.

   The app's primary is #F83758. The web's old #00224d exists in the app
   only as `darkBlue` in the LEGACY colors.ts — it is not the brand colour.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ── surfaces ───────────────────────────────────────── */
  --c-screen: #f4f5f7;
  --c-white: #ffffff;
  --c-surface-alt: #e8ebef;

  /* Navy is a surface accent — hero blocks, footer, popups — not the brand. */
  --c-navy: #0b1c36;
  --c-navy-2: #05203f;
  --c-navy-card: #15294c;
  --c-navy-border: #1b3157;
  --c-navy-divider: #26406a;

  /* ── brand + accents ────────────────────────────────── */
  --c-primary: #f83758;
  --c-primary-bright: #ff4d6d;
  --c-primary-soft: #ffeef1;
  --c-primary-soft-bg: #fff1f4;
  --c-blue: #0ea5e9;
  --c-blue-bright: #22b3ee;
  --c-green: #22c55e;
  --c-star: #f5a623;

  /* ── text ───────────────────────────────────────────── */
  --c-heading: #0b1c36;
  --c-body: #334155;
  --c-muted: #64748b;
  --c-faint: #94a3b8;
  --c-on-dark: #ffffff;
  --c-on-dark-muted: rgba(255, 255, 255, 0.72);
  --c-on-dark-faint: rgba(255, 255, 255, 0.52);

  /* ── lines ──────────────────────────────────────────── */
  --c-border: #e5e8ec;
  --c-divider: #eef0f3;
  --c-border-on-dark: rgba(255, 255, 255, 0.16);

  /* ── info pill ──────────────────────────────────────── */
  --c-info-bg: #eaf4fb;
  --c-info-text: #0369a1;

  /* ── status ──────────────────────────────────────────
     From the app's colors.ts. Mostly unused until offers and agreements
     land — defined now so that slice does not invent a second set that
     disagrees with the app screen showing the same agreement. */
  --c-accept: #4caf50;
  --c-decline: #f44336;
  --c-cancel: #f53b3b;
  --c-warning: #ff9800;
  --c-pay: #0d6efd;
  --c-error-text: #b42318;
  --c-error-bg: #fff4f4;
  --c-success-text: #067647;
  --c-success-bg: #ecfff5;
  --c-warning-text: #b54708;

  /* ── radii ──────────────────────────────────────────── */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ── spacing ────────────────────────────────────────── */
  --s-xs: 4px;
  --s-s: 8px;
  --s-m: 12px;
  --s-l: 16px;
  --s-xl: 20px;
  --s-xxl: 28px;

  /* ── type ───────────────────────────────────────────
     The app maps its design's Plus Jakarta Sans weights onto bundled
     Poppins variants; the web already loads Poppins, so the scale
     transfers exactly. */
  --font: "Poppins", "Montserrat", sans-serif;

  --t-h1: 30px;
  --t-h2: 24px;
  --t-h3: 17px;
  --t-title: 16px;
  --t-body: 14px;
  --t-muted: 13px;
  --t-small: 12px;
  --t-tiny: 11px;

  --ls-h1: -0.8px;
  --ls-h2: -0.6px;
  --ls-h3: -0.4px;
  --ls-title: -0.3px;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extrabold: 800;

  /* ── elevation ──────────────────────────────────────── */
  --shadow-card: 0 1px 5px rgba(11, 28, 54, 0.07);
  --shadow-raised: 0 4px 20px rgba(11, 28, 54, 0.12);
  --shadow-primary: 0 8px 20px rgba(248, 55, 88, 0.25);

  /* ── motion ─────────────────────────────────────────── */
  --transition: 200ms ease;
}

/* Breakpoints cannot be custom properties — media queries do not resolve
   var(). They are written literally throughout, and the scale is:

     480px   small phone
     768px   phone / tablet portrait — the desktop-to-mobile nav switch
     948px   tablet landscape — where the content columns go full width
     1200px  max content width (a max-width, not a query)              */