/* ============================================================
   بريد tn.sa — الطبقة صفر: الخطوط ونظام الرموز التصميمية
   كل الطبقات الأخرى تبني على المتغيّرات المعرَّفة هنا فقط،
   فتغيير لون واحد هنا يعيد صبغ الواجهة كلها.
   ============================================================ */

/* ============ IBM Plex Sans Arabic — مستضاف ذاتيًا (لا طلب خارجي) ============ */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-300-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* المقاطع اللاتينية — لأسماء المرسلين والعناوين الإنجليزية داخل النص نفسه */
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============ الرموز التصميمية ============ */
:root {
  /* ——— الخطوط ——— */
  --tn-font: 'IBM Plex Sans Arabic', 'SF Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tn-fs-xs: 11px;
  --tn-fs-sm: 12px;
  --tn-fs-md: 14px;   /* الأساس — سطر الرسالة والقوائم */
  --tn-fs-lg: 16px;
  --tn-fs-xl: 22px;   /* عنوان الرسالة المفتوحة */
  --tn-lh: 1.65;      /* العربية تحتاج ارتفاع سطر أكبر من اللاتينية */
  --tn-lh-tight: 1.35;

  /* ——— الألوان: النهار ——— */
  --tn-bg:              #f8fafd;  /* خلفية التطبيق */
  --tn-surface:         #ffffff;  /* البطاقات واللوحات */
  --tn-surface-2:       #f0f4f9;  /* حقل البحث، الأزرار الهادئة */
  --tn-surface-3:       #e9eef6;  /* تمرير فوق السطح-٢ */
  --tn-row-read:        #f2f6fc;  /* صف رسالة مقروءة */
  --tn-row-unread:      #ffffff;  /* صف رسالة غير مقروءة */
  --tn-primary:         #0b57d0;  /* أزرق الروابط والإجراءات */
  --tn-primary-hover:   #0842a0;
  --tn-primary-container:      #c2e7ff;  /* زرّ الإنشاء */
  --tn-on-primary-container:   #001d35;
  --tn-selected:        #d3e3fd;  /* مجلّد محدَّد / صف محدَّد */
  --tn-on-selected:     #041e49;
  --tn-text:            #1f1f1f;
  --tn-text-2:          #444746;  /* نص ثانوي */
  --tn-text-3:          #5e5e5e;  /* تلميحات */
  --tn-icon:            #444746;
  --tn-outline:         #747775;
  --tn-divider:         #e1e3e1;
  --tn-divider-soft:    #edeff1;
  --tn-star:            #f9ab00;
  --tn-danger:          #d93025;
  --tn-success:         #188038;
  --tn-warning:         #e37400;
  --tn-important:       #f2a600;
  --tn-scrollbar:       #c7c7c7;
  --tn-backdrop:        rgba(32, 33, 36, .32);

  /* ——— القياسات ——— */
  --tn-topbar-h:        64px;
  --tn-sidebar-w:       256px;
  --tn-sidebar-w-mini:  72px;
  --tn-row-h:          40px;
  --tn-gutter:          16px;
  --tn-gap:             8px;

  /* ——— الانحناءات ——— */
  --tn-r-xs:   4px;
  --tn-r-sm:   8px;
  --tn-r-md:  12px;
  --tn-r-lg:  16px;
  --tn-r-xl:  24px;
  --tn-r-pill: 999px;

  /* ——— الظلال (مستويات Material) ——— */
  --tn-e1: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --tn-e2: 0 1px 2px 0 rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15);
  --tn-e3: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.30);
  --tn-e4: 0 6px 10px 4px rgba(60,64,67,.15), 0 2px 3px rgba(60,64,67,.30);
  --tn-row-hover-shadow: inset 0 -1px 0 0 rgba(100,121,143,.122), 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);

  /* ——— الحركة (منحنيات Material 3) ——— */
  --tn-ease:            cubic-bezier(.2, 0, 0, 1);      /* قياسي */
  --tn-ease-out:        cubic-bezier(.05, .7, .1, 1);   /* تباطؤ مؤكَّد */
  --tn-ease-in:         cubic-bezier(.3, 0, .8, .15);   /* تسارع مؤكَّد */
  --tn-ease-spring:     cubic-bezier(.34, 1.56, .64, 1); /* ارتداد خفيف */
  --tn-d-1:  90ms;    /* استجابة فورية: تمرير، لون */
  --tn-d-2: 150ms;    /* قصيرة: أزرار، تحديد */
  --tn-d-3: 250ms;    /* متوسطة: قوائم منسدلة */
  --tn-d-4: 350ms;    /* طويلة: لوحات، شريط جانبي */
  --tn-d-5: 500ms;    /* الأطول: نوافذ الإنشاء */

  color-scheme: light;
}

