/* ============================================================
   DGA "Platforms Code" Design System — tokens & base
   Ministry of Sport · Beneficiary Engagement Platform
   Extracted from official DGA foundations (color, type,
   elevation, buttons). Bilingual AR (RTL) / EN (LTR).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- Neutral / Gray ---- */
  --gray-25:#FCFCFD; --gray-50:#F9FAFB; --gray-100:#F3F4F6; --gray-200:#E5E7EB;
  --gray-300:#D2D6DB; --gray-400:#9DA4AE; --gray-500:#6C737F; --gray-600:#4D5761;
  --gray-700:#384250; --gray-800:#1F2A37; --gray-900:#111927; --gray-950:#0D121C;

  /* ---- Primary (SA green) ---- */
  --sa-25:#F7FDF9; --sa-50:#F3FCF6; --sa-100:#DFF6E7; --sa-200:#B8EACB;
  --sa-300:#88D8AD; --sa-400:#54C08A; --sa-500:#25935F; --sa-600:#1B8354;
  --sa-700:#166A45; --sa-800:#14573A; --sa-900:#104631; --sa-950:#092A1E;

  /* ---- Gold (secondary accent) ---- */
  --gold-25:#FFFEF7; --gold-50:#FFFEF2; --gold-100:#FFFCE6; --gold-200:#FCF3BD;
  --gold-300:#FAE996; --gold-400:#F7D54D; --gold-500:#F5BD02; --gold-600:#DBA102;
  --gold-700:#B87B02; --gold-800:#945C01; --gold-900:#6E3C00; --gold-950:#472400;

  /* ---- Lavender (secondary) ---- */
  --lav-50:#F9F5FA; --lav-100:#F2E9F5; --lav-200:#E1CCE8; --lav-300:#CCADD9;
  --lav-400:#A57BBA; --lav-500:#80519F; --lav-600:#6D428F; --lav-700:#532D75;
  --lav-800:#3D1D5E; --lav-900:#281047;

  /* ---- Semantic ---- */
  --error-50:#FEF3F2; --error-100:#FEE4E2; --error-200:#FECDCA; --error-300:#FDA29B;
  --error-500:#F04438; --error-600:#D92D20; --error-700:#B42318;
  --warning-50:#FFFAEB; --warning-100:#FEF0C7; --warning-200:#FEDF89; --warning-300:#FEC84B;
  --warning-500:#F79009; --warning-600:#DC6803; --warning-700:#B54708;
  --success-50:var(--sa-50); --success-100:var(--sa-100); --success-500:var(--sa-500); --success-600:var(--sa-600);
  --info-50:#EFF8FF; --info-100:#D1E9FF; --info-500:#2E90FA; --info-600:#1570EF;

  /* ---- Brand aliases ---- */
  --brand:var(--sa-600);
  --brand-strong:var(--sa-700);
  --brand-deep:var(--sa-900);
  --brand-wash:var(--sa-50);
  --brand-wash-2:var(--sa-100);
  --accent:var(--gold-500);
  --accent-deep:var(--gold-700);

  /* ---- Text ---- */
  --text:var(--gray-900);
  --text-2:var(--gray-700);
  --text-3:var(--gray-500);
  --text-on-brand:#ffffff;

  /* ---- Surfaces ---- */
  --bg:var(--gray-50);
  --surface:#ffffff;
  --surface-2:var(--gray-50);
  --line:var(--gray-200);
  --line-2:var(--gray-300);

  /* ---- Radius ---- */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:999px;

  /* ---- Shadows (DGA: base #101828) ---- */
  --sh-xs:0 1px 2px rgba(16,24,40,.05);
  --sh-sm:0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
  --sh-md:0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --sh-lg:0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
  --sh-xl:0 20px 24px -4px rgba(16,24,40,.08), 0 8px 8px -4px rgba(16,24,40,.03);
  --sh-2xl:0 24px 48px -12px rgba(16,24,40,.18);

  /* ---- Type scale (px / line-height) ---- */
  --d-2xl:72px; --d-xl:60px; --d-lg:48px; --d-md:36px; --d-sm:30px; --d-xs:24px;
  --t-xl:20px; --t-lg:18px; --t-md:16px; --t-sm:14px; --t-xs:12px;

  --font-ar:"IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-en:"IBM Plex Sans", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
}

