@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2-variations");
}

:root {
  /* Color primitives */
  --color-neutral-0: #fff;
  --color-neutral-50: #f5f5f5;
  --color-neutral-100: #ececec;
  --color-neutral-500: #6e6e6e;
  --color-neutral-900: #171717;
  --color-alpha-ink-16: rgb(23 23 23 / 16%);
  --color-alpha-white-28: rgb(255 255 255 / 28%);
  --brand-primary: #11519e;
  --brand-secondary: #d44d08;
  --brand-tertiary: #d2c2aa;

  /* Legacy primitive aliases retained while old editorial CSS is migrated. */
  --color-ink: var(--color-neutral-900);
  --color-white: var(--color-neutral-0);
  --color-grey-50: var(--color-neutral-50);
  --color-grey-100: var(--color-neutral-100);
  --color-grey-500: var(--color-neutral-500);
  --color-border: var(--color-alpha-ink-16);
  --color-border-inverse: var(--color-alpha-white-28);

  /* Semantic color aliases */
  --background-default: var(--color-neutral-0);
  --background-subtle: var(--color-neutral-50);
  --background-inverse: var(--color-neutral-900);
  --text-default: var(--color-neutral-900);
  --text-subtle: var(--color-neutral-500);
  --text-inverse: var(--color-neutral-0);
  --text-links: var(--brand-primary);
  --border-default: var(--color-alpha-ink-16);
  --border-subtle: var(--color-neutral-100);
  --border-strong: var(--color-neutral-900);
  --action-primary: var(--color-neutral-900);
  --action-primary-hover: var(--color-neutral-500);
  --action-secondary: var(--color-neutral-0);
  --action-disabled: var(--color-neutral-100);
  --boxes-primary: var(--brand-primary);
  --boxes-secondary: var(--brand-secondary);
  --boxes-tertiary: var(--brand-tertiary);

  /* Typography: Wide mode */
  --font-sans: "Inter Variable", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-body: var(--font-weight-light);
  --font-weight-heading: var(--font-weight-light);
  --font-weight-heading-strong: var(--font-weight-semibold);
  --font-weight-label: var(--font-weight-light);
  --font-weight-metric: var(--font-weight-regular);
  --line-height-display: 1;
  --line-height-section: 1.4;
  --line-height-card: 1.2;
  --line-height-body: 1.4;
  --line-height-label: 1;
  --line-height-metric: 1;
  --letter-spacing-default: 0;
  --font-size-casestudy-title: 7.5rem;
  --font-size-section-title: 4rem;
  --font-size-card-title: 3rem;
  --font-size-subtitle: 2rem;
  --font-size-body: 1.5rem;
  --font-size-small: 1rem;
  --font-size-card-body: 1.5rem;
  --font-size-caption: 1rem;
  --font-size-metric: 4rem;
  --font-size-navigation: 1.125rem;
  --font-size-eyebrow: var(--font-size-caption);
  --font-size-display: var(--font-size-casestudy-title);
  --font-size-heading: var(--font-size-section-title);
  --font-size-lead: var(--font-size-subtitle);

  /* Primitive spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --space-7: 6.5rem;
  --space-8: 10rem;

  /* Responsive layout: Wide mode */
  --page-gutter: 6.5rem;
  --section-padding: 10rem;
  --card-padding: 3rem;
  --gap-small: 1.5rem;
  --gap-medium: 3rem;
  --gap-large: 5rem;
  --side-content-max: 56.25rem;
  --content-default: 50rem;
  --content-narrow: 37.5rem;
  --content-wide: 64rem;
  --content-width: var(--content-narrow);
  --media-width: 75rem;
  --wide-width: 107rem;
  --header-height: 5rem;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 1rem;
  --radius-container: 1.5rem;
  --radius-card: 3rem;
  --radius-media: 2.5rem;
  --radius-hero: 5.625rem;
  --radius-full: 999px;
  --radius-small: var(--radius-sm);
  --radius-pill: var(--radius-full);

  /* Border and elevation */
  --border-width-default: 1px;
  --border-width-strong: 4px;
  --elevation-none: none;
  --elevation-sm: 0 4px 8px rgb(0 0 0 / 8%);
  --elevation-md: 0 24px 55px rgb(0 0 0 / 14%);
  --shadow-card: var(--elevation-sm);
  --shadow-raised: var(--elevation-md);

  /* Motion */
  --duration-fast: 180ms;
  --duration-medium: 360ms;
  --duration-reveal: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Explicit semantic modes allow nested components to override their parent. */
:where([data-color-mode="light"]) {
  --background-default: var(--color-neutral-0);
  --background-subtle: var(--color-neutral-50);
  --background-inverse: var(--color-neutral-900);
  --text-default: var(--color-neutral-900);
  --text-subtle: var(--color-neutral-500);
  --text-inverse: var(--color-neutral-0);
  --text-links: var(--brand-primary);
  --border-default: var(--color-alpha-ink-16);
  --border-subtle: var(--color-neutral-100);
  --border-strong: var(--color-neutral-900);
  --action-primary: var(--color-neutral-900);
  --action-primary-hover: var(--color-neutral-500);
  --action-secondary: var(--color-neutral-0);
  --action-disabled: var(--color-neutral-100);
  --boxes-primary: var(--brand-primary);
  --boxes-secondary: var(--brand-secondary);
  --boxes-tertiary: var(--brand-tertiary);
}

/* Semantic Dark mode from the Figma Color collection. */
:where(.site-section--dark, .blackbackground, .card-list__card.is-inverted, [data-color-mode="dark"]) {
  --background-default: var(--color-neutral-900);
  --background-subtle: var(--color-neutral-900);
  --background-inverse: var(--color-neutral-0);
  --text-default: var(--color-neutral-0);
  --text-subtle: var(--color-neutral-100);
  --text-inverse: var(--color-neutral-900);
  --text-links: var(--brand-primary);
  --border-default: var(--color-alpha-white-28);
  --border-subtle: var(--color-neutral-500);
  --border-strong: var(--color-neutral-0);
  --action-primary: var(--color-neutral-0);
  --action-primary-hover: var(--color-neutral-100);
  --action-secondary: var(--color-neutral-900);
  --action-disabled: var(--color-neutral-500);
  --boxes-primary: var(--brand-primary);
  --boxes-secondary: var(--brand-secondary);
  --boxes-tertiary: var(--brand-tertiary);
}

/* Brand primitive modes from Figma. */
:where(.brand-biovolts, [data-brand="biovolts"]) {
  --brand-primary: #49a984;
  --brand-secondary: #2b2927;
  --brand-tertiary: #e9e9e9;
  --text-links: var(--brand-primary);
  --boxes-primary: var(--brand-primary);
  --boxes-secondary: var(--brand-secondary);
  --boxes-tertiary: var(--brand-tertiary);
}

:where(.brand-stannah, [data-brand="stannah"]) {
  --brand-primary: #a90f17;
  --brand-secondary: #f2c7c9;
  --brand-tertiary: #eee9db;
  --text-links: var(--brand-primary);
  --boxes-primary: var(--brand-primary);
  --boxes-secondary: var(--brand-secondary);
  --boxes-tertiary: var(--brand-tertiary);
}

:where(.brand-sword, [data-brand="sword"]) {
  --brand-primary: #e5534b;
  --brand-secondary: #3157d5;
  --brand-tertiary: #d8d2c4;
  --text-links: var(--brand-primary);
  --boxes-primary: var(--brand-primary);
  --boxes-secondary: var(--brand-secondary);
  --boxes-tertiary: var(--brand-tertiary);
}

/* Desktop mode — 1512 reference frame. */
@media (max-width: 94.5rem) {
  :root {
    --font-size-casestudy-title: 6.5rem;
    --font-size-section-title: 3.5rem;
    --font-size-card-title: 2.625rem;
    --font-size-body: 1.375rem;
    --font-size-card-body: 1.375rem;
    --font-size-metric: 3.5rem;
    --page-gutter: 4rem;
    --section-padding: 8rem;
    --card-padding: 2.5rem;
    --gap-medium: 2.5rem;
    --gap-large: 4rem;
    --side-content-max: 50rem;
    --content-default: 43.75rem;
    --content-wide: 57.75rem;
    --radius-card: 2.75rem;
    --radius-media: 2.25rem;
    --radius-hero: 4.5rem;
  }
}

/* Compact mode — 1280 reference frame. */
@media (max-width: 80rem) {
  :root {
    --font-size-casestudy-title: 5.5rem;
    --font-size-section-title: 3rem;
    --font-size-card-title: 2.25rem;
    --font-size-subtitle: 1.5rem;
    --font-size-body: 1.25rem;
    --font-size-small: 0.875rem;
    --font-size-card-body: 1.25rem;
    --font-size-caption: 0.875rem;
    --font-size-metric: 3rem;
    --page-gutter: 2.5rem;
    --section-padding: 6rem;
    --card-padding: 2rem;
    --gap-small: 1.25rem;
    --gap-medium: 2rem;
    --gap-large: 3rem;
    --side-content-max: 45rem;
    --content-default: 38.75rem;
    --content-narrow: 31.25rem;
    --content-wide: 50rem;
    --radius-container: 1.25rem;
    --radius-card: 2.5rem;
    --radius-media: 2rem;
    --radius-hero: 4rem;
  }
}

/* Tablet mode — 1024 reference frame. */
@media (max-width: 64rem) {
  :root {
    --font-size-casestudy-title: 3.75rem;
    --font-size-section-title: 2.5rem;
    --font-size-card-title: 2rem;
    --font-size-body: 1.125rem;
    --font-size-card-body: 1.125rem;
    --font-size-metric: 2.625rem;
    --page-gutter: 2rem;
    --section-padding: 5rem;
    --card-padding: 1.75rem;
    --gap-small: 1rem;
    --gap-medium: 1.5rem;
    --gap-large: 2.5rem;
    --side-content-max: 31.5rem;
    --content-default: 25.25rem;
    --content-narrow: 26.25rem;
    --content-wide: 38.75rem;
    --radius-container: 1.125rem;
    --radius-card: 2rem;
    --radius-media: 1.75rem;
    --radius-hero: 3rem;
  }
}

/* Mobile mode — 402 reference frame. */
@media (max-width: 35rem) {
  :root {
    --font-size-casestudy-title: 3.25rem;
    --font-size-section-title: 2.125rem;
    --font-size-card-title: 1.75rem;
    --font-size-subtitle: 1.375rem;
    --font-size-body: 1.125rem;
    --font-size-small: 0.875rem;
    --font-size-card-body: 1rem;
    --font-size-caption: 0.875rem;
    --font-size-metric: 2.25rem;
    --page-gutter: 1.5rem;
    --section-padding: 4rem;
    --card-padding: 1.5rem;
    --gap-small: 1rem;
    --gap-medium: 1.5rem;
    --gap-large: 2rem;
    --side-content-max: 21.375rem;
    --content-default: 21.375rem;
    --content-narrow: 21.375rem;
    --content-wide: 21.375rem;
    --radius-container: 1rem;
    --radius-card: 1.5rem;
    --radius-media: 1.5rem;
    --radius-hero: 2rem;
  }
}