/* ============================================================
   F-MAIL · Design Tokens
   ------------------------------------------------------------
   كل الألوان والقياسات بالبرنامج بتطلع من هون. القاعدة الأساسية
   بهالتصميم: ما في سطح أبيض، وما في بنفسجي. كل سطح أزرق فاتح
   مموّه، وكل تدرّج بيمشي من الأزرق للسماوي وبس.

   القسم الأول = توكنات التصميم الجديدة (--surface, --primary…).
   القسم التالت = أسماء --fm-* القديمة معاد ربطها على الجديدة،
   حتى كل CSS مكتوب من قبل يضل شغّال بلا ما ينلمس.
   ============================================================ */

/* ============================================================
   1) الثيم الفاتح — الافتراضي
   ============================================================ */
:root {
  --surface: #FFFFFF;                /* اللوحات، الصفوف غير المقروءة */
  --surface-container: #F3F6FB;      /* قاعدة خلفية التطبيق */
  --surface-container-high: #E8EDF5; /* حقل البحث، تعبئة الـhover */
  --surface-variant: #EDF1F7;        /* جوار الفواصل، مسار المفتاح المطفي */
  --on-surface: #152A47;             /* النص الأساسي (كحلي غامق) */
  /* ⚠️ كان #486382 — تباينه على السطح القديم ≈ 4.3:1، تحت حدّ
     WCAG AA (4.5) ومعظم النص يلي بيستعمله ١٢ بكسل. #3C5878 على
     أبيض = 7.3:1، يعني AAA بمقاسنا. */
  --on-surface-variant: #3C5878;     /* النص الثانوي والأيقونات */
  --outline: #DCE3EC;                /* فواصل وحدود ١ بكسل */
  --primary: #0B57D0;                /* اللون المميّز */
  --primary-container: #D3E3FD;      /* حبة التنقّل المختارة، الصفوف المختارة */
  --on-primary-container: #041E49;
  --on-primary: #FFFFFF;
  --read-bg: #F1F4F9;                /* الصفوف المقروءة (غاطسة شوي) */
  --warning: #E8930C;                /* النجوم */
  --danger: #D93025;
  --success: #188038;

  /* ⚠️ كان تدرّج أزرق بأربع محطات ورا التطبيق كلّو. مع أسطح
     زرقاء فوقه، النتيجة شاشة كلها نفس العائلة وبلا عمق. صار
     تدرّج محايد شبه مسطّح — بيعطي إحساس العمق بلا ما يلوّن. */
  --bg-gradient: linear-gradient(180deg,#F3F6FB 0%,#EDF1F8 100%);
  --panel-gradient: linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%);
  --primary-gradient: linear-gradient(120deg,#0B57D0 0%,#1268D6 50%,#0994C9 100%);

  /* ظلال — مستويين وبس، متل ما بالمواصفة */
  --elev-1: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --elev-2: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.3);
  --panel-shadow: 0 2px 12px rgba(21,42,71,.10);
  --compose-shadow: 0 3px 10px rgba(45,74,190,.4);
  --compose-shadow-hover: 0 5px 16px rgba(45,74,190,.5);

  /* ألوان التسميات الافتراضية — ولا وحدة بنفسجية */
  --label-work: #0B57D0;
  --label-finance: #188038;
  --label-travel: #E37400;

  /* ---------- ألوان أيقونات الرَيْل ----------
     لون لكل مجلد حتى تنعرف الأيقونة من لونها قبل ما تقرا اسمها.
     الاختيار دلالي مش زخرفي: كهرماني للنجمة متل النجوم بالصفوف،
     برتقالي للمزعج، أحمر للحذف، أخضر للمُرسَل.
     ⚠️ ولا لون بنفسجي — قاعدة التصميم الأساسية. */
  --icon-inbox: #0B57D0;
  --icon-starred: #E8930C;
  --icon-snoozed: #00897B;
  --icon-sent: #188038;
  --icon-drafts: #5F7086;
  --icon-archive: #0994C9;
  --icon-spam: #E37400;
  --icon-trash: #D93025;
  --icon-contacts: #1A73E8;
  --icon-calendar: #0994C9;
  --icon-settings: #5F7086;
}

/* ============================================================
   2) الثيم الغامق — تبديل توكنات وبس، نفس التخطيط حرفياً
   ============================================================ */
