/*
 * دفتر الإنجاز — متغيرات التصميم.
 * المصدر: نظام تصميم الرشيد في .design/tokens/ (ADR-005).
 * الملف الوحيد المسموح فيه بأرقام الألوان وأسماء الخطوط؛ القوالب وملفات CSS الأخرى
 * تستخدم طبقة "أدوار الاستخدام" في آخره فقط.
 */

/* ═══ ١. ألوان الهوية: منسوخة كما هي من .design/tokens/colors.css ═══ */
:root {
  /* ─── Brand Core ─── */
  --color-primary:         #36bba4;
  --color-primary-light:   #92d2c5;
  --color-primary-lighter: #c8e9e3;
  --color-primary-dark:    #2a9a87;
  --color-primary-50:      #eef9f6;
  --color-primary-100:     #d4f0ea;
  --color-primary-200:     #a8e1d5;
  --color-primary-300:     #92d2c5;
  --color-primary-400:     #5dc7b2;
  --color-primary-500:     #36bba4;
  --color-primary-600:     #2a9a87;
  --color-primary-700:     #1f7a6b;
  --color-primary-800:     #155b50;
  --color-primary-900:     #0c3d36;

  --color-accent-purple:         #bf77b1;
  --color-accent-purple-light:   #d9a7cf;
  --color-accent-purple-dark:    #9e5a91;
  --color-accent-purple-50:      #f8f0f6;
  --color-accent-purple-100:     #efd6ea;
  --color-accent-purple-200:     #d9a7cf;
  --color-accent-purple-300:     #bf77b1;
  --color-accent-purple-400:     #ab5d9b;
  --color-accent-purple-500:     #9e5a91;

  --color-accent-yellow:         #efe02f;
  --color-accent-yellow-light:   #f5ed7a;
  --color-accent-yellow-dark:    #c9bc15;
  --color-accent-yellow-50:      #fdfce8;
  --color-accent-yellow-100:     #faf6b0;
  --color-accent-yellow-200:     #f5ed7a;
  --color-accent-yellow-300:     #efe02f;
  --color-accent-yellow-400:     #c9bc15;

  /* ─── Neutrals ─── */
  --color-white:     #ffffff;
  --color-gray-50:   #f8fafb;
  --color-gray-100:  #f0f3f5;
  --color-gray-200:  #e2e7eb;
  --color-gray-300:  #c9d1d8;
  --color-gray-400:  #9aa5b0;
  --color-gray-500:  #6b7a87;
  --color-gray-600:  #4d5b66;
  --color-gray-700:  #374149;
  --color-gray-800:  #252e35;
  --color-gray-900:  #141a1f;
  --color-black:     #0a0f13;

  /* ─── Semantic ─── */
  --color-success:   #2ebd6e;
  --color-warning:   #f0a840;
  --color-error:     #e85454;
  --color-info:      #3b9ce8;

  /* ─── Semantic Aliases ─── */
  --text-primary:    var(--color-gray-900);
  --text-secondary:  var(--color-gray-600);
  --text-tertiary:   var(--color-gray-400);
  --text-inverse:    var(--color-white);
  --text-brand:      var(--color-primary);
  --text-accent:     var(--color-accent-purple);

  --surface-page:    var(--color-white);
  --surface-subtle:  var(--color-gray-50);
  --surface-muted:   var(--color-gray-100);
  --surface-card:    var(--color-white);
  --surface-brand:   var(--color-primary);
  --surface-glass:   rgba(255, 255, 255, 0.55);

  --border-default:  var(--color-gray-200);
  --border-subtle:   var(--color-gray-100);
  --border-strong:   var(--color-gray-300);
  --border-brand:    var(--color-primary-light);
  --border-glass:    rgba(255, 255, 255, 0.4);
}

