/**
 * DQA — Bricks design variables
 * Source: Figma EUngmsPkQw7kQfG0FZ7Pyz (Ui Designs)
 * Named Figma vars: color/greys/Rich Black, color/brand/Soft Sand, H1/H2/para text
 * Plus sampled from Header, Footer, Hero, Buttons, FAQ
 *
 * Paste into Bricks → Settings → Custom CSS (or enqueue in child theme).
 * Map the same names as Bricks CSS variables for class reuse.
 */

:root {
  /* —— Brand colors (from Figma + sampled nodes) —— */
  --dqa-color-rich-black: #121212; /* color/greys/Rich Black */
  --dqa-color-soft-sand: #fff3e8; /* color/brand/Soft Sand */
  --dqa-color-cream: #faf4eb; /* decorative / FAQ motif */

  --dqa-color-ink: #111e27; /* primary text (header/hero) */
  --dqa-color-muted: #737373; /* body / captions */
  --dqa-color-white: #ffffff;
  --dqa-color-border: #e5e5e5;
  --dqa-color-border-strong: #a3a3a3;
  --dqa-color-border-soft: rgba(217, 226, 236, 0.5);

  --dqa-color-brand: #8d0052; /* GradeLink / accent magenta */
  --dqa-color-brand-bright: #cc0277; /* badge dot / highlights */
  --dqa-color-brand-deep: #6f0c44; /* decorative plum */

  --dqa-color-teal: #13312f; /* primary CTA fill */
  --dqa-color-teal-mid: #004a46;
  --dqa-color-teal-bright: #00736d;
  --dqa-color-sand: var(--dqa-color-soft-sand);

  --dqa-color-footer: #001e34;
  --dqa-color-footer-text: #e5e5e5;
  --dqa-color-footer-muted: rgba(255, 255, 255, 0.4);
  --dqa-color-footer-divider: rgba(255, 255, 255, 0.1);
  --dqa-color-footer-icon-bg: rgba(255, 255, 255, 0.1);

  /* —— Typography —— */
  --dqa-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --dqa-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Desktop type scale (Figma styles) */
  --dqa-text-h1-size: 72px;
  --dqa-text-h1-line: 84px;
  --dqa-text-h1-weight: 500;

  --dqa-text-h2-size: 52px;
  --dqa-text-h2-line: 64px;
  --dqa-text-h2-weight: 500;

  --dqa-text-h3-size: 32px;
  --dqa-text-h3-line: 46px;
  --dqa-text-h3-weight: 400;

  --dqa-text-h4-size: 18px;
  --dqa-text-h4-line: 28px;
  --dqa-text-h4-weight: 500;

  --dqa-text-body-size: 16px;
  --dqa-text-body-line: 27px;
  --dqa-text-body-weight: 400;

  --dqa-text-small-size: 14px;
  --dqa-text-small-line: 20px;

  --dqa-text-caption-size: 12px;
  --dqa-text-caption-line: 20px;

  --dqa-text-label-size: 10px;
  --dqa-text-label-tracking: 0.04em;

  --dqa-text-btn-size: 15px;
  --dqa-text-btn-line: 19px;
  --dqa-text-btn-weight: 500;

  /* —— Layout —— */
  --dqa-container: 1280px;
  --dqa-container-narrow: 843px; /* FAQ column */
  --dqa-section-pad-y: 120px;
  --dqa-section-pad-x: 80px;
  --dqa-header-height: 94px;
  --dqa-header-pad-x: 75px;
  --dqa-gutter: 16px;
  --dqa-grid-gap: 16px;

  /* —— Radii —— */
  --dqa-radius-pill: 100px;
  --dqa-radius-card: 20px;
  --dqa-radius-panel: 12px;
  --dqa-radius-faq: 11px;
  --dqa-radius-badge: 9999px;

  /* —— Controls —— */
  --dqa-btn-height: 56px;
  --dqa-btn-pad-x: 24px;
  --dqa-btn-pad-y: 10px;

  /* —— Breakpoints (reference; Bricks uses its own UI) ——
     Desktop artboard ~1440 / content ~1280
     Mobile artboard content ~390
     Mid viewports: interpolate (no tablet frames in Figma) */
  --dqa-bp-mobile: 767px;
  --dqa-bp-tablet: 991px;
  --dqa-bp-desktop: 1199px;
}

/* —— Mid viewport (tablet): no Figma frames — interpolate desktop ↔ mobile —— */
@media (max-width: 1199px) {
  :root {
    --dqa-text-h1-size: 56px;
    --dqa-text-h1-line: 66px;
    --dqa-text-h2-size: 40px;
    --dqa-text-h2-line: 50px;
    --dqa-text-h3-size: 28px;
    --dqa-text-h3-line: 38px;
    --dqa-section-pad-y: 80px;
    --dqa-section-pad-x: 40px;
    --dqa-header-pad-x: 40px;
  }
}

/* —— Mobile (~390 content width) —— */
@media (max-width: 767px) {
  :root {
    --dqa-text-h1-size: 36px;
    --dqa-text-h1-line: 44px;
    --dqa-text-h2-size: 32px;
    --dqa-text-h2-line: 40px;
    --dqa-text-h3-size: 24px;
    --dqa-text-h3-line: 32px;
    --dqa-section-pad-y: 64px;
    --dqa-section-pad-x: 20px; /* 390 frame uses ~20px inset (350 content) */
    --dqa-header-height: 80px;
    --dqa-header-pad-x: 20px;
    --dqa-btn-height: 48px;
    --dqa-container-narrow: 100%;
  }
}

/* —— Semantic aliases (use these in Bricks classes) —— */
:root {
  --dqa-bg-page: var(--dqa-color-white);
  --dqa-bg-soft: var(--dqa-color-soft-sand);
  --dqa-bg-dark: var(--dqa-color-footer);
  --dqa-bg-cta: var(--dqa-color-teal);

  --dqa-text: var(--dqa-color-ink);
  --dqa-text-secondary: var(--dqa-color-muted);
  --dqa-text-on-dark: var(--dqa-color-footer-text);
  --dqa-text-on-brand: var(--dqa-color-white);

  --dqa-accent: var(--dqa-color-brand);
  --dqa-accent-bright: var(--dqa-color-brand-bright);
}