/* ============================================================
   GLOBAL BASE & DESIGN SYSTEM TOKENS — Engz Leads (Bahrain)
   Colors strictly: #5bc0de + white + black (+ WhatsApp #25D366)
   Zero Magic Numbers — 100% Configurable via CSS Variables
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

:root {
  /* ============================================================
     1. GLOBAL COLOR PALETTE
     ============================================================ */
  --brcn-color-cyan: #5bc0de;
  --brcn-color-white: #ffffff;
  --brcn-color-black: #000000;
  --brcn-color-wa: #25D366;
  --brcn-color-wa-dark: #1EBE5B;

  /* Semantic shortcuts */
  --brcn-main: var(--brcn-color-cyan);
  --brcn-white: var(--brcn-color-white);
  --brcn-black: var(--brcn-color-black);
  --brcn-wa: var(--brcn-color-wa);
  --brcn-wa-dark: var(--brcn-color-wa-dark);

  /* ============================================================
     2. GLOBAL TYPOGRAPHY & LAYOUT TOKENS
     ============================================================ */
  --brcn-font-family-base: "El Messiri", system-ui, -apple-system, sans-serif;
  --brcn-body-line-height: 1.8;
  --brcn-body-bg: var(--brcn-color-white);
  --brcn-body-color: var(--brcn-color-black);

  /* Selection & Focus */
  --brcn-selection-bg: var(--brcn-color-cyan);
  --brcn-selection-color: var(--brcn-color-black);
  --brcn-focus-outline-width: 3px;
  --brcn-focus-outline-style: solid;
  --brcn-focus-outline-color: var(--brcn-color-cyan);
  --brcn-focus-outline-offset: 2px;

  /* Screen Reader Tokens */
  --brcn-sr-size: 1px;
  --brcn-sr-offset: -1px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  direction: rtl;
  font-family: var(--brcn-font-family-base);
  overflow-x: clip;
  width: 100%;
  background-color: var(--brcn-body-bg);
  color: var(--brcn-body-color);
  line-height: var(--brcn-body-line-height);
}

button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--brcn-selection-bg);
  color: var(--brcn-selection-color);
}

:focus-visible {
  outline-width: var(--brcn-focus-outline-width);
  outline-style: var(--brcn-focus-outline-style);
  outline-color: var(--brcn-focus-outline-color);
  outline-offset: var(--brcn-focus-outline-offset);
}

.brcn-sr {
  position: absolute !important;
  width: var(--brcn-sr-size);
  height: var(--brcn-sr-size);
  padding: 0;
  margin: var(--brcn-sr-offset);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}