/* Locally hosted brand fonts and tokens used by the native shell. Page styles live in Elementor Kit. */

@font-face {
  font-family: "Geologica";
  src: url("../fonts/geologica/Geologica-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geologica";
  src: url("../fonts/geologica/Geologica-Variable.ttf") format("truetype");
  font-style: oblique 0deg 12deg;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Charter";
  src: url("../fonts/charter/charter-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Charter";
  src: url("../fonts/charter/charter-italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Charter";
  src: url("../fonts/charter/charter-bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Charter";
  src: url("../fonts/charter/charter-bold-italic.woff") format("woff");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Primitive — approved brand palette. */
  --vr-color-oxford-300: #4b87b6;
  --vr-color-oxford-500: #2b4e6a;
  --vr-color-oxford-700: #1e374a;
  --vr-color-safe-300: #aebfd1;
  --vr-color-cloud-500: #f0efeb;
  --vr-color-white: #ffffff;
  --vr-color-surgical-500: #1c2c37;
  --vr-color-surgical-700: #141f26;
  --vr-color-heart-500: #ead9ad;
  --vr-color-heart-700: #d1ac4c;

  /* Primitive — typography. */
  --vr-font-sans: "Geologica", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* The supplied Charter has Latin glyphs; Geologica covers Greek in mixed text. */
  --vr-font-serif: "Charter", "Geologica", system-ui, sans-serif;

  /* Primitive — shape, depth, motion. */
  --vr-radius-sm: 0.25rem;
  --vr-radius-md: 0.375rem;
  --vr-shadow-md: 0 12px 28px rgb(20 31 38 / 0.12);
  --vr-duration-fast: 120ms;
  --vr-duration-normal: 180ms;

  /* Semantic tokens used by the shell. */
  --vr-color-border-subtle: var(--vr-color-safe-300);
  --vr-color-focus: var(--vr-color-oxford-300);
  --vr-font-body: var(--vr-font-sans);
  --vr-font-heading: var(--vr-font-sans);

  /* Button metrics mirror the native Kit button specification for form adapters. */
  --vr-button-label-size: 16px;
  --vr-button-label-weight: 600;
  --vr-button-label-line-height: 1.4;
  --vr-button-min-height: 48px;
  --vr-button-padding-block: 12px;
  --vr-button-padding-inline: 24px;

  /* Keyboard focus contract shared by header, footer and forms. */
  --vr-focus-ring-width: 2px;
  --vr-focus-ring-offset: 2px;
}

/* Kit colors are declared on body, so resolve component aliases at the component. */
:where(.vr-button--accent, .vr-native__newsletter-form) {
  --vr-button-accent-background: var(--e-global-color-4141bd8, var(--vr-color-heart-500));
  --vr-button-accent-interactive: var(--e-global-color-6128c00, var(--vr-color-heart-700));
  --vr-button-accent-foreground: var(--e-global-color-31afe27, var(--vr-color-surgical-700));
  --vr-button-accent-focus: var(--e-global-color-8f42cbb, var(--vr-color-cloud-500));
  --vr-button-accent-disabled: var(--e-global-color-83f7f14, var(--vr-color-safe-300));
}

/* Accent controls on light surfaces retain the shared states with a dark focus ring. */
:where(.vr-button--accent.vr-button--on-light) {
  --vr-button-accent-focus: var(--e-global-color-primary, var(--vr-color-oxford-500));
}