/**
 * Evolabs responsive design system — shared tokens & base scaling (Jul 2026)
 *
 * Loads after global-refine.css. Desktop values in :root; tablet/mobile override
 * only inside max-width media queries — desktop (≥1025px) is never touched.
 *
 * Breakpoints:
 *   mobile  ≤767px
 *   tablet  768–1024px
 *   desktop ≥1025px
 */

:root {
  /* ── Typography (clamp: mobile floor → desktop ceiling) ── */
  --text-hero: clamp(1.75rem, 5vw, 4.5rem);
  --text-section: clamp(1.25rem, 3vw, 3rem);
  --text-subsection: clamp(1.125rem, 2.2vw, 2rem);
  --text-card-title: clamp(1.125rem, 2vw, 1.375rem);
  --text-body: clamp(0.9375rem, 1.3vw, 1.125rem);
  --text-small: clamp(0.8125rem, 1vw, 1rem);
  --text-eyebrow: clamp(0.6875rem, 0.9vw, 0.8125rem);

  --leading-hero: 1.12;
  --leading-heading: 1.2;
  --leading-body: 1.6;

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  --page-gutter: clamp(1.25rem, 4vw, 4rem);
  --space-section: clamp(3rem, 8vw, 7.5rem);
  --space-section-gap: clamp(2.5rem, 6vw, 5rem);
  --space-section-hero: clamp(4.5rem, 10vw, 11rem);
  --space-section-sm: clamp(2.5rem, 6vw, 5.5rem);
  --space-split: clamp(1.5rem, 4vw, 3.5rem);
  --space-head: clamp(0.5rem, 2vw, 1.5rem);
  --space-card-gap: clamp(1rem, 2.5vw, 2rem);
  --space-card-pad: clamp(1.125rem, 2vw, 1.5rem);
  --space-grid-gap: clamp(1rem, 3vw, 2.5rem);
  --space-paragraph: clamp(0.75rem, 1.5vw, 1.25rem);

  /* Buttons */
  --btn-height: clamp(2.5rem, 6vw, 3.25rem);
  --btn-font: clamp(0.8125rem, 1vw, 0.875rem);
  --btn-pad-x: clamp(1rem, 2vw, 1.25rem);
  --btn-icon: 1rem;

  /* Containers */
  --container: min(96vw, 100%);
  --container-wide: min(98vw, 100%);
  --max: var(--container);
  --max-hero: var(--container-wide);
  --max-prose: min(48rem, 100%);
  --max-heading: min(48ch, 100%);
}

/* ── Base typography (inherits tokens) ── */
body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
}

h2 {
  font-size: var(--text-section);
  line-height: var(--leading-heading);
}

h3 {
  font-size: var(--text-subsection);
  line-height: var(--leading-heading);
}

h4 {
  font-size: var(--text-card-title);
  line-height: var(--leading-heading);
}

p,
.section-intro,
.muted {
  font-size: var(--text-body);
}

small,
.caption,
.eyebrow {
  font-size: var(--text-eyebrow);
}

/* ── Sections & containers ── */
.section-inner {
  width: min(var(--max), calc(100% - 2 * var(--page-gutter)));
  padding-block: var(--space-section);
  padding-inline: var(--page-gutter);
  box-sizing: border-box;
}

.section + .section {
  margin-top: 0;
}

.section .section-heading {
  margin-bottom: var(--space-head);
}

.section .section-heading h2,
.section .section-heading h3 {
  margin-bottom: var(--space-head);
}

.section .section-heading p,
.section-intro {
  margin-top: 0;
  margin-bottom: 0;
  max-width: var(--max-prose);
}

/* ── Hero typography hooks ── */
.home-page .home-exec-hero h1,
.page-hero h1,
.products-page .products-hero-copy h1,
.solx-page .solx-hero-copy h1,
.company-page .cmp-hero-copy h1,
.demo-page .demo-hero h1,
.solution-builder-page .solution-builder-hero h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
}

