/* ══════════════════════════════════════════════════
   tokens.css — مصدر واحد للألوان والمسافات والخط والزوايا
   (المرحلة 1 من خطة إعادة التصميم · لغة التصميم من mockups الـPM)

   ⚠️ الأسماء القديمة (--bg, --accent, --green, --text2 …) لسه مستخدمة في
   shared.js والصفحات كـ var(--x) inline، فبقيت زي ما هي وبتشاور على القيم الجديدة.
   الأسماء الجديدة (--color-*, --sp-*, --fs-* …) هي اللي تتستخدم في أي كود جديد.
══════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* ── الخط ── */
  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-print: 'IBM Plex Sans Arabic', Arial, sans-serif;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 18px;  --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 28px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.3; --lh-base: 1.6;

  /* ── المسافات (شبكة 4px) ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ── الزوايا ── */
  --radius-sm: 8px; --radius-btn: 10px; --radius-card: 14px; --radius-lg: 18px; --radius-pill: 99px;

  /* ── الأحجام ── */
  --touch: 44px;            /* أقل هدف لمس على الموبايل */
  --control-h: 40px;        /* ارتفاع الزرار/الحقل العادي */
  --control-h-sm: 32px;
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --tabbar-h: 64px;

  /* ── الأرضية والأسطح ── */
  --color-ground: #F6F5F1;
  --color-ground-2: #F1F0EB;     /* hover · خلفية محايدة */
  --color-surface: #FFFFFF;
  --color-surface-2: #FAF9F6;    /* رأس الجدول · حقول */
  --color-border: #E3E1DA;
  --color-border-strong: #D6D3CA;
  --color-divider: #EFEDE7;

  /* ── النص ── */
  --color-ink: #1B2421;
  --color-ink-2: #3E4844;
  --color-muted: #5B6661;
  --color-subtle: #737C78;
  --color-on-accent: #FFFFFF;

  /* ── اللون الأساسي (teal) ── */
  --color-accent: #0F6B5C;
  --color-accent-dark: #0A4D42;
  --color-accent-soft: #E3F1EE;
  --color-accent-2: #6B4FA0;     /* لون ثانوي للرسوم */
  --color-accent-2-soft: #EFEAF7;

  /* ── حالات (chips · banners) ── */
  --ok-bg: #E3F1EE;   --ok-fg: #0A4D42;   --ok-line: #B7DCD3;
  --warn-bg: #FFF1D6; --warn-fg: #7A4700; --warn-line: #F0D9A8;
  --bad-bg: #FDE8E6;  --bad-fg: #9B1C12;  --bad-line: #F5C2BC;
  --info-bg: #E6EEFA; --info-fg: #1D4F91; --info-line: #C3D5F0;
  --neu-bg: #F1F0EB;  --neu-fg: #3E4844;  --neu-line: #E3E1DA;

  /* ── ألوان دلالية (فلوس داخلة/خارجة) ── */
  --color-success: #157347;  --color-success-soft: #E4F3EA; --color-success-dark: #0F5A37;
  --color-danger: #B42318;   --color-danger-soft: #FDE8E6;  --color-danger-dark: #8F1B12;
  --color-warning: #B25E00;  --color-warning-soft: #FFF1D6;
  --color-orange: #C2410C;   --color-orange-soft: #FDEDE4;
  --color-dot-ok: #18A057;

  /* ── الظلال والطبقات ── */
  --shadow-sm: 0 1px 2px rgba(27, 36, 33, .05);
  --shadow-md: 0 4px 16px rgba(27, 36, 33, .08);
  --shadow-lg: 0 16px 40px rgba(27, 36, 33, .16);
  --overlay: rgba(27, 36, 33, .45);
  --focus-ring: 0 0 0 3px rgba(15, 107, 92, .35);
  --z-sidebar: 100; --z-tabbar: 150; --z-sheet: 180; --z-modal: 200; --z-toast: 999; --z-login: 1000;

  /* ── الحركة ── */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: .12s; --dur: .2s;

  /* ══ الأسماء القديمة → القيم الجديدة (عقد مع shared.js والصفحات) ══ */
  --bg: var(--color-ground);
  --bg2: var(--color-ground-2);
  --surface: var(--color-surface);
  --surface2: var(--color-surface-2);
  --border: var(--color-border);
  --border2: var(--color-border-strong);
  --accent: var(--color-accent);
  --accent-light: var(--color-accent-soft);
  --accent2: var(--color-accent-2);
  --green: var(--color-success);
  --green-light: var(--color-success-soft);
  --red: var(--color-danger);
  --red-light: var(--color-danger-soft);
  --yellow: var(--color-warning);
  --yellow-light: var(--color-warning-soft);
  --orange: var(--color-orange);
  --orange-light: var(--color-orange-soft);
  --text: var(--color-ink);
  --text2: var(--color-muted);
  --text3: var(--color-subtle);
  --radius: var(--radius-card);
  --shadow: var(--shadow-sm);
}