/* ═══ ١. المسافات: من .design/tokens/spacing.css ═══ */
:root {
  /* ─── Spacing Scale ─── */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4px */
  --space-2:   0.5rem;   /* 8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */

  /* ─── Container ─── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
}

/* ═══ ١. الزوايا والظلال والزجاج والحركة وطبقات العرض: من .design/tokens/effects.css ═══ */
:root {
  /* ─── Border Radius ─── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl:   0 16px 40px rgba(0, 0, 0, 0.12);

  /* ─── Glass / Glassmorphism ─── */
  --glass-bg:         rgba(255, 255, 255, 0.55);
  --glass-bg-strong:  rgba(255, 255, 255, 0.75);
  --glass-bg-subtle:  rgba(255, 255, 255, 0.35);
  --glass-blur:       16px;
  --glass-blur-strong: 24px;
  --glass-border:     rgba(255, 255, 255, 0.4);
  --glass-shadow:     0 8px 32px rgba(0, 0, 0, 0.08);

  --glass-brand-bg:        rgba(54, 187, 164, 0.12);
  --glass-brand-bg-strong: rgba(54, 187, 164, 0.2);
  --glass-brand-border:    rgba(54, 187, 164, 0.25);

  /* ─── Transitions ─── */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  --duration-fast:    120ms; /* @kind other */
  --duration-normal:  200ms; /* @kind other */
  --duration-slow:    350ms; /* @kind other */

  /* ─── Z-Index Scale ─── */
  --z-dropdown:  100; /* @kind other */
  --z-sticky:    200; /* @kind other */
  --z-overlay:   300; /* @kind other */
  --z-modal:     400; /* @kind other */
  --z-toast:     500; /* @kind other */
}

/* ═══ ١. الخطوط: من .design/tokens/typography.css، مع الخطين المعتمدين (ADR-002) بدل Cairo ═══ */
:root {
  /* ─── Font Families ─── */
  --font-primary:    'Readex Pro', system-ui, sans-serif;
  --font-display:    'Aref Ruqaa', serif;
  --font-body:       'Readex Pro', system-ui, sans-serif;

  /* ─── Font Weights ─── */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ─── Font Sizes ─── */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.25rem;   /* 36px */
  --text-4xl:   3rem;      /* 48px */
  --text-5xl:   3.75rem;   /* 60px */

  /* ─── Line Heights ─── */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.8;

  /* ─── Letter Spacing ─── */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
}

/* ═══ ٢. قيم مشتقة: ليست متغيرات في colors.css ═══ */
:root {
  --color-success-ink: #1a7a42; --color-success-bg: #e6f7ee;   /* من Badge في نظام التصميم */
  --color-warning-ink: #8a5d12; --color-warning-bg: #fef3e0;   /* من Badge */
  --color-error-ink:   #b42020; --color-error-bg:   #fde8e8;   /* من Badge */
  --color-info-ink:    #1d6fb8; --color-info-bg:    #e6f1fc;   /* مشتق من --color-info للتباين */
}

/* ═══ ٣. أدوار الاستخدام: القوالب وملفات CSS الأخرى تستخدم هذه الطبقة وحدها ═══ */
:root {
  --color-page-start: var(--color-primary-50);
  --color-page-end: var(--color-gray-50);
  --color-surface: var(--color-white);
  --color-text: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-link: var(--color-primary-700);
  --color-rule: var(--color-primary-100);
  --color-margin-line: var(--color-accent-yellow);
  --color-border-soft: var(--color-gray-200);
  --color-border-field: var(--color-gray-500);
  --color-focus: var(--color-primary-600);
  --color-action-bg: var(--color-primary-700);
  --color-action-text: var(--color-white);
  --color-action-outline: var(--color-primary-600);
  --color-action-outline-text: var(--color-primary-700);
  --color-board-start: var(--color-primary-800);
  --color-board-end: var(--color-primary-900);
  --color-board-text: var(--color-white);
  --color-board-muted: var(--color-primary-lighter);
  --color-board-progress: var(--color-accent-yellow);
  --color-highlight-bg: var(--color-accent-yellow-100);
  --color-highlight-text: var(--color-gray-900);
  --status-done-ink: var(--color-success-ink);
  --status-done-bg: var(--color-success-bg);
  --status-partial-ink: var(--color-accent-purple-500);
  --status-partial-bg: var(--color-accent-purple-100);
  --status-partial-text: var(--color-gray-900);
  --status-notdone-ring: var(--color-gray-500);
  --status-notdone-bg: var(--color-gray-100);
  --status-notdone-text: var(--color-gray-700);
  --status-info-ink: var(--color-info-ink);
  --status-info-bg: var(--color-info-bg);
  --status-warning-ink: var(--color-warning-ink);
  --status-warning-bg: var(--color-warning-bg);
  --status-error-ink: var(--color-error-ink);
  --status-error-bg: var(--color-error-bg);
  /* المرحلة الثالثة: وسم "ضمن الخطة" وعبارة اكتمال اليوم وخانة الشريط الفارغة */
  --color-tag-bg: var(--color-primary-50);
  --color-tag-border: var(--color-primary-200);
  --color-tag-text: var(--color-primary-800);
  --color-emphasis: var(--color-primary-800);
  --color-board-track: color-mix(in srgb, var(--color-board-text) 22%, transparent);
  /* المرحلة الخامسة: شريط الإنجاز، وزر الحذف، وأيام التقويم */
  --color-meter-track: var(--color-primary-100);
  --color-meter-fill: var(--color-primary-600);
  --color-danger-bg: var(--color-error-ink);
  --color-danger-text: var(--color-white);
  --color-danger-link: var(--color-error-ink);
  --day-work-bg: var(--color-primary-50);
  --day-holiday-bg: var(--color-accent-yellow-100);
  --day-holiday-mark: var(--color-accent-yellow-400);
  --day-off-bg: var(--color-gray-100);
  --day-off-text: var(--color-gray-600);
  --day-today-ring: var(--color-primary-700);
  /* المرحلة السادسة: أعمدة «تقدّمي» */
  --color-bar: var(--color-primary-200);
  --color-bar-current: var(--color-primary-700);
}