/* Logistiqo Design System V2
   Shared tokens only. No component or page-specific selectors. */

:root {
  /* Typography */
  --lq-font-heading: 'Geist', 'Roboto', Arial, sans-serif;
  --lq-font-body: 'Roboto', Arial, sans-serif;

  --lq-page-title-size: clamp(38px, calc(3vw - 1px), 42px);
  --lq-section-title-size: clamp(29px, calc(2vw - 1px), 31px);
  --lq-section-title-size-compact: clamp(26px, calc(1.8vw - 1px), 28px);
  --lq-subsection-title-size: 19px;
  --lq-card-title-size: 18px;
  --lq-intro-size: 17px;
  --lq-body-size: 15.5px;
  --lq-kicker-size: 11.5px;

  --lq-page-title-weight: 800;
  --lq-section-title-weight: 700;
  --lq-subsection-title-weight: 600;
  --lq-card-title-weight: 600;
  --lq-kicker-weight: 700;

  --lq-page-title-line: 1.07;
  --lq-section-title-line: 1.26;
  --lq-subsection-title-line: 1.3;
  --lq-intro-line: 1.62;
  --lq-body-line: 1.62;

  /* Colors */
  --lq-ink: #1e293b;
  --lq-ink-strong: #111827;
  --lq-muted: #64748b;
  --lq-muted-soft: #78859a;
  --lq-orange: var(--logistiqoorange-color, #ff3b06);
  --lq-orange-hover: var(--logistiqoorange-color-hover, #d52f00);
  --lq-light: #f5f7fc;
  --lq-dark: var(--darkbackground-color, #30384d);
  --lq-border: #e2e7eb;
  --lq-on-dark: #ffffff;
  --lq-on-dark-muted: rgba(255,255,255,.72);
  --lq-kicker-on-dark: #d7dfec;

  /* Widths */
  --lq-content-width: 1216px;
  --lq-heading-width: 720px;
  --lq-intro-width: 800px;

  /* Shape */
  --lq-radius-section: 30px;
  --lq-radius-card: 22px;
  --lq-radius-control: 999px;

  /* Accent */
  --lq-accent-width: 34px;
  --lq-accent-height: 3px;

  /* Vertical rhythm */
  /* Shared section-heading rhythm */
  --lq-eyebrow-title-gap: 10px;
  --lq-title-intro-gap: 25px;
  --lq-section-content-gap: 52px;

  /* Backward-compatible aliases for existing components */
  --lq-kicker-gap: var(--lq-eyebrow-title-gap);
  --lq-title-content-gap: var(--lq-title-intro-gap);
}

@media (max-width: 820px) {
  :root {
    --lq-page-title-size: clamp(35px, calc(6vw - 1px), 39px);
    --lq-section-title-size: 28px;
    --lq-intro-size: 16px;
  }
}

@media (max-width: 560px) {
  :root {
    --lq-page-title-size: 31px;
    --lq-section-title-size: 25px;
    --lq-section-title-size-compact: 24px;
    --lq-kicker-size: 10.5px;
  }
}