/*

  Hexacell brand tokens sampled from assets/images/HexacellLogo.png

  and assets/images/hexacell-mark.png (clustered RGB averages):

  - Dark green  #107848

  - Light green #68b848

  - Logo amber  #b07828 (product imagery / secondary accent)

  - UI yellow   #e8bc3a (primary actions; lightened from logo amber for dark-text contrast)

  - White       #ffffff

  - Black       #121412

*/

:root {

  --color-green-dark: #107848;

  --color-green-dark-deep: #0c5f39;

  --color-green-light: #68b848;

  --color-green-light-soft: #e8f6df;

  --color-yellow: #e8bc3a;

  --color-yellow-hover: #f0c94f;

  --color-amber: #b07828;

  --color-white: #ffffff;

  --color-black: #121412;

  --color-ink: #121412;

  --color-muted: #5a635c;

  --color-line: #e2e6e3;

  --color-line-dark: #1a4f35;

  --color-control-border: #7a847c;

  --color-error: #a12626;

  --color-stage: #b3b3b3;

  --color-on-dark: #ffffff;

  --color-muted-dark: #c5d4cb;

  --color-forest: var(--color-green-dark);

  --color-forest-hover: var(--color-green-dark-deep);

  --color-accent: var(--color-green-light);

  --color-ivory: var(--color-white);

  --color-paper: #f4f7f4;

  --color-charcoal: var(--color-green-dark-deep);

  --color-kraft: var(--color-amber);

  --font-sans: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --text-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);

  --text-body-lh: 1.6;

  --text-nav: 0.8125rem;

  --text-eyebrow: 0.6875rem;

  --display: clamp(2.35rem, 1.7rem + 2.1vw, 4.25rem);
  --title: clamp(1.7rem, 1.35rem + 1.35vw, 2.85rem);
  --title-sm: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --tracking-display: -0.048em;
  --tracking-title: -0.042em;

  --space-1: 4px;

  --space-2: 8px;

  --space-3: 12px;

  --space-4: 16px;

  --space-5: 24px;

  --space-6: 32px;

  --space-7: 48px;

  --space-8: 64px;

  --space-9: 96px;

  --container: 1200px;

  --gutter: 20px;

  --header-height: 68px;

  --radius-control: 999px;

  --radius-media: 12px;

  --radius-card: 16px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);

  --duration-ui: 280ms;

  --duration-accordion: 320ms;

  --duration-reveal: 800ms;

  --shadow-soft: 0 18px 50px rgb(16 120 72 / 0.1);

}



@media (min-width: 768px) {

  :root {

    --gutter: 32px;

    --header-height: 72px;

  }

}



@media (min-width: 1024px) {

  :root {

    --gutter: 48px;

  }

}