/*
 * Darabi Design Tokens — sourced from Figma file jEVLZfWRq9c78oDPaSrWqY (Homepage v1).
 * Variables are CSS custom properties so per-widget Style controls can override per instance.
 */
.darabi-page {
  /* Colors — Primary */
  --darabi-primary: #013E55;
  --darabi-primary-80: #013F56;
  --darabi-primary-hover: #5e93a8;

  /* Colors — Neutral */
  --darabi-white: #FFFFFF;
  --darabi-n1: #2C3A4B;
  --darabi-n4: #6D7580;
  --darabi-n5: #858C94;
  --darabi-n6: #A5ABB3;
  --darabi-n7: #DADEE3;
  --darabi-n8: #EBEEF2;

  /* Hero overlay */
  --darabi-hero-overlay: rgba(1, 7, 15, 0.5);
  --darabi-hero-bg: #01070f;

  /* Typography */
  --darabi-font-display: "Jost", Arial, sans-serif;
  --darabi-font-body:    "Lato", Arial, sans-serif;

  /* Type ramp (1200+) */
  --darabi-display-l: 69px;     /* Hero title */
  --darabi-display-l-lh: 65px;
  --darabi-display-m: 57px;
  --darabi-display-m-lh: 64px;
  --darabi-f1: 48px;            /* Section heading large */
  --darabi-f1-lh: 52px;
  --darabi-f2: 40px;
  --darabi-f2-lh: 44px;
  --darabi-f3: 33px;
  --darabi-f3-lh: 36px;
  --darabi-f4: 28px;
  --darabi-f4-lh: 32px;
  --darabi-f5: 23px;
  --darabi-f5-lh: 24px;
  --darabi-p-large: 23px;       /* Hero subtitle, intro paragraph */
  --darabi-p-large-lh: 28px;
  --darabi-p-base: 16px;
  --darabi-p-base-lh: 24px;
  --darabi-p-small: 13px;       /* Nav link */
  --darabi-p-small-lh: 20px;

  /* Buttons */
  --darabi-btn-small-size: 14px;
  --darabi-btn-small-lh: 20px;
  --darabi-btn-medium-size: 16px;
  --darabi-btn-medium-lh: 24px;
  --darabi-btn-large-size: 18px;
  --darabi-btn-large-lh: 28px;

  /* Shadows */
  --darabi-shadow-elev1: 0 1px 3px rgba(0, 0, 0, 0.3);

  /* Radii */
  --darabi-radius-pill: 32px;
  --darabi-radius-md: 6px;

  /* Layout */
  --darabi-container-max: 1640px;
  --darabi-content-max: 1428px;     /* Figma content area inside sections */
  --darabi-header-height: 89px;
  --darabi-header-height-m: 72px;
  --darabi-hero-min-height: 689px;
  --darabi-hero-min-height-m: 480px;

  /* ── Responsive spacing tokens ─────────────────────────────
     Values are desktop defaults (≥ 1280). Tablet + mobile overrides below. */
  --darabi-section-py:   75px;   /* section vertical padding (Figma Frame137 py-75) */
  --darabi-section-px:   16px;   /* gutter outside 1428 content on narrow viewports */
  --darabi-block-gap:    75px;   /* between major sub-blocks in a section (Figma Frame137 gap-75) */
  --darabi-content-gap:  35px;   /* between heading/text/button (Figma Frame181 gap-35) */
  --darabi-row-gap:      150px;  /* between stacked feature rows e.g. Team Dr+PA (Figma Frame157 gap-150) */
  --darabi-grid-gap:     50px;   /* between cards in a row (Figma Frame162/Frame162 gap-50) */
}

/* ── Tablet (≤ 1279) ────────────────────────────────── */
@media (max-width: 1279px) {
  .darabi-page {
    --darabi-block-gap:    56px;
    --darabi-content-gap:  28px;
    --darabi-row-gap:      80px;
    --darabi-grid-gap:     36px;
  }
}

/* ── Mobile (≤ 768) ─────────────────────────────────── */
@media (max-width: 768px) {
  .darabi-page {
    --darabi-section-px:   24px;   /* mobile gutter (Figma: 24px each side) */
    --darabi-block-gap:    32px;
    --darabi-content-gap:  20px;
    --darabi-row-gap:      48px;
    --darabi-grid-gap:     24px;
  }
}