/*
Define all the required self hosted .woff and .woff2 font family weights here.
Each @font-face rule defines a new font-family/weight combination, and adds that
weight's availability to the font-family when we call the var later.
*/

@font-face {
  font-family: "FS Matthew";
  src:
    url("/assets/fsmatthew/fsmatthew-light-91f40a48.woff2") format("woff2"),
    url("/assets/fsmatthew/fsmatthew-light-1790558e.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FS Matthew";
  src:
    url("/assets/fsmatthew/fsmatthew-regular-4d0e0556.woff2") format("woff2"),
    url("/assets/fsmatthew/fsmatthew-regular-7247b8a8.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FS Matthew";
  src:
    url("/assets/fsmatthew/fsmatthew-medium-0c21291f.woff2") format("woff2"),
    url("/assets/fsmatthew/fsmatthew-medium-6ed7e6c5.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FS Matthew";
  src:
    url("/fsmatthew/fsmatthew-semibold.woff2") format("woff2"),
    url("/fsmatthew/fsmatthew-semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FS Matthew";
  src:
    url("/assets/fsmatthew/fsmatthew-bold-e29417e0.woff2") format("woff2"),
    url("/assets/fsmatthew/fsmatthew-bold-2027f33d.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
Size adjusted local fallback font
=================================
- To minimise CLS when the self-hosted font file loads in
- Use this link to determine the "web-safe" local fallback font
- size adjustments to match whichever google font is in use.
- https://www.industrialempathy.com/perfect-ish-font-fallback/?font=Open%20Sans
- Then assign a custom font-family name,
- And add it as the second font-family name in the `--fallback-font-stack`
*/

@font-face {
  font-family: 'Adjusted Arial Narrow Fallback';
  src: local(Arial Narrow);
  size-adjust: 112%;
  ascent-override: 73%;
  descent-override: normal;
  line-gap-override: normal;
}

:root {
  /* FONTS */
  /* Set the font-family declarations ie. 'FS Matthew' from @font-face rules to vars
  // And define their font fallback stack by testing web-safe fallback fonts for similar x,y, and kerning values */
  --fallback-font-stack-body:'Adjusted Arial Narrow Fallback', arial, sans-serif;
  --fallback-font-stack-heading: var(--fallback-font-stack-body);

  --font-stack-body: var(--ff-body), var(--fallback-font-stack-body);
  --font-stack-heading: var(--ff-headings), var(--fallback-font-stack-heading);
  --font-stack-code: monospace;


  /* BRAND COLOURS */
  --color-primary: var(--clr-primary-default); /* Primary brand colour */
  --color-primary-tint: var(--clr-primary-tint); /* Lighter */
  --color-primary-shade: var(--clr-primary-shade); /* Darker */
  --color-secondary: var(--color-primary); /* Secondary brand colour. Inherits primary colour by default */
  --color-secondary-tint: var(--color-primary-tint); /* Lighter */
  --color-secondary-shade: var(--color-primary-shade); /* Darker */
  --linear-gradient-primary: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-shade) 100%);


  /* FONT COLOURS */
  --text-color-base: var(--clr-neutral-800); /* Body text */
  --text-color-primary: var(--text-color-base); /* First text colour override */
  --text-color-secondary: var(--color-secondary); /* Second text colour override */
  --heading-color-base: var(--text-headings); /* Heading text */


  /* FORMS */
  --form-input-border-color: var(--border-primary);
  --form-input-bg-color: var(--clr-neutral-white);
  --form-input-height: var(--btn-height);
  --form-input-text-size: var(--fs-form-label); /* Should NEVER be smaller than 16px - but does new `touch-action: manipulation;` fix this now?? */
  --form-input-text-color: var(--text-body);
  --form-input-padding: var(--size-16);
  --grid-gap-form-small: calc(var(--grid-gap-form) / 2);
  --form-label-bottom-margin: var(--grid-gap-form-label-field);
  --form-label-text-color: var(--text-body);
  --form-label-line-height: var(--lh-p-md);
  --form-required-icon-color: var(--text-error);
  --form-checkbox-size: var(--size-20);

  /* BUTTONS */
  --btn-font-size: var(--fs-p-md);
  --btn-surface: var(--color-primary);
  --btn-surface-dark: var(--clr-neutral-900);
  --btn-surface-dark-hover: var(--clr-neutral-900);
  --btn-surface-secondary: var(--clr-neutral-100);
  --btn-surface-secondary-hover: var(--clr-neutral-200);
  --btn-text-color: var(--clr-neutral-white);
  --btn-text-color-hover: var(--clr-neutral-white);


  /* SURFACES (PANEL COLOURS MAINLY) */
  --surface-color: var(--clr-neutral-white);
  --surface-grey: var(--clr-neutral-50);
  --surface-pink: var(--clr-error-50);
  --surface-blue: var(--clr-information-50);
  --surface-green: var(--clr-success-50);
  --surface-orange: var(--clr-warning-50);
  --surface-black: var(--clr-neutral-925);
  --surface-brand: var(--color-primary);
  --surface-brand-gradient: var(--linear-gradient-primary);
  --surface-contrast-text-color: var(--clr-neutral-white);


  /* IMAGE PLACEHOLDERS */
  --placeholder-image-bg: var(--clr-neutral-200);


  /* CONTENT WIDTHS */
  --content-width: none;
  --site-content-max-width: 30000px; /* Overridden to 2500px if header-desktop.scss is loaded */


  /* BODY GUTTER */
  /* --body-gutter-small* has no token equivalent from Figma yet and stays. */
  --body-gutter-small: calc(var(--body-gutter) / 2);


  /* BORDER RADIUS */
  --border-clip: radial-gradient(white, black); /* Or `none` if border radius is zero, which avoids subpixel rendering ie. no mask means no "1px line" subpixel seams between consecutive tiled images, like we saw on LJ2024's image grid layouts.
  Explained further here: Safari border-radius bug fix: https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */


  /* GRID CELLS WITH BACKGROUNDS */
  --cell-background-padding: var(--inset-padding-md);
  --cell-background-border-radius: var(--radius-card);


  /* TEXT EXTRA SPACING INSIDE GRID CELLS WHEN NO GRID GAP*/
  --grid-cell-text-padding-right: var(--grid-gap);


  /* MODULE TITLES */
  --module-title-spacing-bottom-mobile: var(--size-20);
  --module-title-spacing-bottom-tablet: var(--size-32);
  --module-title-spacing-bottom-desktop: var(--size-36);
  --module-title-spacing-bottom: var(--module-title-spacing-bottom-mobile);


  /* CUSTOM SCROLLBARS */
  --scrollbar-base-color: var(--clr-neutral-200);
  --scrollbar-face-color: var(--color-primary);
  --scrollbar-height: var(--size-12);


  /* ANIMATIONS */
  --hover-transition-short-rotate: transform .2s ease-in-out;


  /* Z-INDEXING */
  --z-index-image-caption: 1;
  --z-index-figcaption: 1;
  --z-index-grid-cell-icon-overlay: 1;
  --z-index-glide-arrow: 2;
  --z-index-glide-bullets: 2;
  --z-index-subnav-toggle: 10;
  --z-index-banner-messages: 14;
  --z-index-sticky-header: 15;
  --z-index-desktop-subnav: 16;
  --z-index-search-bar: 17;
  --z-index-alert: 18;
  --z-index-nav-slide-in-ovelay: 19;
  --z-index-nav-slide-in: 20;
  --z-index-transparent-header: 21;
  --z-index-modal-window: 30;
  --z-index-modal-close-btn: 40;
  --z-index-modal-pulsing-loader: 50;
  --z-index-skip-content: 100;


  /* HEADER */
  --header-background: var(--clr-neutral-925);
  --header-lower-height-mobile: 6rem; /* 96px;*/
  --header-lower-height-tablet: 7.5rem; /* 120px;*/
  --header-lower-height-desktop: 7rem; /* 112px;*/
  --header-lower-height: var(--header-lower-height-mobile);

  --header-lower-height-sticky-mobile: 5rem; /* 80px;*/
  --header-lower-height-sticky-tablet: 5.75rem; /* 92px;*/
  --header-lower-height-sticky: var(--header-lower-height-sticky-mobile);

  --header-upper-height: 0px;

  --header-height: calc(var(--header-lower-height) + var(--header-upper-height));

  --header-logo-width: 9.375rem; /* 150px;*/
  --header-slide-in-nav-offset-mobile: 0rem;
  --header-slide-in-nav-offset-tablet: 0rem;
  --header-slide-in-nav-offset: var(--header-slide-in-nav-offset-mobile);

  --nav-item-padding-block: 0.5rem;
  --subnav-max-height-desktop: calc(90vh - var(--header-lower-height) - var(--header-upper-height));
  --subnav-bg-color-desktop: var(--clr-primary-default);


  @media (min-width: 768px) {
    /* MODULE TITLES */
    --module-title-spacing-bottom: var(--module-title-spacing-bottom-tablet);

    /* HEADER */
    --header-lower-height: var(--header-lower-height-tablet);
    --header-lower-height-sticky: var(--header-lower-height-sticky-tablet);
    --header-logo-width: 11.25rem; /* 180px;*/
    --header-slide-in-nav-offset: var(--header-slide-in-nav-offset-tablet);
  }

  @media (min-width: 960px) {
    /* MODULE TITLES */
    --module-title-spacing-bottom: var(--module-title-spacing-bottom-desktop);
  }

  @media (min-width: 1080px) {
    /* HEADER */
    --header-logo-width: 13.75rem; /* 220px;*/
    --header-lower-height: var(--header-lower-height-desktop);
  }
}