/* Faheem — design tokens + dark mode via CSS custom properties. */

:root {
  --c-ink:        #1A2240;
  --c-ink-soft:   #3A4366;
  --c-ink-mute:   #6B708A;
  --c-paper:      #FBF9F4;
  --c-paper-2:    #F5F1E8;
  --c-paper-3:    #ECE6D6;
  --c-line:       #E6DFD0;
  --c-line-dim:   #F1ECDF;
  --c-mute:       #9C9686;
  --c-mute-soft:  #C2BBA9;

  /* Stable dark surface — stays dark in both modes */
  --c-dark:       #0E1430;
  --c-dark-soft:  #1A2046;
  /* Stable on-dark text — always paper */
  --c-on-dark:    #FBF9F4;
  --c-on-dark-mute: rgba(251,249,244,.55);

  --c-accent:      #3A8B92;
  --c-accent-deep: #266268;
  --c-accent-soft: #D9ECEE;

  --c-ok:         #3D7A5A;
  --c-warn:       #C7553E;

  --nav-bg:       rgba(251,249,244,.86);
  --glass-line:   rgba(0,0,0,.05);

  --shadow-card:  0 14px 40px rgba(10,15,46,.08);
  --shadow-pop:   0 24px 80px rgba(10,15,46,.10);
  --shadow-cta:   0 24px 60px rgba(10,15,46,.20);
}

html[data-theme="dark"] {
  --c-ink:        #F0EDE3;
  --c-ink-soft:   #B8B5AB;
  --c-ink-mute:   #88857C;
  --c-paper:      #0B112A;
  --c-paper-2:    #131938;
  --c-paper-3:    #1B2147;
  --c-line:       #232850;
  --c-line-dim:   #1A1F3C;
  --c-mute:       #5C617B;
  --c-mute-soft:  #3A4366;

  --c-dark:       #050817;
  --c-dark-soft:  #0B112A;
  --c-on-dark:    #F0EDE3;
  --c-on-dark-mute: rgba(240,237,227,.55);

  --c-accent:      #4CAEB6;
  --c-accent-deep: #9FDCE2;
  --c-accent-soft: #1B3F44;

  --nav-bg:       rgba(11,17,42,.86);
  --glass-line:   rgba(255,255,255,.06);

  --shadow-card:  0 14px 40px rgba(0,0,0,.45);
  --shadow-pop:   0 24px 80px rgba(0,0,0,.55);
  --shadow-cta:   0 24px 60px rgba(0,0,0,.6);
}

html, body { background: var(--c-paper); color: var(--c-ink); }
::selection   { background: var(--c-accent); color: var(--c-on-dark); }

/* Smooth theme transitions */
html, body, header, footer, section, div, span, p, h1, h2, h3, h4, button, a, input, nav, aside, main {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ============================================================
   Font primary — swaps between Arabic and Latin by document direction
   ============================================================ */
:root {
  --ff-text: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --ff-display: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

html[dir="ltr"] {
  --ff-text: 'IBM Plex Sans', system-ui, sans-serif;
  --ff-display: 'IBM Plex Sans', system-ui, sans-serif;
}

/* ============================================================
   Responsive — breakpoints
   ============================================================ */

:root {
  --site-pad: 80px;
  --site-max: 1280px;

  --fs-hero:    96px;
  --fs-hero-md: 72px;
  --fs-h1:      88px;
  --fs-h2:      56px;
  --fs-h3:      36px;
  --fs-h4:      26px;
  --fs-body:    18px;
  --fs-lead:    22px;

  --section-pad-y: 120px;
  --section-pad-y-lg: 140px;
  --section-pad-y-sm: 80px;
}

@media (max-width: 1023px) {
  :root {
    --site-pad: 36px;
    --fs-hero:    64px;
    --fs-hero-md: 56px;
    --fs-h1:      64px;
    --fs-h2:      42px;
    --fs-h3:      30px;
    --section-pad-y:    96px;
    --section-pad-y-lg: 100px;
    --section-pad-y-sm: 64px;
  }
}

@media (max-width: 639px) {
  :root {
    --site-pad: 20px;
    --fs-hero:    40px;
    --fs-hero-md: 36px;
    --fs-h1:      36px;
    --fs-h2:      30px;
    --fs-h3:      22px;
    --fs-h4:      19px;
    --fs-body:    16px;
    --fs-lead:    17px;
    --section-pad-y:    64px;
    --section-pad-y-lg: 72px;
    --section-pad-y-sm: 48px;
  }
}

/* Grid utility classes — !important needed to override inline styles */
@media (max-width: 1023px) {
  .grid-3,
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-2-asymm,
  .grid-2-aside { grid-template-columns: 1fr !important; gap: 40px !important; }
  .grid-cols-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .stack-md { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hide-md { display: none !important; }
}

@media (max-width: 639px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-cols-5 { grid-template-columns: 1fr !important; gap: 16px !important; }
  .grid-2-asymm,
  .grid-2-aside { grid-template-columns: 1fr !important; gap: 28px !important; }
  .stack-sm { grid-template-columns: 1fr !important; gap: 20px !important; flex-direction: column !important; }
  .hide-sm { display: none !important; }
  .stack-text-sm { font-size: var(--fs-h2) !important; line-height: 1.15 !important; }
  .pad-sm { padding: 28px !important; }
  .center-sm { text-align: center !important; }
  .scrollable-sm { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .scrollable-sm > * { flex-shrink: 0 !important; }
}

/* Show toggles — paired with hide-md/hide-sm */
.show-md { display: none; }
.show-sm { display: none; }
@media (max-width: 1023px) { .show-md { display: flex !important; } }
@media (max-width: 639px)  { .show-sm { display: flex !important; } }

/* Disable position:sticky on collapsed layouts — sticky inside a single-column
   layout causes the "fixed at top while siblings overlap" bug. */
@media (max-width: 1023px) {
  .sticky-md-off { position: static !important; top: auto !important; }
}