/* Design foundations: custom properties only (no base styles, safe to load anywhere).
   Generated by ux-design-foundations from config.json. Regenerate, do not hand-edit.
   Dark values apply when <body data-om-theme="dark"> is set by site-enhancements.js. */
:root{
  --hairline:#EAEAEA; /* 1px dividers and card edges, theme-aware */
  /* Spacing - base unit 8px */
  /* --space-N = N x 4px (Tailwind convention); only on-grid steps exist */
  --space-0: 0; /* 0px */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */
  --space-2xs: var(--space-1);
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);
  --space-4xl: var(--space-24);
  --control-height-sm: 2.25rem; /* 36px */
  --control-height-md: 2.5rem; /* 40px */
  --control-height-lg: 3rem; /* 48px */
  --touch-target-min: 3rem; /* 48px */

  /* Typography */
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;
  --measure: 66ch; /* comfortable line length */
  --text-xs-size: 0.75rem;
  --text-xs-line-height: 1rem;
  --text-xs-weight: 400;
  --text-xs-tracking: 0px;
  --text-sm-size: 0.8125rem;
  --text-sm-line-height: 1.25rem;
  --text-sm-weight: 400;
  --text-sm-tracking: 0px;
  --text-base-size: 1rem;
  --text-base-line-height: 1.5rem;
  --text-base-weight: 400;
  --text-base-tracking: 0px;
  --text-lg-size: 1.25rem;
  --text-lg-line-height: 2rem;
  --text-lg-weight: 400;
  --text-lg-tracking: 0px;
  --text-xl-size: clamp(1.25rem, 1.146rem + 0.463vw, 1.562rem); /* 25px max */
  --text-xl-line-height: 1.28; /* unitless so it scales with fluid size */
  --text-xl-weight: 600;
  --text-xl-tracking: 0px;
  --text-2xl-size: clamp(1.438rem, 1.271rem + 0.7407vw, 1.938rem); /* 31px max */
  --text-2xl-line-height: 1.29; /* unitless so it scales with fluid size */
  --text-2xl-weight: 600;
  --text-2xl-tracking: -0.31px;
  --text-3xl-size: clamp(1.812rem, 1.604rem + 0.9259vw, 2.438rem); /* 39px max */
  --text-3xl-line-height: 1.23; /* unitless so it scales with fluid size */
  --text-3xl-weight: 700;
  --text-3xl-tracking: -0.39px;
  --text-4xl-size: clamp(2.312rem, 2.062rem + 1.111vw, 3.062rem); /* 49px max */
  --text-4xl-line-height: 1.22; /* unitless so it scales with fluid size */
  --text-4xl-weight: 700;
  --text-4xl-tracking: -0.49px;
  --text-5xl-size: clamp(2.875rem, 2.562rem + 1.389vw, 3.812rem); /* 61px max */
  --text-5xl-line-height: 1.18; /* unitless so it scales with fluid size */
  --text-5xl-weight: 700;
  --text-5xl-tracking: -0.61px;

  /* Grid */
  --grid-columns: 4;
  --grid-gutter: 1rem;
  --grid-margin: 1rem;
  --container-max: 1200px;
  --container-app-max: none; /* app shells: fluid up to this */
  --section-space: 4rem; /* vertical rhythm between page sections (spacious) */

  /* Shape */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --radius-control: 8px;

  --color-brand: #12B33F; /* exact brand hex - logos, illustrations, locked */
  /* Colour - light */
  
  --color-primary: #12B33F;
  --color-on-primary: #000000;
  --color-primary-container: #76FE88;
  --color-on-primary-container: #002105;
  --color-secondary: #4D644F;
  --color-on-secondary: #FFFFFF;
  --color-secondary-container: #CFE9D0;
  --color-on-secondary-container: #0C200E;
  --color-tertiary: #27676F;
  --color-on-tertiary: #FFFFFF;
  --color-tertiary-container: #AEEDF6;
  --color-on-tertiary-container: #001F23;
  --color-error: #B4271F;
  --color-on-error: #FFFFFF;
  --color-error-container: #FFDAD4;
  --color-on-error-container: #410001;
  --color-surface: #F9F9F9;
  --color-on-surface: #1B1B1B;
  --color-surface-variant: #E5E2DB;
  --color-on-surface-variant: #494740;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F3F3F3;
  --color-surface-container: #EEEEEE;
  --color-surface-container-high: #E8E8E8;
  --color-surface-container-highest: #E2E2E2;
  --color-outline: #797770;
  --color-outline-variant: #C9C6BF;
  --color-inverse-surface: #303030;
  --color-inverse-on-surface: #F1F1F1;
  --color-inverse-primary: #56E16C;
  --color-scrim: #000000;
  --color-link: #007424;
}
html:has(body[data-om-theme="dark"]){
  --hairline:#333333;
  --color-primary: #12B33F;
  --color-on-primary: #000000;
  --color-primary-container: #005317;
  --color-on-primary-container: #76FE88;
  --color-secondary: #B4CDB5;
  --color-on-secondary: #203522;
  --color-secondary-container: #364C38;
  --color-on-secondary-container: #CFE9D0;
  --color-tertiary: #92D1D9;
  --color-on-tertiary: #00363C;
  --color-tertiary-container: #054F56;
  --color-on-tertiary-container: #AEEDF6;
  --color-error: #FFB4A8;
  --color-on-error: #690001;
  --color-error-container: #930003;
  --color-on-error-container: #FFDAD4;
  --color-surface: #131313;
  --color-on-surface: #E2E2E2;
  --color-surface-variant: #494740;
  --color-on-surface-variant: #C9C6BF;
  --color-surface-container-lowest: #0E0E0E;
  --color-surface-container-low: #1B1B1B;
  --color-surface-container: #1F1F1F;
  --color-surface-container-high: #2A2A2A;
  --color-surface-container-highest: #353535;
  --color-outline: #939089;
  --color-outline-variant: #494740;
  --color-inverse-surface: #E2E2E2;
  --color-inverse-on-surface: #303030;
  --color-inverse-primary: #12B33F;
  --color-scrim: #000000;
  --color-link: #56E16C;
}
@media (min-width: 600px) { :root {
    --grid-columns: 8;
    --grid-gutter: 1.5rem;
    --grid-margin: 1.5rem;
    --section-space: 6rem;
  } }
@media (min-width: 840px) { :root {
    --grid-columns: 12;
    --grid-gutter: 1.5rem;
    --grid-margin: 1.5rem;
    --section-space: 8rem;
  } }
@media (min-width: 1200px) { :root {
    --grid-columns: 12;
    --grid-gutter: 1.5rem;
    --grid-margin: 2rem;
  } }
@media (min-width: 1600px) { :root {
    --grid-columns: 12;
    --grid-gutter: 2rem;
    --grid-margin: 2rem;
  } }