/*
 * ETS theme — the ONLY file allowed to contain a raw hex/rgb(a)/font-family
 * value (design.md, file reference table). Every other CSS file references
 * these custom properties only. If design.md changes, only this file (and
 * component CSS where a selector itself must change) should need editing.
 */

/* ------------------------------------------------------------------ */
/* Self-hosted fonts (design.md 3.1). No Google Fonts / CDN links.     */
/* Drop the actual .woff2 files (OFL licensed) into public/fonts/.     */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/eb-garamond-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/eb-garamond-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/eb-garamond-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('../fonts/noto-sans-arabic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('../fonts/noto-sans-arabic-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- 2.1 Brand foundation (Cairo University) ----------------------- */
  --cu-parchment: #EFEACC;
  --cu-burgundy: #8A0000;
  --cu-navy: #313168;
  --cu-sky: #9FDCEF;
  --cu-deep: #1A1A40;
  --cu-navy-light: #3A3A7A;

  /* --- 2.2 Application tokens ----------------------------------------- */
  --color-accent: #8A0000;
  --color-sidebar: #313168;
  --color-sidebar-text: #CBD5E1;
  --color-sidebar-label: #94A3B8;
  --color-sidebar-active-bg: rgba(138, 0, 0, 0.15);
  --color-sidebar-rule: rgba(255, 255, 255, 0.08);
  --color-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --color-bg: #F3F4F6;
  --color-surface: #FFFFFF;
  --color-border: #E5E7EB;
  --color-text: #111827;
  --color-text-muted: #4B5563;
  --color-on-accent: #FFFFFF;
  --color-table-head: #F9FAFB;
  --color-table-stripe: #FAFAFB;
  --color-table-hover: #F1F5F9;
  --color-focus-ring: rgba(138, 0, 0, 0.2);
  --color-focus-ring-soft: rgba(138, 0, 0, 0.15);
  --color-auth-input-line: rgba(49, 49, 104, 0.28);
  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-overlay: rgba(17, 24, 39, 0.5);

  /* --- 2.3 Semantic colors ---------------------------------------------- */
  --color-success-bg: #DCFCE7;
  --color-success-text: #166534;
  --color-success: #15803D;

  --color-warning-bg: #FEF3C7;
  --color-warning-text: #92400E;
  --color-warning: #92400E;

  --color-danger-bg: #FEE2E2;
  --color-danger-text: #991B1B;
  --color-danger: #DC2626;

  --color-info-bg: #DBEAFE;
  --color-info-text: #1E40AF;
  --color-info: #1E40AF;

  --color-neutral-bg: #E5E7EB;
  --color-neutral-text: #374151;

  /* --- 3.1 Typefaces ---------------------------------------------------- */
  --font-display: 'EB Garamond', 'Amiri', 'Traditional Arabic', serif;
  --font-body: 'Plus Jakarta Sans', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* --- 3.2 Type scale ----------------------------------------------------- */
  --text-display: 2.5rem;
  --text-h1: 24px;
  --text-h2: 20px;
  --text-h3: 18px;
  --text-body: 14px;
  --text-label: 13px;
  --text-small: 12px;
  --text-caption: 11px;
  --text-eyebrow: 10px;

  /* --- 4.1 Spacing (4px base) ----------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;

  /* --- 4.2 Radius and shadow -------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px var(--color-shadow);

  /* --- 4.3 Sizes ---------------------------------------------------------- */
  --sidebar-width: 240px;
  --topbar-height: 60px;
  --detail-aside-width: 320px;
  --tap-target: 44px;
  --mobile-topbar-height: 56px;
  --bottom-nav-height: 64px;
  --mobile-gutter: 16px;
  --mobile-input-font: 16px;
  --sticky-bar-height: 64px;

  /* --- 8.2 Crest treatment ------------------------------------------------ */
  --auth-crest-shadow: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.5));
}

/* 4.4 Motion: very little, and disabled entirely under reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}