/*
 * Typography / FAQ design tokens.
 * Single place to change FAQ font, size, spacing and colours.
 * Values are provisional (no Figma yet): replace them here when the layout arrives.
 */
:root {
  --dli-faq-font-family: inherit;

  /* question */
  --dli-faq-q-size: 16px;
  --dli-faq-q-weight: 600;
  --dli-faq-q-lh: 24px;
  --dli-faq-q-ls: 0;

  /* answer */
  --dli-faq-a-size: 16px;
  --dli-faq-a-weight: 400;
  --dli-faq-a-lh: 26px;
  --dli-faq-a-ls: 0;

  /* colours */
  --dli-faq-q-color: #222;
  --dli-faq-a-color: rgba(48, 69, 92, 0.8);
  --dli-faq-bg: #f8f8f8;
  --dli-faq-bg-hover: #f1f1f1;
  --dli-faq-bg-active: #ebebeb;
  --dli-faq-border: #ececec;
  --dli-faq-icon: rgba(0, 0, 0, 0.25);
  --dli-faq-icon-hover: rgba(0, 0, 0, 0.6);
  --dli-faq-focus: #189930;

  /* spacing */
  --dli-faq-gap: 8px;
  --dli-faq-q-pad-y: 18px;
  --dli-faq-q-pad-l: 18px;
  --dli-faq-q-pad-r: 52px;
  --dli-faq-a-pad-y: 16px;
  --dli-faq-a-pad-x: 18px;
  --dli-faq-icon-gap: 12px;

  /* motion */
  --dli-faq-duration: 0.35s;
}

@media (max-width: 550px) {
  :root {
    --dli-faq-q-size: 15px;
    --dli-faq-q-lh: 22px;
    --dli-faq-a-size: 15px;
    --dli-faq-a-lh: 24px;
    --dli-faq-q-pad-y: 14px;
    --dli-faq-q-pad-l: 14px;
    --dli-faq-q-pad-r: 40px;
    --dli-faq-a-pad-y: 14px;
    --dli-faq-a-pad-x: 14px;
    --dli-faq-icon-gap: 8px;
  }
}

@media (min-width: 1024px) {
  :root {
    --dli-faq-q-size: 17px;
    --dli-faq-q-lh: 26px;
    --dli-faq-a-size: 17px;
    --dli-faq-a-lh: 28px;
  }
}