/* =============================================================================
   Dr Hussin Darwesh — design system
   Phase 5 of the platform rebuild. Single source of truth for colour, type,
   spacing, elevation and radius. Every page must consume these tokens rather
   than restating literals, which is how the old theme ended up with 493
   distinct hex values across its stylesheets.

   NOTE ON THE PALETTE
   The approved reference is blue-forward (#0B1D3A / #2563EB / #60A5FA /
   #F2B705). His actual logo is navy + gold (#032D58 / #C59848). Anchoring the
   BRAND to the logo — a personal brand must match its own mark — and using the
   reference's blue as the INTERACTIVE colour, which is what it is doing there
   anyway (buttons, links, active states). Gold stays for achievement and
   emphasis, exactly as in the reference.

   CONTRAST (measured, not assumed) — against #FFFFFF:
     navy-900 #0B1D3A  17.4:1   body/heading  AAA
     navy-700 #032D58  13.8:1   body/heading  AAA
     blue-600 #2563EB   5.2:1   body          AA
     gold-500 #C59848   2.6:1   DECORATIVE / large display ONLY
     gold-ink #72582A   6.7:1   gold-toned TEXT on light
   ========================================================================== */

/* --- Alexandria: headings. Arabic subset only, variable weight 400-700. ----
   Self-hosted deliberately: a font CDN is a third-party request on every page
   and the site must not depend on one to render its own language. */
@font-face{
  font-family:"Alexandria";
  src:url("../fonts/Alexandria-arabic-var.woff2") format("woff2-variations");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0020-007F;
}

:root{
  /* ---- brand ---- */
  /* ---- GROUND tokens: never redefined per theme ----------------------
     --dh-navy-* do double duty: as INK ("brand navy text") they must lighten
     in dark mode, and the dark blocks below flip --dh-navy-700 to #8FBEF2 for
     exactly that reason. But the hero band paints a GROUND with them, so in
     dark mode its gradient ran navy -> navy -> pale blue and the stat labels
     fell to 3.6:1. A ground that is dark by design must not follow the theme.
     Use --dh-ground-* for any always-dark surface; --dh-navy-* for ink. */
  --dh-ground-900:#0B1D3A;
  --dh-ground-800:#06254A;
  --dh-ground-700:#032D58;

  /* Primary action stays the same blue in both themes. --dh-blue-600 flips to
     #6FA8E8 in dark, which put white button text at 2.49:1 on every
     .dh-btn--primary (including the bank-card CTAs). */
  --dh-blue-action:#2563EB;

  --dh-navy-900:#0B1D3A;   /* deepest ground: hero, footer, dark bands */
  --dh-navy-800:#06254A;
  --dh-navy-700:#032D58;   /* HIS logo navy — the brand anchor */
  --dh-navy-600:#123E70;
  --dh-navy-500:#21466C;

  --dh-blue-600:#2563EB;   /* primary action (reference) */
  --dh-blue-500:#3B7BF0;
  --dh-blue-400:#60A5FA;   /* soft accents, chart fills */
  --dh-blue-50:#EFF5FF;

  --dh-gold-600:#A97C2E;
  --dh-gold-500:#C59848;   /* HIS logo gold — achievement, emphasis */
  --dh-gold-400:#F2B705;   /* reference highlight, scores */
  --dh-gold-ink:#72582A;   /* the ONLY gold safe for body text on light */
  --dh-gold-50:#FDF6E6;

  /* ---- semantic (separate from brand accent, per Material guidance) ---- */
  --dh-success:#1C6B3C;  --dh-success-bg:#E8F5EE;
  --dh-danger:#B3261E;   --dh-danger-bg:#FDECEA;
  --dh-warning:#8A5A00;  --dh-warning-bg:#FFF6E3;
  --dh-info:#1D5FA8;     --dh-info-bg:#E9F2FC;

  /* ---- neutrals: biased slightly warm toward the gold, so they read as
          chosen rather than inherited grey ---- */
  --dh-surface:#FFFFFF;
  --dh-surface-2:#F5F7FA;
  --dh-surface-3:#EDF1F6;
  --dh-ink:#0F1E33;
  --dh-ink-2:#41566F;
  /* 4.12:1 at #6B7F96 -- failed 4.5 on 13px secondary text in 15 places.
     #5F7185 = 5.02 on white, 4.63 on the tinted surface. Measured. */
  --dh-ink-3:#5F7185;
  --dh-ink-disabled:#9AA9BA;
  --dh-line:#DCE3EC;
  --dh-line-soft:#EAEFF5;

  /* ---- type ---- */
  --dh-font-display:"Alexandria","IBMPlexArabic","Segoe UI",Tahoma,sans-serif;
  --dh-font-body:"IBMPlexArabic","Alexandria","Segoe UI",Tahoma,sans-serif;

  /* Arabic line boxes are taller than Latin: 1.25 leading made headings
     literally touch (measured 43px ink in 42.5px of leading). These are the
     corrected values. */
  --dh-lh-display:1.35;
  --dh-lh-heading:1.45;
  --dh-lh-body:1.75;

  --dh-fs-display:clamp(32px,5vw,56px);
  --dh-fs-h1:clamp(27px,3.8vw,40px);
  --dh-fs-h2:clamp(22px,2.8vw,30px);
  --dh-fs-h3:20px;
  --dh-fs-body:16px;
  --dh-fs-body-sm:15px;
  --dh-fs-label:13.5px;
  --dh-fs-help:13px;
  --dh-fs-stat:clamp(26px,3vw,34px);

  /* ---- spacing: 4pt rhythm ---- */
  --dh-s1:4px;  --dh-s2:8px;  --dh-s3:12px; --dh-s4:16px;
  --dh-s5:20px; --dh-s6:24px; --dh-s8:32px; --dh-s10:40px;
  --dh-s12:48px; --dh-s16:64px; --dh-s20:80px;

  /* ---- radius: moderate, per the reference brief ("زوايا متوسطة الاستدارة") ---- */
  --dh-r-sm:8px; --dh-r:12px; --dh-r-lg:16px; --dh-r-pill:999px;

  /* ---- elevation: one consistent scale, light shadows ---- */
  --dh-e1:0 1px 2px rgba(11,29,58,.06);
  --dh-e2:0 1px 2px rgba(11,29,58,.06),0 8px 20px -8px rgba(11,29,58,.14);
  --dh-e3:0 2px 4px rgba(11,29,58,.07),0 20px 44px -16px rgba(11,29,58,.22);

  --dh-measure:64ch;
  --dh-container:1180px;

  /* ---- z-index scale ---- */
  --dh-z-base:0; --dh-z-sticky:40; --dh-z-header:50; --dh-z-drawer:80;
  --dh-z-modal:100; --dh-z-toast:120;
}