[data-theme="dark"] {
  --surface: #1F1F1F;
  --surface-container: #131314;
  --surface-container-high: #2D2F31;
  --surface-variant: #3C4043;
  --on-surface: #E3E3E3;
  --on-surface-variant: #9AA0A6;
  --outline: #3C4043;
  --primary: #A8C7FA;
  --primary-container: #0842A0;
  --on-primary-container: #D3E3FD;
  --on-primary: #062E6F;
  --read-bg: #1A1A1A;
  --warning: #E8930C;
  --danger: #F28B82;
  --success: #81C995;

  --bg-gradient: linear-gradient(120deg,#111420 0%,#122031 35%,#0E2430 70%,#131722 100%);
  --panel-gradient: linear-gradient(180deg,#1E2431 0%,#191E29 100%);
  --primary-gradient: linear-gradient(120deg,#A8C7FA 0%,#93CCF3 55%,#7FD6E8 100%);

  --elev-1: 0 1px 2px rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.35);
  --elev-2: 0 4px 8px 3px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.6);
  --panel-shadow: 0 2px 12px rgba(0,0,0,.45);
  --compose-shadow: 0 3px 10px rgba(0,0,0,.5);
  --compose-shadow-hover: 0 5px 16px rgba(0,0,0,.6);

  --label-work: #8AB4F8;
  --label-finance: #81C995;
  --label-travel: #FDD663;

  /* نفس العيلة بس مفتّحة — الألوان الغامقة بتنطفي على خلفية #131314 */
  --icon-inbox: #8AB4F8;
  --icon-starred: #FDD663;
  --icon-snoozed: #4DB6AC;
  --icon-sent: #81C995;
  --icon-drafts: #9AA0A6;
  --icon-archive: #7FD6E8;
  --icon-spam: #FCAD70;
  --icon-trash: #F28B82;
  --icon-contacts: #8AB4F8;
  --icon-calendar: #7FD6E8;
  --icon-settings: #9AA0A6;
}

/* ============================================================
   3) طبقة التوافق — أسماء --fm-* القديمة على التوكنات الجديدة
   ------------------------------------------------------------
   ⚠️ لا تحطّ لون ثابت (hex) بهالقسم. كل شي هون لازم يكون مشتقّ
      من توكنات فوق، لأنه هالكتلة وحدة وبتخدم الثيمين — إذا
      حطّيت hex هون بيبقى نفسه بالغامق وبينكسر التصميم.
   ============================================================ */
:root {
  /* ---------- العلامة ---------- */
  --fm-brand-900: var(--primary);
  --fm-brand-700: var(--primary);
  --fm-brand-500: var(--primary);
  --fm-brand-400: var(--primary);
  --fm-brand-300: var(--primary);
  --fm-brand-200: var(--primary-container);

  --fm-brand-grad: var(--primary-gradient);

  /* شفافيات الأزرق — مشتقّة حتى تتبدّل مع الثيم */
  --fm-brand-a08: color-mix(in srgb, var(--primary) 8%, transparent);
  --fm-brand-a10: color-mix(in srgb, var(--primary) 10%, transparent);
  --fm-brand-a12: color-mix(in srgb, var(--primary) 12%, transparent);
  --fm-brand-a16: color-mix(in srgb, var(--primary) 16%, transparent);
  --fm-brand-a25: color-mix(in srgb, var(--primary) 25%, transparent);
  --fm-brand-a30: color-mix(in srgb, var(--primary) 30%, transparent);
  --fm-brand-a40: color-mix(in srgb, var(--primary) 40%, transparent);
  --fm-brand-a50: color-mix(in srgb, var(--primary) 50%, transparent);

  /* ---------- الأسطح ---------- */
  --fm-bg-deep: var(--surface-container);
  --fm-bg-top: var(--surface-container);
  --fm-bg-bar: var(--surface);
  --fm-surface-1: var(--surface);
  --fm-surface-2: var(--surface-container-high);
  --fm-surface-3: var(--surface-variant);
  --fm-app-grad: var(--bg-gradient);

  /* ---------- الحدود ---------- */
  --fm-border: var(--outline);
  --fm-border-soft: var(--outline);
  --fm-border-strong: var(--outline);
  --fm-border-dashed: var(--outline);

  /* ---------- النص ---------- */
  --fm-text: var(--on-surface);
  --fm-text-1: var(--on-surface);
  --fm-text-2: var(--on-surface);
  --fm-text-3: var(--on-surface-variant);
  --fm-text-muted: var(--on-surface-variant);

  /* ---------- الحالات ---------- */
  --fm-teal: var(--primary);
  --fm-amber: var(--warning);
  --fm-purple: var(--primary);   /* ما في بنفسجي بهالتصميم */
  --fm-green: var(--success);
  --fm-red: var(--danger);
  --fm-accent: var(--primary);

  --fm-danger: var(--danger);
  --fm-danger-bg: color-mix(in srgb, var(--danger) 12%, transparent);
  --fm-danger-border: color-mix(in srgb, var(--danger) 35%, transparent);
  --fm-success: var(--success);
  --fm-success-bg: color-mix(in srgb, var(--success) 12%, transparent);
  --fm-warn: var(--warning);
  --fm-warn-bg: color-mix(in srgb, var(--warning) 14%, transparent);

  /* ---------- ألوان التسميات ---------- */
  --fm-label-blue: var(--label-work);
  --fm-label-teal: #0994C9;
  --fm-label-amber: var(--label-travel);
  --fm-label-purple: var(--label-work);
  --fm-label-rose: var(--danger);
  --fm-label-lime: var(--label-finance);
}

/* ============================================================
   4) الخطوط والقياسات — مشتركة بين الثيمين
   ============================================================ */
:root {
  /* ⚠️ لتفعيل Inter للكل: حطّ Inter.woff2 بـ assets/fonts/ وفكّ
     التعليق عن @font-face تحت. CSP بـ .htaccess فيها
     font-src 'self' — يعني Google Fonts محجوب، والخط لازم
     ينستضاف عنا. هاد مقصود مش سهو: تحميل خط من طرف تالت بيعطيه
     عنوان IP لكل مين بيفتح بريده.

     سلسلة البدائل مرتّبة بيلي فعلاً موجود على كل نظام:
     ماك أولاً، بعدين ويندوز (Segoe UI Variable قبل Segoe UI)،
     بعدين أندرويد/لينكس. Roboto انشال من الرأس — مش موجود على
     ويندوز ولا ماك، فوجوده بالمقدّمة كان بلا معنى. */
  --fm-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text',
             'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
  --fm-font-mono: ui-monospace, 'SFMono-Regular', 'Roboto Mono', monospace;

  /* السلّم: 11 · 12 · 13 · 14 · 16 · 20 · 24.
     الأسماء تاريخية (مستعملة بمئات المواضع بملفات CSS)، بس كل
     وحدة صار إلها درجة فعلية — قبلها كانت خمس أسماء بقيمة وحدة
     وما كان في هرمية أصلاً. ولا شي تحت ١١: حدّ قراءة، مش ذوق. */
  --fm-fs-10: 11px;    /* شارات، وقت، بيانات ثانوية */
  --fm-fs-11: 11px;
  --fm-fs-115: 12px;   /* تسميات، نص مساعد */
  --fm-fs-12: 12px;
  --fm-fs-125: 13px;   /* نص ثانوي */
  --fm-fs-13: 14px;    /* النص الأساسي */
  --fm-fs-135: 14px;
  --fm-fs-15: 16px;    /* عناوين صغيرة، أزرار بارزة */
  --fm-fs-16: 16px;
  --fm-fs-20: 20px;    /* عناوين الأقسام */
  --fm-fs-24: 24px;    /* عنوان الصفحة */

  --fm-tracking-wide: .06em;
  --fm-tracking-wider: .08em;

  /* ---------- الأنصاف ---------- */
  --fm-r-xs: 4px;
  --fm-r-sm: 8px;
  --fm-r-md: 8px;
  --fm-r-lg: 12px;
  --fm-r-xl: 16px;
  --fm-r-pill: 999px;

  /* ---------- الظلال ---------- */
  --fm-glow-dot: none;
  --fm-shadow-btn: var(--compose-shadow);
  --fm-shadow-pop: var(--elev-2);

  /* ---------- التخطيط ---------- */
  --fm-sidebar-w: 256px;
  --fm-sidebar-rail-w: 72px;
  --fm-topbar-h: 64px;
  --fm-reader-max: 900px;
  --fm-reader-pad: 56px;
  --fm-row-h: 48px;
  --fm-toolbar-h: 48px;
  --fm-tabs-h: 56px;
  --fm-panel-gap: 8px;
  --fm-sender-w: 180px;
  --fm-time-w: 64px;

  /* ---------- المناطق الآمنة (النوتش وشريط الهوم) ----------
     كل الصفحات عندها viewport-fit=cover، يعني المتصفح بيمدّ
     الصفحة تحت النوتش وشريط الهوم. بلا هالتوكنات بينقصّ المحتوى.
     env() بترجّع يسار/يمين فيزيائيين، بس الملفات ماشية بخصائص
     منطقية — لهيك start/end معرّفين لـLTR ومعكوسين تحت لـRTL. */
  --fm-safe-t: env(safe-area-inset-top, 0px);
  --fm-safe-b: env(safe-area-inset-bottom, 0px);
  --fm-safe-s: env(safe-area-inset-left, 0px);
  --fm-safe-e: env(safe-area-inset-right, 0px);

  /* ٤٨ بكسل = أصغر هدف لمس بهالمواصفة */
  --fm-touch: 48px;

  /* ---------- الكثافة (بتتغيّر من الإعدادات) ---------- */
  --fm-row-py: 0px;
  --fm-row-px: 16px;

  /* ---------- الحركة ---------- */
  --fm-ease: cubic-bezier(0.2, 0, 0, 1);
  --fm-t-fast: .1s;
  --fm-t: .2s;

  /* ---------- صفحات الدخول والإعدادات ---------- */
  --fm-auth-card-w: 420px;
  --fm-auth-panel-w: 46%;
  --fm-settings-nav-w: 200px;
}

/* بالعربي بينعكس المحور الأفقي، فالحواف الآمنة بتنقلب معه */
[dir="rtl"] {
  --fm-safe-s: env(safe-area-inset-right, 0px);
  --fm-safe-e: env(safe-area-inset-left, 0px);
}

/* كثافة مضغوطة — تُفعّل عبر data-density="compact" على <html> */
[data-density="compact"] {
  --fm-row-h: 40px;
  --fm-row-px: 12px;
}