/* =====================================================================
   كود المنصات — نظام التصميم الموحد للمنصات الحكومية (هيئة الحكومة الرقمية)
   DGA Platforms Code — Design Tokens
   المصدر: Platforms Code design tokens (styles/tokens.css)
   الخط الرسمي: IBM Plex Sans Arabic
   الأيقونات: Hugeicons (Stroke Rounded)
   ===================================================================== */
:root {
  /* ---------- Base ---------- */
  --dga-white: #ffffff;
  --dga-black: #161616;

  /* ---------- Neutral ---------- */
  --dga-neutral-25: #fcfcfd;
  --dga-neutral-50: #f9fafb;
  --dga-neutral-100: #f3f4f6;
  --dga-neutral-200: #e5e7eb;
  --dga-neutral-300: #d2d6db;
  --dga-neutral-400: #9da4ae;
  --dga-neutral-500: #6c727e;
  --dga-neutral-600: #4d5761;
  --dga-neutral-700: #384250;
  --dga-neutral-800: #1f2a37;
  --dga-neutral-900: #111927;
  --dga-neutral-950: #0c111b;

  /* ---------- Primary (SA Flag Green) ---------- */
  --dga-primary-25: #f7fdf9;
  --dga-primary-50: #f3fcf6;
  --dga-primary-100: #dff6e7;
  --dga-primary-200: #b8eacb;
  --dga-primary-300: #88d8ad;
  --dga-primary-400: #54c08a;
  --dga-primary-500: #25935f;
  --dga-primary-600: #1b8354;   /* Primary */
  --dga-primary-700: #166a45;   /* Hover */
  --dga-primary-800: #14573a;   /* Selected */
  --dga-primary-900: #104631;   /* Pressed */
  --dga-primary-950: #092a1e;

  /* ---------- Secondary (Gold) ---------- */
  --dga-gold-25: #fffef7;
  --dga-gold-50: #fffef2;
  --dga-gold-100: #fffce6;
  --dga-gold-200: #fcf3bd;
  --dga-gold-300: #fae996;
  --dga-gold-400: #f7d54d;
  --dga-gold-500: #f5bd02;
  --dga-gold-600: #dba102;
  --dga-gold-700: #b87b02;
  --dga-gold-800: #945c01;
  --dga-gold-900: #6e3c00;

  /* ---------- Tertiary (Lavender) ---------- */
  --dga-lavender-25: #fefcff;
  --dga-lavender-50: #f9f5fa;
  --dga-lavender-100: #f2e9f5;
  --dga-lavender-200: #e1cce8;
  --dga-lavender-300: #ccadd9;
  --dga-lavender-400: #a57bba;
  --dga-lavender-500: #80519f;
  --dga-lavender-600: #6d428f;
  --dga-lavender-700: #532d75;
  --dga-lavender-800: #3d1d5e;

  /* ---------- Semantic: Success (Green) ---------- */
  --dga-green-25: #f6fef9;
  --dga-green-50: #ecfdf3;
  --dga-green-100: #dcfae6;
  --dga-green-200: #abefc6;
  --dga-green-300: #75dfa6;
  --dga-green-400: #47cd89;
  --dga-green-500: #17b169;
  --dga-green-600: #069454;
  --dga-green-700: #067647;
  --dga-green-800: #085d3a;
  --dga-green-900: #074c30;

  /* ---------- Semantic: Error (Red) ---------- */
  --dga-red-25: #fffbfa;
  --dga-red-50: #fef3f2;
  --dga-red-100: #fee4e2;
  --dga-red-200: #fecdca;
  --dga-red-300: #fca19b;
  --dga-red-400: #f97066;
  --dga-red-500: #f04437;
  --dga-red-600: #d92c20;
  --dga-red-700: #b42318;
  --dga-red-800: #912018;
  --dga-red-900: #7a2619;

  /* ---------- Semantic: Warning (Yellow) ---------- */
  --dga-yellow-25: #fffcf5;
  --dga-yellow-50: #fffaeb;
  --dga-yellow-100: #fef0c7;
  --dga-yellow-200: #fedf89;
  --dga-yellow-300: #fec84b;
  --dga-yellow-400: #fdb022;
  --dga-yellow-500: #f79009;
  --dga-yellow-600: #dc6803;
  --dga-yellow-700: #b54707;
  --dga-yellow-800: #93370c;
  --dga-yellow-900: #7a2e0e;

  /* ---------- Semantic: Info (Blue) ---------- */
  --dga-blue-25: #f5faff;
  --dga-blue-50: #eff8ff;
  --dga-blue-100: #d1e9ff;
  --dga-blue-200: #b2ddff;
  --dga-blue-300: #84caff;
  --dga-blue-400: #53b0fd;
  --dga-blue-500: #2e90fa;
  --dga-blue-600: #156fee;
  --dga-blue-700: #175cd3;
  --dga-blue-800: #1849a9;
  --dga-blue-900: #194084;

  /* ---------- Semantic aliases (DGA naming) ---------- */
  --background-body: var(--dga-neutral-50);
  --background-card: var(--dga-white);
  --background-primary: var(--dga-primary-600);
  --background-success: var(--dga-green-600);
  --background-info: var(--dga-blue-600);
  --background-warning: var(--dga-yellow-600);
  --background-error: var(--dga-red-600);
  --text-display: var(--dga-neutral-800);
  --text-default: var(--dga-black);
  --text-primary-paragraph: var(--dga-neutral-700);
  --text-secondary-paragraph: var(--dga-neutral-500);
  --text-success: var(--dga-green-700);
  --text-info: var(--dga-blue-700);
  --text-warning: var(--dga-yellow-700);
  --text-error: var(--dga-red-700);
  --border-neutral-primary: var(--dga-neutral-300);
  --border-neutral-secondary: var(--dga-neutral-200);
  --border-neutral-tertiary: var(--dga-neutral-100);
  --border-primary: var(--dga-primary-600);
  --border-primary-light: var(--dga-primary-200);

  /* ---------- Typography ---------- */
  --font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-size-10: 10px;
  --text-size-12: 12px;
  --text-size-14: 14px;
  --text-size-16: 16px;
  --text-size-18: 18px;
  --text-size-20: 20px;
  --text-size-24: 24px;
  --text-size-30: 30px;
  --text-size-36: 36px;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ---------- Radius ---------- */
  --dga-radius-0: 0px;
  --dga-radius-2: 2px;
  --dga-radius-4: 4px;
  --dga-radius-8: 8px;
  --dga-radius-16: 16px;
  --dga-radius-24: 24px;
  --dga-radius-full: 9999px;

  /* ---------- Spacing ---------- */
  --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;

  /* ---------- Elevation (subtle, formal) ---------- */
  --dga-shadow-xs: 0 1px 2px rgba(22, 22, 22, 0.05);
  --dga-shadow-sm: 0 1px 3px rgba(22, 22, 22, 0.08), 0 1px 2px rgba(22, 22, 22, 0.04);
  --dga-shadow-md: 0 4px 8px -2px rgba(22, 22, 22, 0.08), 0 2px 4px -2px rgba(22, 22, 22, 0.04);
  --dga-shadow-lg: 0 12px 16px -4px rgba(22, 22, 22, 0.08), 0 4px 6px -2px rgba(22, 22, 22, 0.04);
  --dga-focus-ring: 0 0 0 3px rgba(27, 131, 84, 0.25);

  /* =====================================================================
     Legacy aliases — the names used throughout the existing stylesheets
     and inline styles. They now resolve to the DGA palette.
     ===================================================================== */
  --primary: var(--dga-primary-600);
  --primary-dark: var(--dga-primary-700);
  --primary-light: var(--dga-primary-500);
  --primary-50: var(--dga-primary-50);
  --primary-100: var(--dga-primary-100);
  --success: var(--dga-green-600);
  --success-dark: var(--dga-green-700);
  --success-50: var(--dga-green-50);
  --danger: var(--dga-red-600);
  --danger-50: var(--dga-red-50);
  --warning: var(--dga-yellow-600);
  --warning-50: var(--dga-yellow-50);
  --info: var(--dga-blue-600);
  --info-50: var(--dga-blue-50);
  --purple: var(--dga-lavender-500);
  --purple-50: var(--dga-lavender-50);
  --orange: var(--dga-yellow-500);
  --orange-50: var(--dga-yellow-25);
  --gold: var(--dga-gold-600);
  --gold-50: var(--dga-gold-50);

  --bg-body: var(--dga-neutral-50);
  --bg-card: var(--dga-white);
  --bg-sidebar: var(--dga-neutral-900);
  --border: var(--dga-neutral-200);
  --border-light: var(--dga-neutral-100);
  --text-primary: var(--dga-neutral-800);
  --text-secondary: var(--dga-neutral-600);
  --text-muted: var(--dga-neutral-500);

  --shadow-sm: var(--dga-shadow-xs);
  --shadow: var(--dga-shadow-sm);
  --shadow-md: var(--dga-shadow-md);
  --shadow-lg: var(--dga-shadow-lg);
  --shadow-xl: var(--dga-shadow-lg);

  --radius-sm: var(--dga-radius-4);
  --radius: var(--dga-radius-8);
  --radius-lg: var(--dga-radius-8);
  --radius-xl: var(--dga-radius-16);
  --radius-full: var(--dga-radius-full);
  --sidebar-width: 260px;
  --transition: 0.15s ease;
}