/* نظام التصميم: "مختبر بغداد"
   السطر الأول منقول حرفياً من CLAUDE.md، والباقي توسعة عليه. */

:root{--color-bg:#F4F0E6;--color-surface:#FFFCF5;--color-ink:#202723;--color-muted:#59645D;--color-primary:#285747;--color-primary-hover:#1E4438;--color-accent:#A35B3F;--color-border:#85877B;--color-border-subtle:#D8D5C9;--font-ar:"Readex Pro",sans-serif;--font-latin:"IBM Plex Sans",sans-serif;--font-mono:"IBM Plex Mono",monospace;--radius-sm:4px;--radius-md:8px;--control-height:48px;}

:root {
  /* ألوان إضافية */
  --color-ivory: #F4F0E6;          /* النص العاجي على الأقسام الداكنة (نفس الورق) */
  --color-bronze: #9C8458;         /* خطوط دقيقة وختم الشعار فقط، لا نص */
  --color-warning: #8A4B16;
  --color-success: #286548;
  --color-error: #A12D2D;

  /* الأقسام الداكنة: حبر مع عاجي */
  --color-dark-bg: var(--color-ink);
  --color-dark-text: var(--color-ivory);
  --color-dark-muted: #B9B8AC;     /* نص ثانوي على الحبر */
  --color-dark-border: #4A524D;    /* حدود رفيعة على الحبر */
  --color-dark-hover: #E4DFD1;     /* hover للزر العاجي */
  /* آجر فاتح للأقسام الداكنة فقط: الأصلي #A35B3F على الحبر 3.00:1 (أقل من الحد)،
     وهذا 3.68:1. على الأقسام الفاتحة يبقى الآجر الأصلي. */
  --color-accent-on-dark: #B4694B;

  /* الخطوط: عائلة العنوان والنص نفسها، والوزن يفرق */
  --font-body: var(--font-ar), var(--font-latin);
  --weight-light: 300;
  --weight-regular: 400;
  --weight-bold: 600;

  /* ارتفاع السطر */
  --leading-body: 1.9;
  --leading-heading: 1.45;
  --leading-display: 1.3;
  --leading-tight: 1.2;            /* للأزرار والتسميات القصيرة */

  /* سلم أحجام fluid: من عرض 375px إلى 1280px */
  --step--1: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);  /* 14 → 15 */
  --step-0:  clamp(1rem, 0.95rem + 0.22vw, 1.125rem);       /* 16 → 18 */
  --step-1:  clamp(1.1875rem, 1.08rem + 0.44vw, 1.4375rem); /* 19 → 23 */
  --step-2:  clamp(1.4375rem, 1.23rem + 0.88vw, 1.9375rem); /* 23 → 31 */
  --step-3:  clamp(1.75rem, 1.43rem + 1.33vw, 2.5rem);      /* 28 → 40 */
  --step-4:  clamp(2.125rem, 1.64rem + 2.07vw, 3.375rem);   /* 34 → 54 */
  --step-5:  clamp(2.5rem, 1.75rem + 3.2vw, 4.5rem);        /* 40 → 72 */

  /* المسافات: أساس 4px */
  --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;
  --space-9: 6rem;
  --space-section: clamp(4rem, 2.8rem + 5vw, 8rem);
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);
  --measure: 50ch;                  /* أقصى طول سطر ≈ 65 حرفاً؛ يُضبط لكل لغة بـ base.css */
  --size-step-number: clamp(3rem, 2.5rem + 2.2vw, 4.5rem); /* أرقام الخطوات: 48 → 72px */
  --container: 76rem;

  /* الحدود: رفيعة مثل هوامش الدفاتر الهندسية */
  --border-hair: 1px solid var(--color-border-subtle);
  --border-rule: 1px solid var(--color-border);
  --border-accent: 2px solid var(--color-accent);
  --border-bronze: 1px solid var(--color-bronze);
  --radius-pill: 999px;

  /* ظلال خفيفة جداً */
  --shadow-1: 0 1px 0 rgba(32, 39, 35, 0.06);
  --shadow-2: 0 1px 2px rgba(32, 39, 35, 0.06), 0 4px 12px -6px rgba(32, 39, 35, 0.10);

  /* focus ظاهر */
  --focus-width: 3px;
  --focus-offset: 2px;
  --focus-color: var(--color-primary);
  --focus-color-dark: var(--color-ivory);
  --focus-ring: 0 0 0 var(--focus-offset) var(--color-bg), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--focus-color);

  /* الحركة */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-reveal: 600ms;
  --reveal-distance: 12px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-reveal: 0ms;
    --reveal-distance: 0px;
  }
}