/*
 * UK site tokens.
 * Source: Uk-site-design-tokens.md
 * Do not add a name here that is not in that file.
 */

:root {
  --color-ink: #222222;
  --color-white: #ffffff;
  --color-blue: #006bce;
  --color-orange: #d87819;
  --color-navy: #003370;
  --color-page: #f6fafe;
  --color-page-2: #f2f7fc;
  --color-blue-hover: #0051b5;
  --color-blue-tint: #006bce0d;
  --color-blue-80: #006bcecc;
  --color-gold: #e0a82b;
  --color-wash: #dce5ea;
  --color-hero-shade: #061329;

  --font-display: "Be Vietnam Pro", sans-serif;
  --font-body: "Poppins", sans-serif;

  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 22px;
  --font-size-xxl: 28px;
  --font-size-xxxl: 30px;
  --font-size-hero: clamp(35px, 5vw, 52px);
  --font-size-stat: 25px;
  --font-size-card: 26px;

  --line-height-xs: 20px;
  --line-height-sm: 20px;
  --line-height-md: 27px;
  --line-height-lg: 27px;
  --line-height-xl: 27px;
  --line-height-xxl: 36px;
  --line-height-xxxl: 38px;
  --line-height-hero: 62px;
  --line-height-stat: 28px;
  --line-height-card: 36px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --letter-spacing-tight: -1px;

  --page-width: 1440px;
  --content-width: 1196px;
  --header-height: 90px;
  --header-pad: clamp(20px, 8vw, 120px);
  --bp-mobile: 767px;
  --bp-desktop: 1025px;
  --hero-min-height: 810px;
  --col-min: 480px;
  --hero-card-max: 412px;
  --radius-button: 100px;
  --radius-card: 20px;
  --radius-card-cut: 20px 20px 40px 20px;
  --shadow-card: 0 0 10px rgba(0, 0, 0, 0.3);
  --gap: 20px;

  /* Stories carousel contract — mirrored from the Figma shell components. */
  --stories-section-gap: 45px;
  --stories-carousel-gap: 32px;
  --stories-arrow-gap: 10px;
  --stories-card-padding: 30px;
  --stories-nav-padding-top: 36px;
}

/* @media cannot read custom properties. Use 1024px (--bp-desktop minus 1px) and 767px (--bp-mobile). */