/* ==========================================================================
   OnePayCab — Design tokens
   Scale, rhythm and component metrics follow the reference visual system;
   the palette is derived from the OnePayCab logo.
   ========================================================================== */

:root {
  /* ---- Brand -------------------------------------------------------- */
  --brand: #57cc2a;          /* bright green sampled from the logo mark   */
  --brand-darken: #47b01f;
  --brand-deep: #04351d;     /* deep green from the logo wordmark         */
  --brand-deep-2: #0a5730;
  --brand-tint: #e7f8de;     /* pale green section / pill background      */
  --brand-tint-2: #d8f4db;
  --brand-ink: #101010;      /* text colour used on brand-filled buttons  */
  --link-hover: #2f7d15;

  /* ---- Neutrals ------------------------------------------------------ */
  --neutral-0: #ffffff;
  --neutral-100: #f2f4f6;
  --neutral-200: #e4e6e8;
  --neutral-300: #d6d7d8;
  --neutral-400: #8e8e8e;
  --neutral-500: #737373;
  --neutral-600: #575756;
  --neutral-700: #4d4d4d;
  --neutral-800: #454545;
  --neutral-900: #313131;
  --neutral-1000: #000000;
  --border-color: #dde1de;

  /* ---- Support colours ----------------------------------------------- */
  --warning: #ffc700;
  --success: #34d674;
  --danger: #fc7272;
  --info: #8acfff;
  --bg-body: #ffffff;
  --bg-card: #ffffff;
  --bg-100: #f2f4f6;
  --bg-1000: #000000;
  --bg-soft-1: #fff0ec;
  --bg-soft-2: #d8f4db;
  --bg-soft-3: #e3f0ff;
  --bg-soft-4: #f6f3fc;
  --bg-soft-5: #ffec88;
  --bg-soft-6: #9dd3fb;

  /* ---- Typography ----------------------------------------------------- */
  --font-body: "Urbanist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-body);

  --fs-h1: 64px;   --lh-h1: 76px;
  --fs-h2: 52px;   --lh-h2: 64px;
  --fs-h3: 44px;   --lh-h3: 58px;
  --fs-h4: 36px;   --lh-h4: 48px;
  --fs-h5: 28px;   --lh-h5: 36px;
  --fs-h6: 24px;   --lh-h6: 32px;

  --fs-xs: 12px;   --lh-xs: 18px;
  --fs-sm: 14px;   --lh-sm: 22px;
  --fs-md: 16px;   --lh-md: 26px;
  --fs-lg: 18px;   --lh-lg: 28px;
  --fs-xl: 20px;   --lh-xl: 32px;

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1320px;
  --container-gutter: 12px;
  --header-fluid-pad: 60px;
  --section-pad: 96px;

  /* ---- Radii ----------------------------------------------------------- */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-pill: 50px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 2px 7px 0 rgba(0, 0, 0, 0.07);
  --shadow-card: 0 6px 22px 0 rgba(0, 0, 0, 0.09);
  --shadow-panel: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
  --shadow-header: 0 8px 20px 0 rgba(0, 0, 0, 0.05);
  --shadow-menu: 0 6px 15px 0 rgba(64, 79, 100, 0.08);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.02, 0.01, 0.47, 1);
  --ease-inout: cubic-bezier(0.645, 0.045, 0.355, 1);
  --t-fast: 0.2s;
  --t-base: 0.3s;
  --t-slow: 0.6s;

  /* ---- Z layers ---------------------------------------------------------- */
  --z-header: 900;
  --z-sticky: 999;
  --z-drawer: 1006;
  --z-overlay: 1005;
  --z-toast: 1200;
}

/* Comfortable desktop step-down so headings never crowd the grid */
@media (max-width: 1399.98px) {
  :root {
    --fs-h1: 56px;  --lh-h1: 66px;
    --fs-h2: 46px;  --lh-h2: 58px;
    --fs-h3: 38px;  --lh-h3: 50px;
    --fs-h4: 32px;  --lh-h4: 44px;
    --header-fluid-pad: 32px;
  }
}

@media (max-width: 991.98px) {
  :root {
    --fs-h1: 44px;  --lh-h1: 56px;
    --fs-h2: 38px;  --lh-h2: 48px;
    --fs-h3: 32px;  --lh-h3: 42px;
    --fs-h4: 28px;  --lh-h4: 38px;
    --fs-h5: 24px;  --lh-h5: 32px;
    --fs-h6: 20px;  --lh-h6: 28px;
    --section-pad: 64px;
    --header-fluid-pad: 20px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --fs-h1: 34px;  --lh-h1: 44px;
    --fs-h2: 30px;  --lh-h2: 40px;
    --fs-h3: 26px;  --lh-h3: 36px;
    --fs-h4: 24px;  --lh-h4: 32px;
    --fs-xl: 18px;  --lh-xl: 28px;
    --section-pad: 56px;
    --header-fluid-pad: 16px;
  }
}