/* ============================================================ Base */
*{box-sizing:border-box; margin:0; padding:0}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-ar);
  background:var(--bg); color:var(--text);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.en{ font-family:var(--font-en); }

/* Numbers & latin runs inside Arabic always look right */
.mono{font-family:var(--font-mono)}
.num{font-family:var(--font-en); font-feature-settings:"tnum" 1}

/* ---- Bilingual visibility ---- */
[data-en]{display:none}
body.en [data-ar]{display:none}
body.en [data-en]{display:revert}
.inline-en[data-en]{display:none}
body.en .inline-en[data-en]{display:inline}

a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--sa-500); outline-offset:2px}

/* ============================================================ Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:600; font-size:var(--t-sm);
  padding:10px 16px; border-radius:var(--r-sm); border:1px solid transparent;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
  white-space:nowrap; line-height:1;
}
.btn:active{transform:translateY(.5px)}
.btn .i{width:16px; height:16px; flex:none}
.btn-primary{background:var(--sa-600); color:#fff; box-shadow:var(--sh-xs)}
.btn-primary:hover{background:var(--sa-700)}
.btn-primary:active{background:var(--sa-800)}
.btn-dark{background:var(--gray-900); color:#fff}
.btn-dark:hover{background:var(--gray-800)}
.btn-secondary{background:#fff; color:var(--gray-700); border-color:var(--gray-300); box-shadow:var(--sh-xs)}
.btn-secondary:hover{background:var(--gray-50); border-color:var(--gray-400)}
.btn-ghost{background:transparent; color:var(--gray-600)}
.btn-ghost:hover{background:var(--gray-100); color:var(--gray-800)}
.btn-brand-soft{background:var(--sa-50); color:var(--sa-700); border-color:var(--sa-200)}
.btn-brand-soft:hover{background:var(--sa-100)}
.btn-lg{font-size:var(--t-md); padding:13px 22px; border-radius:var(--r-md)}
.btn-sm{font-size:var(--t-xs); padding:8px 12px}
.btn-block{width:100%}
.btn:disabled{opacity:.5; pointer-events:none}

/* ============================================================ Chips / tags / badges */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-xs); font-weight:600; padding:4px 10px; border-radius:var(--r-full);
  background:var(--gray-100); color:var(--gray-700); border:1px solid var(--gray-200);
}
.tag-brand{background:var(--sa-50); color:var(--sa-700); border-color:var(--sa-200)}
.tag-gold{background:var(--gold-100); color:var(--gold-800); border-color:var(--gold-300)}
.tag-error{background:var(--error-50); color:var(--error-700); border-color:var(--error-200)}
.tag-warning{background:var(--warning-50); color:var(--warning-700); border-color:var(--warning-200)}
.tag-info{background:var(--info-50); color:var(--info-600); border-color:var(--info-100)}
.tag-lav{background:var(--lav-100); color:var(--lav-700); border-color:var(--lav-200)}
.dot{width:8px; height:8px; border-radius:50%; flex:none}

/* ============================================================ Cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-sm)}
.card-flat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}

/* ============================================================ Helpers */
.row{display:flex; align-items:center; gap:12px}
.col{display:flex; flex-direction:column}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.muted{color:var(--text-3)}
.eyebrow{font-size:var(--t-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sa-600)}
body.en .eyebrow{letter-spacing:.08em}

/* scrollbars */
.scroll::-webkit-scrollbar{width:10px; height:10px}
.scroll::-webkit-scrollbar-thumb{background:var(--gray-300); border-radius:99px; border:2px solid transparent; background-clip:content-box}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--gray-400); background-clip:content-box}

/* brand mark */
.mos-mark{
  display:grid; place-items:center; flex:none; color:#fff; font-weight:700;
  background:linear-gradient(135deg, var(--sa-600), var(--sa-800));
  border-radius:var(--r-md);
}