/* =========================================================================
   SmartDispute.ai - design tokens
   -------------------------------------------------------------------------
   Single source of truth for the type, spacing and radius scale.
   Every GenerateBlocks control on the landing page points at one of these
   variables instead of a literal value, so a brand change is made here once
   and every landing page built from these components follows.
   ========================================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- colour ---------------------------------------------------------
     Brand colour is NOT defined here. It lives in Appearance > Customize >
     Colors > Global Colors as GeneratePress global colours, which the theme
     emits on :root as --sd-navy, --sd-orange, --sd-cyan and so on. That way
     the client can change a brand colour in the Customizer and every block
     that references the token follows, with no code edit.
     -------------------------------------------------------------------- */

  /* ---- radius, border, shadow ------------------------------------------ */
  --sd-radius-card:   16px;
  --sd-radius-btn:    8px;
  --sd-radius-tile:   8px;
  --sd-hairline:      1px solid rgba(255,255,255,.10);
  --sd-shadow-card:   0 18px 40px rgba(0,15,30,.35);

  /* ---- type ------------------------------------------------------------
     Body, h1, h2, h3 and buttons are NOT sized here. They are set in
     Appearance > Customize > Typography as GeneratePress typography rules,
     with their own tablet and mobile values, so the client can retype the
     page without touching CSS. Only the sizes GeneratePress has no element
     for live below, and every one of them is applied through a native
     GenerateBlocks control that references the variable.
     -------------------------------------------------------------------- */
  --sd-fs-eyebrow:  14px;
  --sd-ls-eyebrow:  .12em;
  --sd-fs-btn:      17px;
  --sd-fs-card-title: 22px;
  --sd-fs-lead:     20px;
  --sd-lh-lead:     1.5;
  --sd-fs-stat:     44px;
  --sd-fs-label:    14px;
  --sd-fs-row:      15px;
  --sd-fs-meta:     14px;
  --sd-fs-fine:     14px;

  /* ---- spacing scale --------------------------------------------------- */
  --sd-space-3xs: 4px;
  --sd-space-2xs: 8px;
  --sd-space-xs:  12px;
  --sd-space-sm:  16px;
  --sd-space-md:  24px;
  --sd-space-lg:  32px;
  --sd-space-xl:  48px;
  --sd-space-2xl: 64px;
  --sd-space-3xl: 88px;
  --sd-gutter:    30px;
}

/* Tablet ----------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --sd-fs-card-title: 20px;
    --sd-fs-lead:  19px;
    --sd-fs-stat:  38px;
  }
}

/* Mobile ----------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --sd-fs-eyebrow: 12px;
    --sd-fs-btn:     15px;
    --sd-fs-card-title: 16px;
    --sd-fs-lead:    16px;
    --sd-fs-stat:    28px;
    --sd-fs-label:   11px;
    --sd-fs-row:     11.5px;
    --sd-fs-meta:    11px;
    --sd-fs-fine:    13px;
    --sd-radius-card: 12px;
    --sd-gutter:     24px;
  }
}

/* Small phones ---------------------------------------------------------- */
@media (max-width: 479px) {
  :root {
    --sd-fs-stat: 26px;
    --sd-gutter:  20px;
  }
}