/* ══════════════════════════════════════════════════
   الوضع الداكن
   - تلقائي مع إعداد الجهاز، إلا لو data-theme="light".
   - أو إجباري بـ data-theme="dark".
   - الافتراضي «تلقائي» (المرحلة 6): ui.js بيشيل data-theme إلا لو المستخدم اختار فاتح/داكن.
     الاستثناء الوحيد: مستندات الطباعة (printPayroll · إيصال السلفة) — ورق، فاتحة دايماً.
══════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-ground: #111513; --color-ground-2: #1B211E;
    --color-surface: #181D1B; --color-surface-2: #1E2421;
    --color-border: #2C3430; --color-border-strong: #3A4440; --color-divider: #242B28;
    --color-ink: #E8EDEA; --color-ink-2: #C9D1CD; --color-muted: #A3ADA8; --color-subtle: #87918C;
    --color-accent: #1F8F7A; --color-accent-dark: #4CC2AB; --color-accent-soft: #14322C;
    --color-accent-2: #A58BD6; --color-accent-2-soft: #2A2338;
    --ok-bg: #14322C;   --ok-fg: #8FDCCB;   --ok-line: #23574C;
    --warn-bg: #3A2C10; --warn-fg: #F2C97A; --warn-line: #5A4520;
    --bad-bg: #3B1A17;  --bad-fg: #F4A59C;  --bad-line: #5C2822;
    --info-bg: #172640; --info-fg: #A8C4EF; --info-line: #27406A;
    --neu-bg: #232A27;  --neu-fg: #C9D1CD;  --neu-line: #2C3430;
    --color-success: #4CC38A; --color-success-soft: #15301F; --color-success-dark: #7AD8A8;
    --color-danger: #F07167;  --color-danger-soft: #3B1A17;  --color-danger-dark: #F4A59C;
    --color-warning: #E8A23A; --color-warning-soft: #3A2C10;
    --color-orange: #F0884F;  --color-orange-soft: #3A2116;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5); --overlay: rgba(0, 0, 0, .6);
    --focus-ring: 0 0 0 3px rgba(76, 194, 171, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-ground: #111513; --color-ground-2: #1B211E;
  --color-surface: #181D1B; --color-surface-2: #1E2421;
  --color-border: #2C3430; --color-border-strong: #3A4440; --color-divider: #242B28;
  --color-ink: #E8EDEA; --color-ink-2: #C9D1CD; --color-muted: #A3ADA8; --color-subtle: #87918C;
  --color-accent: #1F8F7A; --color-accent-dark: #4CC2AB; --color-accent-soft: #14322C;
  --color-accent-2: #A58BD6; --color-accent-2-soft: #2A2338;
  --ok-bg: #14322C;   --ok-fg: #8FDCCB;   --ok-line: #23574C;
  --warn-bg: #3A2C10; --warn-fg: #F2C97A; --warn-line: #5A4520;
  --bad-bg: #3B1A17;  --bad-fg: #F4A59C;  --bad-line: #5C2822;
  --info-bg: #172640; --info-fg: #A8C4EF; --info-line: #27406A;
  --neu-bg: #232A27;  --neu-fg: #C9D1CD;  --neu-line: #2C3430;
  --color-success: #4CC38A; --color-success-soft: #15301F; --color-success-dark: #7AD8A8;
  --color-danger: #F07167;  --color-danger-soft: #3B1A17;  --color-danger-dark: #F4A59C;
  --color-warning: #E8A23A; --color-warning-soft: #3A2C10;
  --color-orange: #F0884F;  --color-orange-soft: #3A2116;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5); --overlay: rgba(0, 0, 0, .6);
  --focus-ring: 0 0 0 3px rgba(76, 194, 171, .45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur: 0s; }
}