/* ==========================================================================
   variables.css
   المتغيرات البصرية فقط. هذا هو الملف الوحيد الذي يُعدَّل عند تغيير الهوية.
   ========================================================================== */

:root {

  /* ---------- Color palette (neutral) ---------- */
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-500: #737373;
  --color-gray-700: #404040;
  --color-gray-900: #171717;

  /* ---------- Color roles (use these in the stylesheets) ---------- */
  --color-background: var(--color-white);
  --color-surface: var(--color-gray-50);
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-700);
  --color-border: var(--color-gray-300);
  --color-placeholder-background: var(--color-gray-200);
  --color-placeholder-text: var(--color-gray-700);
  --color-action: var(--color-gray-900);
  --color-action-hover: var(--color-gray-700);
  --color-on-action: var(--color-white);
  --color-hover-surface: var(--color-gray-100);
  --color-focus: var(--color-gray-900);

  /* ---------- Typography ---------- */
  --font-family-base: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;

  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --font-size-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);

  --font-weight-regular: 400;
  --font-weight-bold: 700;

  --line-height-base: 1.7;
  --line-height-heading: 1.3;

  /* ---------- Spacing scale ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---------- Layout ---------- */
  --container-max-width: 72rem;
  --container-padding: var(--space-4);
  --section-padding: var(--space-7);

  /* ---------- Shape & controls ---------- */
  --border-width: 1px;
  --radius-base: 0.25rem;
  --control-min-height: 2.75rem;
  --focus-outline-width: 2px;

  /* ---------- Stacking ---------- */
  --z-floating: 100;

  /* ---------- Breakpoints (Mobile-First, min-width) ----------
     للتوثيق والمرجعية فقط: متغيرات CSS لا تعمل داخل @media،
     لذا تُكتب القيم نفسها حرفياً في layout.css. عند تغييرها هنا
     غيّرها هناك أيضاً.
     md: 48em  (≈ 768px)
     lg: 64em  (≈ 1024px)
  ----------------------------------------------------------- */
  --breakpoint-md: 48em;
  --breakpoint-lg: 64em;
}