/* جامعتي — design tokens + base */
:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #f0f2f7;
  --border: #e4e7ef;
  --border-strong: #d3d8e3;
  --text: #0e1b2e;
  --text-2: #3d4a5c;
  --muted: #5f6879;
  --primary: #15335e;
  --primary-2: #1f4f8f;
  --primary-soft: #e8eef8;
  --accent: #e3a52b;
  --accent-soft: #fdf3dd;
  --success: #11703a;
  --success-soft: #e3f5e9;
  --danger: #c62828;
  --danger-soft: #fbe7e7;
  --warning: #a14a06;
  --warning-soft: #fdf0dc;
  --info: #0e7490;
  --info-soft: #e0f3f7;

  /* Derived surfaces + inks (so pages don't hardcode light-only colors) */
  --primary-ink: #15335e;
  --hover: #fafbfd;
  --surface-sunk: #f8f9fc;
  --placeholder: #98a1b0;
  --skeleton: #eceff5;
  --skeleton-hi: #f6f7fb;
  --primary-soft-hover: #dce5f3;
  --danger-soft-hover: #f7d4d4;
  --accent-ink: #8a5a00;
  --info-ink: #0b5566;
  --warning-ink: #7a3a06;
  --success-ink: #11632f;
  --danger-ink: #8f1d1d;
  --violet: #5b3cc4;
  --violet-soft: #efeafd;
  --rose: #b4235a;
  --rose-soft: #fdeaf1;
  --toast-bg: #0f1c30;
  --on-photo-chip: rgba(255, 255, 255, .92);
  --ink-mix: 100%; /* mix of data-driven ink colors with white (lighter in dark mode) */

  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(14, 27, 46, .06);
  --shadow: 0 1px 2px rgba(14, 27, 46, .05), 0 6px 20px -6px rgba(14, 27, 46, .10);
  --shadow-lg: 0 20px 50px -12px rgba(14, 27, 46, .25);

  --font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --container: 1120px;
  --topbar-h: 64px;
  --tabbar-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

/* Dark mode (toggle in the top bar; html[data-theme]) */
:root[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #131c2c;
  --surface-2: #1b2638;
  --border: #253249;
  --border-strong: #35445e;
  --text: #e6ecf5;
  --text-2: #c3ccda;
  --muted: #8f9bb0;
  --primary: #3570d4;
  --primary-2: #6b9ff0;
  --primary-soft: #1a2b48;
  --accent: #e8ad37;
  --accent-soft: #3a2c10;
  --success: #45c27a;
  --success-soft: #0f2e1d;
  --danger: #f07878;
  --danger-soft: #3b1719;
  --warning: #eaa550;
  --warning-soft: #35250f;
  --info: #52c6de;
  --info-soft: #0f2b33;
  --primary-ink: #7fadf3;
  --hover: #172236;
  --surface-sunk: #0e1625;
  --placeholder: #6c788d;
  --skeleton: #1a2436;
  --skeleton-hi: #243048;
  --primary-soft-hover: #22375a;
  --danger-soft-hover: #4a1d21;
  --accent-ink: #f0c060;
  --info-ink: #7dd6e8;
  --warning-ink: #f2b76e;
  --success-ink: #6fd69a;
  --danger-ink: #f59a9a;
  --violet: #b8a3ff;
  --violet-soft: #2a2248;
  --rose: #f490b8;
  --rose-soft: #3b1829;
  --toast-bg: #26344c;
  --on-photo-chip: rgba(19, 28, 44, .9);
  --ink-mix: 62%;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, .65);
  color-scheme: dark;
}
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: background-color .3s ease, border-color .3s ease, color .2s ease !important; }
.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }
:root[data-theme="dark"] .theme-btn .moon { display: none; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: clamp(24px, 4vw, 34px); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 20px; line-height: 1.4; font-weight: 700; }
h3 { font-size: 16px; line-height: 1.45; font-weight: 600; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary-2) 45%, transparent); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--accent-soft); }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .container { padding-inline: 24px; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.stack { display: flex; flex-direction: column; gap: var(--gap, 12px); }
.row { display: flex; align-items: center; gap: var(--gap, 10px); }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.grid { display: grid; gap: var(--gap, 14px); }

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