/* ============ الألوان: الليل ============ */
html.dark-mode {
  --tn-bg:              #131314;
  --tn-surface:         #1e1f20;
  --tn-surface-2:       #2a2b2d;
  --tn-surface-3:       #35363a;
  --tn-row-read:        #1a1b1c;
  --tn-row-unread:      #1e1f20;
  --tn-primary:         #a8c7fa;
  --tn-primary-hover:   #c9dcff;
  --tn-primary-container:    #004a77;
  --tn-on-primary-container: #c2e7ff;
  --tn-selected:        #004a77;
  --tn-on-selected:     #c2e7ff;
  --tn-text:            #e3e3e3;
  --tn-text-2:          #c4c7c5;
  --tn-text-3:          #9aa0a6;
  --tn-icon:            #c4c7c5;
  --tn-outline:         #8e918f;
  --tn-divider:         #3c4043;
  --tn-divider-soft:    #2a2b2d;
  --tn-scrollbar:       #5f6368;
  --tn-backdrop:        rgba(0, 0, 0, .55);
  --tn-e1: 0 1px 2px 0 rgba(0,0,0,.45), 0 1px 3px 1px rgba(0,0,0,.30);
  --tn-e2: 0 1px 2px 0 rgba(0,0,0,.45), 0 2px 6px 2px rgba(0,0,0,.30);
  --tn-e3: 0 4px 8px 3px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.45);
  --tn-e4: 0 6px 10px 4px rgba(0,0,0,.30), 0 2px 3px rgba(0,0,0,.45);
  --tn-row-hover-shadow: inset 0 -1px 0 0 rgba(255,255,255,.08), 0 1px 3px 1px rgba(0,0,0,.35);
  color-scheme: dark;
}

/* ============ الأساس ============ */
html, body {
  font-family: var(--tn-font) !important;
  background: var(--tn-bg);
  color: var(--tn-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

body, button, input, select, textarea, .propform, .listing, .menu, .toolbar,
h1, h2, h3, h4, h5, h6, .header-title, #messagelist, #mailboxlist {
  font-family: var(--tn-font) !important;
}

/* الأرقام: نُبقيها لاتينية (١٢٣ الهندية تُربك القراءة في التواريخ والأحجام) */
.tn-num, #messagelist .date, .pagenav-text, #rcmquotadisplay, time {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* اتجاه النص: عربي افتراضًا، لكن الأسماء والعناوين اللاتينية تُعرض بترتيبها الصحيح */
.tn-bidi { unicode-bidi: plaintext; }

::selection { background: var(--tn-selected); color: var(--tn-on-selected); }

/* شريط تمرير رفيع كجيميل */
* { scrollbar-width: thin; scrollbar-color: var(--tn-scrollbar) transparent; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--tn-scrollbar);
  border: 3px solid transparent;
  border-radius: var(--tn-r-pill);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--tn-outline); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* حلقة تركيز واضحة لكل عنصر تفاعلي — إمكانية وصول */
:focus-visible {
  outline: 2px solid var(--tn-primary);
  outline-offset: 2px;
  border-radius: var(--tn-r-xs);
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}