/* ---- dark theme: tokens only. Components must never restate colours inside
        a media query, or the runtime toggle cannot override them. ---- */
@media (prefers-color-scheme:dark){
  :root{
    --dh-surface:#0F2035; --dh-surface-2:#0A1626; --dh-surface-3:#152A44;
    --dh-ink:#E8EEF6; --dh-ink-2:#A9BBCF; --dh-ink-3:#8496AC; --dh-ink-disabled:#5C7086;
    --dh-success:#5FD69A; --dh-success-bg:#123227;
    --dh-line:#22354C; --dh-line-soft:#1B2C40;
    --dh-blue-600:#6FA8E8; --dh-blue-500:#8FBEF2; --dh-blue-50:#132840;
    --dh-gold-ink:#E0BC7B; --dh-navy-700:#8FBEF2;
    --dh-e1:0 1px 2px rgba(0,0,0,.4);
    --dh-e2:0 1px 2px rgba(0,0,0,.4),0 8px 20px -8px rgba(0,0,0,.6);
    --dh-e3:0 2px 4px rgba(0,0,0,.5),0 20px 44px -16px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --dh-surface:#0F2035; --dh-surface-2:#0A1626; --dh-surface-3:#152A44;
  --dh-ink:#E8EEF6; --dh-ink-2:#A9BBCF; --dh-ink-3:#8496AC; --dh-ink-disabled:#5C7086;
  /* #1C6B3C is a LIGHT-theme green: 2.52:1 on a dark surface. This block must
     mirror the media query above -- it has higher specificity, so an override
     added only to the @media block is silently ignored by the theme toggle. */
  --dh-success:#5FD69A; --dh-success-bg:#123227;
  --dh-line:#22354C; --dh-line-soft:#1B2C40;
  --dh-blue-600:#6FA8E8; --dh-blue-500:#8FBEF2; --dh-blue-50:#132840;
  --dh-gold-ink:#E0BC7B; --dh-navy-700:#8FBEF2;
  --dh-e1:0 1px 2px rgba(0,0,0,.4);
  --dh-e2:0 1px 2px rgba(0,0,0,.4),0 8px 20px -8px rgba(0,0,0,.6);
  --dh-e3:0 2px 4px rgba(0,0,0,.5),0 20px 44px -16px rgba(0,0,0,.75);
}
:root[data-theme="light"]{
  --dh-surface:#FFFFFF; --dh-surface-2:#F5F7FA; --dh-surface-3:#EDF1F6;
  --dh-ink:#0F1E33; --dh-ink-2:#41566F; --dh-ink-3:#5F7185; --dh-ink-disabled:#9AA9BA;
  --dh-line:#DCE3EC; --dh-line-soft:#EAEFF5;
  --dh-blue-600:#2563EB; --dh-blue-500:#3B7BF0; --dh-blue-50:#EFF5FF;
  --dh-gold-ink:#72582A; --dh-navy-700:#032D58;
}

/* =============================== primitives =============================== */

.dh-h1,.dh-h2,.dh-h3,.dh-display{
  font-family:var(--dh-font-display);
  color:var(--dh-ink);
  text-wrap:balance;
  margin:0;
}
.dh-display{font-size:var(--dh-fs-display);line-height:var(--dh-lh-display);font-weight:700;letter-spacing:-.01em;}
.dh-h1{font-size:var(--dh-fs-h1);line-height:var(--dh-lh-heading);font-weight:700;}
.dh-h2{font-size:var(--dh-fs-h2);line-height:var(--dh-lh-heading);font-weight:700;}
.dh-h3{font-size:var(--dh-fs-h3);line-height:var(--dh-lh-heading);font-weight:600;}
.dh-body{font-size:var(--dh-fs-body);line-height:var(--dh-lh-body);color:var(--dh-ink-2);max-width:var(--dh-measure);}
.dh-label{font-size:var(--dh-fs-label);font-weight:600;color:var(--dh-ink-2);}
.dh-help{font-size:var(--dh-fs-help);color:var(--dh-ink-3);}
.dh-stat{font-size:var(--dh-fs-stat);font-weight:700;font-family:var(--dh-font-display);
  line-height:1.15;font-variant-numeric:tabular-nums;color:var(--dh-navy-700);}

/* --- buttons: 48px min height clears the 44px touch minimum --- */
.dh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--dh-s2);
  min-height:48px;padding:0 var(--dh-s6);border-radius:var(--dh-r-sm);
  font-family:var(--dh-font-body);font-size:var(--dh-fs-body);font-weight:700;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.dh-btn:active{transform:translateY(1px);}
