/* Design tokens — the source of truth. The Bricks colour palette mirrors these. */
:root {
  --af-petrol: #12303f;
  --af-steel: #3f6478;
  --af-lsteel: #7fb0bf;
  --af-psteel: #cdd8dd;
  --af-psteel-2: #aec3cc;
  --af-bg: #eef2f4;
  --af-white: #ffffff;
  --af-body: #3a4c56;
  --af-meta: #61727b;
  --af-hair: #d5dee2;
  --af-ok: #3fae6b;

  --af-container: 1240px;

  --af-section-y: 88px;
  --af-section-x: 56px;

  --af-font-sans: "Tajawal", system-ui, sans-serif;
  --af-font-serif: "Newsreader", Georgia, serif;
  --af-font-label: "Work Sans", system-ui, sans-serif;
}

@media (max-width: 991px) {
  :root { --af-section-y: 56px; --af-section-x: 32px; }
}

@media (max-width: 767px) {
  :root { --af-section-y: 40px; --af-section-x: 20px; }
}

body { text-wrap: pretty; }

/*
 * Base typography.
 *
 * Bricks sets type per element, which covers everything placed in a template
 * but leaves plain content — paragraphs inside a rich-text block, list items,
 * form labels, anything added later through the editor — on the browser
 * default (15px system sans). These rules give that content the Meridian
 * baseline from the design handoff; any Bricks element setting still wins,
 * because Bricks emits #id / .brxe- selectors of higher specificity.
 */
body {
  font-family: var(--af-font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 2;
  color: var(--af-body);
  background-color: var(--af-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--af-font-sans);
  font-weight: 700;
  line-height: 1.25;
  color: var(--af-petrol);
}