/* ---------------------------------------------------------------------------
 * Alagheza — Design System / Shared CSS Variables
 *
 * This is the single source of truth for all visual tokens.
 * Every section plugin enqueues this stylesheet.
 * --------------------------------------------------------------------------- */

:root {
  /* ── Brand colours ── */
  --al-blue:        #2E3192;
  --al-blue2:       #0B2E83;
  --al-blue-light:  #EAF2FF;
  --al-green:       #0E9F43;
  --al-green-light: #EAFBF0;
  --al-red:         #D6083B;
  --al-gold:        #F6B51E;
  --al-orange:      #F97316;
  --al-purple:      #7C3AED;

  /* ── Neutral / surface ── */
  --al-bg:          #F6F8FC;
  --al-card:        #FFFFFF;
  --al-text:        #101828;
  --al-text-soft:   #344054;
  --al-muted:       #667085;
  --al-line:        #E4E9F2;
  --al-soft:        #F2F5FB;
  --al-soft-blue:   #F8FBFF;

  /* ── Geometry ── */
  --al-radius:      18px;
  --al-radius-sm:   12px;
  --al-shadow:      0 8px 22px rgba(16, 24, 40, 0.06);
  --al-shadow-hover: 0 12px 28px rgba(16, 24, 40, 0.10);
  --al-transition:  0.18s ease;

  /* ── Typography ── */
  --al-font:        'Tajawal', Arial, sans-serif;
}

/* ── Reset & base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--al-bg);
  color: var(--al-text);
  font-family: var(--al-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

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

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

/* ── Utility / helpers ── */
.al-container {
  width: min(1560px, calc(100% - 36px));
  margin-inline: auto;
}

.al-page {
  max-width: 1920px;
  margin: auto;
}

.al-card {
  background: var(--al-card);
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius);
  box-shadow: var(--al-shadow);
}

.al-pad {
  padding: 20px;
}

.al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--al-radius-sm);
  padding: 12px 18px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: var(--al-transition);
  line-height: 1;
}

.al-btn--primary {
  background: var(--al-blue2);
  color: #fff;
}

.al-btn--secondary {
  background: #fff;
  color: var(--al-blue2);
  border: 1px solid #B8C5DD;
}

.al-btn--success {
  background: var(--al-green);
  color: #fff;
}

.al-btn--danger {
  background: var(--al-red);
  color: #fff;
}

.al-btn--block {
  width: 100%;
  text-align: center;
}

.al-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Screen breakpoints ── */
@media (max-width: 980px) {
  .al-container {
    width: min(100% - 24px, 680px);
  }
}

@media (max-width: 600px) {
  .al-container {
    width: min(100% - 16px, 520px);
  }
  .al-pad {
    padding: 16px;
  }
}