/*
  Hexacell brand tokens — minimal rhythm system
  Font: Work Sans | Palette from logo greens / yellow
*/

:root {
  --color-green-dark: #107848;
  --color-green-dark-deep: #0b5234;
  --color-green-light: #68b848;
  --color-green-light-soft: #f0f7ec;
  --color-yellow: #e8bc3a;
  --color-yellow-hover: #f0c94f;
  --color-amber: #b07828;
  --color-white: #ffffff;
  --color-black: #0e110f;
  --color-ink: #141916;
  --color-muted: #66706a;
  --color-line: #e6e9e7;
  --color-line-dark: #1a4f35;
  --color-control-border: #8a928c;
  --color-error: #a12626;
  --color-stage: #b3b3b3;
  --color-on-dark: #ffffff;
  --color-muted-dark: #c8d5cc;
  --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: #f6f7f6;
  --color-charcoal: var(--color-green-dark-deep);
  --color-kraft: var(--color-amber);

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

  --text-body: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --text-body-lh: 1.65;
  --text-nav: 0.875rem;
  --text-eyebrow: 0.6875rem;

  --display: clamp(2.4rem, 1.5rem + 2.8vw, 4rem);
  --title: clamp(1.6rem, 1.2rem + 1.3vw, 2.6rem);
  --title-sm: clamp(1.15rem, 1.05rem + 0.45vw, 1.5rem);
  --tracking-display: -0.035em;
  --tracking-title: -0.028em;

  /* 8px rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 112px;

  --section-y: clamp(4.5rem, 7vw, 7rem);
  --section-y-tight: clamp(3.5rem, 5vw, 5rem);
  --block-gap: 24px;

  --container: 1120px;
  --gutter: 20px;
  --header-height: 64px;

  --radius-control: 999px;
  --radius-media: 8px;
  --radius-card: 10px;
  --radius-soft: 6px;

  --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: 340ms;
  --duration-reveal: 800ms;

  --shadow-soft: 0 10px 30px rgb(10 30 20 / 0.05);
  --shadow-lift: 0 6px 20px rgb(10 30 20 / 0.07);
}

@media (min-width: 768px) {
  :root {
    --gutter: 36px;
    --header-height: 68px;
    --block-gap: 28px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
  }
}