/* ============================================================
   vth-tokens.css — VTH ReSkin design tokens
   Global custom properties (harmless — set no styles, only vars).
   Values trace to the design system tokens/*.css. Reference these
   variables in vth-reskin.css; never hardcode hex/px.
   ============================================================ */
:root{
  /* ---- Font ---- */
  --font-sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

  /* ---- Brand ---- */
  --vth-blue:#192AC1;--vth-blue-hover:#1A2CE8;--vth-blue-focus:#1D2C92;--vth-blue-dark:#040E66;
  --vth-yellow:#FFB900;--vth-red:#EB3939;

  /* ---- Text ---- */
  --text-primary:#131313;--text-secondary:#2B2B2B;--text-subtle:#5D5D5D;--text-muted:#6D6D6D;
  --text-on-blue:#FFFFFF;--text-link:#192AC1;

  /* ---- Surfaces ---- */
  --surface-page:#FFFFFF;--surface-subtle:#F9F9F9;--surface-muted:#F6F6F6;
  --surface-card:#FFFFFF;--surface-blue-soft:#EAF3FF;--surface-dark:#2B2B2B;

  /* ---- Borders / feedback ---- */
  --border-light:#E7E7E7;--border-default:#D1D1D1;--border-strong:#0D0D0D;--border-blue:#192AC1;
  --color-error:#D92929;--color-error-hover:#EB3939;--color-success:#187D3F;

  /* ---- Radii ---- */
  --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:24px;--radius-pill:999px;

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

  /* ---- Shadows ---- */
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.05);
  --shadow-focus-blue:0 0 0 4px rgba(25,42,193,.15);

  /* ---- Type scale (desktop) ---- */
  --type-size-title-1:56px;--type-leading-title-1:67px;
  --type-size-title-2:48px;--type-leading-title-2:58px;
  --type-size-title-3:42px;--type-leading-title-3:57px;
  --type-size-title-4:40px;--type-leading-title-4:54px;
  --type-size-title-5:28px;--type-leading-title-5:38px;
  --type-size-title-6:24px;--type-leading-title-6:34px;
  --type-size-3xl:32px;--type-leading-3xl:38px;
  --type-size-xl:20px;--type-leading-xl:30px;
  --type-size-lg:18px;--type-leading-lg:27px;
  --type-size-base:16px;--type-leading-base:24px;
  --type-size-sm:15px;--type-leading-sm:23px;
  --type-size-xs:14px;--type-leading-xs:21px;
  --type-size-2xs:12px;--type-leading-2xs:18px;
}

/* Mobile type mode — set data-type-mode="mobile" on/above .vth at small viewports */
[data-type-mode="mobile"]{
  --type-size-title-1:32px;--type-leading-title-1:39px;
  --type-size-title-2:26px;--type-leading-title-2:31px;
  --type-size-title-3:20px;--type-leading-title-3:27px;
  --type-size-title-4:24px;--type-leading-title-4:32px;
  --type-size-title-5:20px;--type-leading-title-5:27px;
  --type-size-title-6:18px;--type-leading-title-6:25px;
  --type-size-3xl:18px;--type-leading-3xl:22px;
  --type-size-xl:16px;--type-leading-xl:24px;
  --type-size-lg:16px;--type-leading-lg:24px;
  --type-size-base:14px;--type-leading-base:21px;
}