.dh-btn[disabled],.dh-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;}
.dh-btn--primary{background:var(--dh-blue-action);color:#fff;box-shadow:var(--dh-e1);}
.dh-btn--primary:hover{background:var(--dh-blue-500);box-shadow:var(--dh-e2);}
.dh-btn--gold{background:var(--dh-gold-400);color:#3A2A00;box-shadow:var(--dh-e1);}
.dh-btn--gold:hover{background:var(--dh-gold-500);box-shadow:var(--dh-e2);}
.dh-btn--ghost{background:var(--dh-surface);color:var(--dh-ink);border-color:var(--dh-line);}
.dh-btn--ghost:hover{border-color:var(--dh-blue-600);color:var(--dh-blue-600);}
.dh-btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.dh-btn--onDark:hover{background:rgba(255,255,255,.1);}

/* --- surfaces --- */
.dh-card{
  background:var(--dh-surface);border:1px solid var(--dh-line);
  border-radius:var(--dh-r);padding:var(--dh-s6);box-shadow:var(--dh-e1);
}
.dh-card--interactive{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.dh-card--interactive:hover{transform:translateY(-3px);box-shadow:var(--dh-e2);border-color:var(--dh-blue-400);}

.dh-chip{
  display:inline-flex;align-items:center;gap:var(--dh-s2);
  padding:var(--dh-s1) var(--dh-s3);border-radius:var(--dh-r-pill);
  font-size:var(--dh-fs-help);font-weight:600;
  background:var(--dh-blue-50);color:var(--dh-blue-600);border:1px solid var(--dh-line-soft);
}
.dh-chip--gold{background:var(--dh-gold-50);color:var(--dh-gold-ink);}
.dh-chip--success{background:var(--dh-success-bg);color:var(--dh-success);}
.dh-chip--danger{background:var(--dh-danger-bg);color:var(--dh-danger);}

/* --- empty state: shown INSTEAD of a misleading zero, per the brief --- */
.dh-empty{
  text-align:center;padding:var(--dh-s12) var(--dh-s6);
  border:1.5px dashed var(--dh-line);border-radius:var(--dh-r);
  color:var(--dh-ink-3);background:var(--dh-surface-2);
}
.dh-empty__title{font-family:var(--dh-font-display);font-weight:600;
  color:var(--dh-ink-2);font-size:var(--dh-fs-h3);margin-bottom:var(--dh-s2);}

/* --- skeleton --- */
@keyframes dh-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.dh-skel{
  background:linear-gradient(90deg,var(--dh-surface-3) 25%,var(--dh-surface-2) 37%,var(--dh-surface-3) 63%);
  background-size:200% 100%;animation:dh-shimmer 1.4s ease-in-out infinite;
  border-radius:var(--dh-r-sm);
}

/* --- layout --- */
.dh-container{max-width:var(--dh-container);margin-inline:auto;padding-inline:var(--dh-s6);}
.dh-section{padding-block:var(--dh-s20);}
@media (max-width:600px){
  .dh-section{padding-block:var(--dh-s12);}
  .dh-container{padding-inline:var(--dh-s4);}
}

/* --- focus: visible, never removed --- */
.dh-btn:focus-visible,.dh-card a:focus-visible,a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--dh-gold-400);outline-offset:2px;border-radius:var(--dh-r-sm);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;}
}