.home-page .home-exec-hero-lead,
.page-hero .section-intro,
.page-hero p:not(.eyebrow),
.products-page .products-hero-copy .hero-lead,
.solx-page .solx-hero-lead,
.company-page .cmp-hero-lead,
.demo-page .demo-hero-lead {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: min(58ch, 100%);
}

/* ── Buttons (base; mobile-design-system.css tightens on phone) ── */
.primary-action,
.secondary-action,
.demo-button,
.btn-liquid {
  font-size: var(--btn-font);
  min-height: var(--btn-height);
}

.hero-actions {
  gap: var(--space-card-gap);
  margin-top: var(--space-4);
}

/* ── Adaptive grid utility ── */
.u-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-grid-gap);
}

/* ── Tablet (768–1024px) ── */
@media (max-width: 1024px) {
  :root {
    --page-gutter: 2.5rem; /* 40px */
    --space-section: clamp(3rem, 7vw, 3.5rem);
    --space-card-gap: 1rem;
    --space-card-pad: 1.25rem;
  }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  :root {
    --page-gutter: 1.25rem; /* 20px */
    --space-section: clamp(3rem, 10vw, 3.5rem); /* 48–56px */
    --space-section-gap: clamp(2.5rem, 8vw, 3rem); /* 40–48px */
    --space-section-sm: clamp(2rem, 6vw, 2.5rem);
    --space-card-gap: 1rem; /* 16px */
    --space-card-pad: 1.125rem; /* 18px */
    --space-grid-gap: 1rem;
    --space-head: clamp(0.5rem, 2vw, 0.75rem); /* 8–12px */

    --text-hero: clamp(1.625rem, 6.5vw, 1.75rem); /* 26–28px */
    --text-section: clamp(1.125rem, 4vw, 1.25rem); /* 18–20px */
    --text-subsection: clamp(1rem, 3.2vw, 1.125rem); /* 16–18px */
    --text-card-title: clamp(1rem, 3.5vw, 1.125rem); /* 16–18px */
    --text-body: clamp(0.875rem, 2.3vw, 0.9375rem); /* 14–15px */
    --text-small: clamp(0.75rem, 1.8vw, 0.8125rem); /* 12–13px */
    --text-eyebrow: clamp(0.75rem, 1.8vw, 0.8125rem); /* 12–13px */

    --btn-height: clamp(2.5rem, 6vw, 2.75rem); /* 40–44px */
    --btn-font: 0.8125rem; /* 13px */
    --btn-pad-x: clamp(1rem, 3vw, 1.25rem); /* 16–20px */
    --btn-icon: 1rem; /* 16px */
  }

  .section-inner {
    padding-block: var(--space-section);
  }

  .section + .section .section-inner {
    padding-top: var(--space-section-gap);
  }
}

/* ── Small phone (≤640px) — denser tokens only ── */
@media (max-width: 640px) {
  :root {
    --page-gutter: 1rem; /* 16px */
    --space-section: clamp(2.5rem, 9vw, 3rem); /* 40–48px */
    --space-section-gap: clamp(2rem, 7vw, 2.5rem); /* 32–40px */
    --space-section-sm: clamp(1.75rem, 5vw, 2.25rem);
    --space-card-gap: 0.875rem; /* 14px */
    --space-card-pad: 1rem; /* 16px */
    --space-grid-gap: 0.875rem;
    --space-head: 0.5rem; /* 8px */

    --text-hero: clamp(1.5rem, 6.2vw, 1.625rem); /* 24–26px */
    --text-section: clamp(1.0625rem, 4vw, 1.1875rem); /* 17–19px */
    --text-subsection: clamp(0.9375rem, 3.2vw, 1.0625rem);
    --text-card-title: clamp(0.9375rem, 3.4vw, 1.0625rem);
    --text-body: clamp(0.8125rem, 2.4vw, 0.875rem); /* 13–14px */
    --text-small: clamp(0.6875rem, 1.8vw, 0.75rem);
    --text-eyebrow: clamp(0.6875rem, 1.8vw, 0.75rem);

    --btn-height: 2.5rem; /* 40px */
    --btn-font: 0.75rem; /* 12px */
    --btn-pad-x: 0.875rem;
    --btn-icon: 0.9375rem;
  }
}