/* theme.css — هوية جمعية رقيم البصرية كمتغيرات CSS مركزية */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../assets/fonts/IBMPlexSansArabic-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../assets/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../assets/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* هوية رقيم — أزرق مؤسسي هادئ */
  --raqeem-primary: #2C3FA0;
  --raqeem-primary-dark: #121C4A;
  --raqeem-primary-soft: #E8EEFF;
  --raqeem-secondary: #3B7FE8;
  --raqeem-cyan: #2EB8D4;
  --raqeem-gold: #C9921A;
  --raqeem-green: #1C9B68;
  --raqeem-accent-light: #E3F6EC;

  --raqeem-ink: #12182E;
  --raqeem-ink-soft: #2A3348;
  --raqeem-surface: #FFFFFF;
  --raqeem-surface-alt: #EEF2F8;
  --raqeem-surface-muted: #F6F8FC;
  --raqeem-border: #D5DDEB;
  --raqeem-border-strong: #B8C4DA;
  --raqeem-muted: #5A6478;

  --status-ontrack-bg: #E5F7ED;
  --status-ontrack-fg: #187A48;
  --status-ontrack-dot: #22A866;

  --status-watch-bg: #FFF4D9;
  --status-watch-fg: #8A6000;
  --status-watch-dot: #E0A012;

  --status-late-bg: #FCEAEA;
  --status-late-fg: #A83232;
  --status-late-dot: #D94A4A;

  --status-stuck-bg: #F5E6EA;
  --status-stuck-fg: #7E1C35;
  --status-stuck-dot: #A51F3A;

  --status-nodata-bg: #EEF0F4;
  --status-nodata-fg: #5A6478;
  --status-nodata-dot: #8E96A6;

  --font-arabic: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-xs: 0 1px 2px rgba(18, 28, 74, 0.04);
  --shadow-soft: 0 4px 16px rgba(18, 28, 74, 0.06), 0 1px 3px rgba(18, 28, 74, 0.04);
  --shadow-lift: 0 12px 28px rgba(18, 28, 74, 0.10), 0 4px 10px rgba(18, 28, 74, 0.05);
  --shadow-header: 0 8px 24px rgba(18, 28, 74, 0.08);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-med: 320ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-arabic);
  color: var(--raqeem-ink);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--raqeem-surface-alt);
  background-image:
    radial-gradient(ellipse 80% 50% at 100% -10%, rgba(59, 127, 232, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at -5% 30%, rgba(44, 63, 160, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 35% at 70% 100%, rgba(46, 184, 212, 0.07) 0%, transparent 45%),
    linear-gradient(180deg, #F4F7FC 0%, #E9EEF6 100%);
  background-attachment: fixed;
  min-height: 100%;
}

::selection {
  background: rgba(44, 63, 160, 0.18);
  color: var(--raqeem-ink);
}