/* =========================================================
   raed-tokens.css — رموز هوية «رائد HR»
   مصدر واحد للحقيقة البصرية. لا قاعدة مكوّن واحدة هنا.
   مشتقّة من اللوقو: #6648FE (المونوغرام) + #414042 (الكلمة).
   ========================================================= */

:root {
  /* ── المقياس البنفسجي ─────────────────────── */
  --primary-50:  #F1EEFF;
  --primary-100: #E4DEFF;
  --primary-200: #CBC0FF;
  --primary-300: #AC9BFF;
  --primary-400: #8A71FF;
  --primary-500: #6648FE;   /* ← لون العلامة */
  --primary-600: #5232E8;   /* hover */
  --primary-700: #4225BF;   /* pressed · نص على فاتح */
  --primary-800: #331C93;
  --primary-900: #251468;

  /* ── المحايد (بميل دافئ مطابق لـ#414042) ──── */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F8F8F8;
  --neutral-100: #F1F1F2;
  --neutral-200: #E2E2E3;
  --neutral-300: #C4C4C6;
  --neutral-400: #9A9A9C;
  --neutral-500: #767678;
  --neutral-600: #5A5A5C;
  --neutral-700: #414042;   /* ← حبر العلامة */
  --neutral-800: #2B2B2C;
  --neutral-900: #1C1C1D;

  /* ── الدلالي (منخفض الإشباع ليبقى البنفسجي وحده صاخباً)
     success/warning صُحّحا عن المواصفة لعبور AA:
     #1E8E5A→#1B7E50 (4.14→5.06) · #B4761A→#986416 (3.79→5.04) */
  --success:         #1B7E50;
  --success-surface: #E8F5EE;
  --warning:         #986416;
  --warning-surface: #FBF1E2;
  --danger:          #C4382F;
  --danger-surface:  #FBEBE9;
  --info:            #2C6BB8;
  --info-surface:    #E9F0FA;

  /* ── الأسماء الدلالية (ما يستهلكه المُحوّل والكسوة) ── */
  --brand-primary: var(--primary-500);
  --brand-ink:     var(--neutral-700);
  --bg:            var(--neutral-0);
  --surface:       var(--neutral-0);
  --surface-alt:   var(--neutral-50);
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --text:          var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --on-primary:    var(--neutral-0);

  /* ── الطباعة (أحجام وأوزان فقط — العائلة لا تُمس) ── */
  --fs-display: 3.75rem;   --lh-display: 1.15; --fw-display: 700;
  --fs-h1:      2.75rem;   --lh-h1:      1.2;  --fw-h1:      700;
  --fs-h2:      2rem;      --lh-h2:      1.25; --fw-h2:      600;
  --fs-h3:      1.5rem;    --lh-h3:      1.35; --fw-h3:      600;
  --fs-body-lg: 1.125rem;  --lh-body-lg: 1.75;
  --fs-body:    1rem;      --lh-body:    1.75;
  --fs-body-sm: 0.875rem;  --lh-body-sm: 1.6;
  --fs-caption: 0.8125rem; --lh-caption: 1.5;  --fw-caption: 500;
  --fs-overline:0.75rem;   --lh-overline:1.4;  --fw-overline:600;
  --ls-overline: .14em;
  --measure: 68ch;

  /* ── التخطيط ──────────────────────────────── */
  --container: 1200px;
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  --radius-sm: 6px;  --radius-md: 10px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(28,28,29,.06);
  --shadow-sm: 0 2px 8px rgba(28,28,29,.07);
  --shadow-md: 0 8px 24px rgba(28,28,29,.09);
  --shadow-focus: 0 0 0 3px rgba(102,72,254,.28);

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;

  color-scheme: light;
}

/* =========================================================
   الوضع الغامق
   الترتيب مقصود: «حسب النظام» أولاً بحارس :not([data-theme="light"])
   حتى يعمل بلا JS ولا يومض، ثم الغامق الصريح يتجاوزه.
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--neutral-900);
    --surface:       #26262A;
    --surface-alt:   #2B2B2C;
    --border:        #3A3A3E;
    --border-strong: #4A4A4E;
    --text:          var(--neutral-100);
    --text-muted:    var(--neutral-400);
    --text-subtle:   var(--neutral-500);
    --brand-primary: var(--primary-400);   /* #8A71FF — 4.77:1 على #1C1C1D */
    --brand-ink:     var(--neutral-100);

    --success: #4FC98D;  --success-surface: #16261E;
    --warning: #E0A65A;  --warning-surface: #2A2116;
    --danger:  #F0776C;  --danger-surface:  #2B1917;
    --info:    #6FA8E8;  --info-surface:    #16202B;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.45);
    --shadow-md: 0 8px 24px rgba(0,0,0,.5);
    --shadow-focus: 0 0 0 3px rgba(138,113,255,.35);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:            var(--neutral-900);
  --surface:       #26262A;
  --surface-alt:   #2B2B2C;
  --border:        #3A3A3E;
  --border-strong: #4A4A4E;
  --text:          var(--neutral-100);
  --text-muted:    var(--neutral-400);
  --text-subtle:   var(--neutral-500);
  --brand-primary: var(--primary-400);
  --brand-ink:     var(--neutral-100);

  --success: #4FC98D;  --success-surface: #16261E;
  --warning: #E0A65A;  --warning-surface: #2A2116;
  --danger:  #F0776C;  --danger-surface:  #2B1917;
  --info:    #6FA8E8;  --info-surface:    #16202B;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-focus: 0 0 0 3px rgba(138,113,255,.35);

  color-scheme: dark;
}