/* رموز «عدسة» للويب — منقولة من core/adasa/tokens.py (الإصدار 0.1.0).
   لا تُعدَّل الألوان هنا يدوياً بمعزل عن المصدر: أي تغيير يبدأ من tokens.json.

   الخط: في النماذج يُحمَّل Tajawal من Google Fonts (الرابط في كل صفحة).
   في الإنتاج يُستضاف محلياً من web/static/fonts لأن الموقع لا يعتمد على خدمات خارجية،
   وSegoe UI (خط سطح المكتب) غير موجود على أندرويد. */

:root {
  color-scheme: light;

  /* الخلفيات */
  --bg-canvas: #F3F5F8;
  --bg-surface: #FFFFFF;
  --bg-sunken: #F9FAFB;
  --bg-subtle: #F3F5F8;
  --bg-hover: #E9EDF2;
  --bg-pressed: #DCE1E8;
  --bg-selected: #EEF0FE;
  --bg-skeleton: #E9EDF2;

  /* الحدود */
  --border-subtle: #DCE1E8;
  --border-interactive: #848D9C;
  --border-strong: #626C7C;
  --border-focus: #474ED0;

  /* النص */
  --text-primary: #1A1F27;
  --text-secondary: #4D5664;
  --text-tertiary: #626C7C;
  --text-disabled: #848D9C;
  --text-on-accent: #FFFFFF;
  --text-link: #474ED0;

  /* اللون الأساسي */
  --accent-fill: #474ED0;
  --accent-fill-hover: #3A3FAE;
  --accent-fill-pressed: #2F338A;
  --accent-subtle: #EEF0FE;
  --accent-subtle-hover: #E0E4FD;
  --accent-on-subtle: #2F338A;

  /* الحالات */
  --success-icon: #1F8552;
  --success-text: #186A42;
  --success-bg: #E7F6EE;
  --success-on-bg: #0B3A23;

  --warning-icon: #F5B53D;
  --warning-graphic: #B97700;
  --warning-text: #8F5A00;
  --warning-bg: #FFF4E0;
  --warning-on-bg: #4A2E00;

  --danger-icon: #C8322A;
  --danger-text: #A2241E;
  --danger-bg: #FDECEA;
  --danger-on-bg: #5C100C;
  --danger-fill: #C8322A;
  --danger-fill-hover: #A2241E;

  --info-icon: #1C6FBF;
  --info-text: #155896;
  --info-bg: #E8F3FD;
  --info-on-bg: #0B2F52;

  --neutral-icon: #4D5664;
  --neutral-bg: #E9EDF2;
  --neutral-on-bg: #1A1F27;

  /* المقاسات — مقاس «comfortable» لأن الواجهة للمس.
     أهداف اللمس 44px على الأقل (أعلى من control=40 في سطح المكتب). */
  --control: 44px;
  --control-sm: 36px;
  --row: 44px;
  --icon: 20px;
  --badge: 24px;
  --card-pad: 16px;
  --page-pad: 16px;
  --gap: 12px;

  /* الزوايا */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* الظلال (e1/e2/e3 من المصدر: blur/dy/alpha) */
  --shadow-e1: 0 1px 6px rgba(26, 31, 39, 0.086);
  --shadow-e2: 0 4px 14px rgba(26, 31, 39, 0.11);
  --shadow-e3: 0 12px 32px rgba(26, 31, 39, 0.196);

  /* الخط والسلّم */
  --font-ui: "Tajawal", "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;
  --fs-display: 28px;  --lh-display: 36px;
  --fs-headline: 22px; --lh-headline: 30px;
  --fs-title-l: 18px;  --lh-title-l: 26px;
  --fs-title-m: 16px;  --lh-title-m: 24px;
  --fs-body: 15px;     --lh-body: 24px;   /* body-m (14) مرفوع درجة للموبايل */
  --fs-body-s: 13px;   --lh-body-s: 20px;
  --fs-caption: 12px;  --lh-caption: 18px;
  --fs-data-l: 28px;   --fs-data-m: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg-canvas: #0E1116;
    --bg-surface: #161A21;
    --bg-sunken: #12161C;
    --bg-subtle: #1D222B;
    --bg-hover: #232934;
    --bg-pressed: #2B3240;
    --bg-selected: #232850;
    --bg-skeleton: #232934;

    --border-subtle: #2A313C;
    --border-interactive: #687183;
    --border-strong: #8A93A1;
    --border-focus: #A0AAF6;

    --text-primary: #E8EBF0;
    --text-secondary: #A8B0BD;
    --text-tertiary: #8A93A1;
    --text-disabled: #626C7C;
    --text-on-accent: #FFFFFF;
    --text-link: #A0AAF6;

    --accent-fill: #5B63E3;
    --accent-fill-hover: #4A51D0;
    --accent-fill-pressed: #474ED0;
    --accent-subtle: #232850;
    --accent-subtle-hover: #262A6A;
    --accent-on-subtle: #C5CCFB;

    --success-icon: #3FBF7F;
    --success-text: #5CD497;
    --success-bg: #0F2A1D;
    --success-on-bg: #A8EBC6;

    --warning-icon: #F2B33D;
    --warning-graphic: #F2B33D;
    --warning-text: #F5C25E;
    --warning-bg: #33260A;
    --warning-on-bg: #FFE2A6;

    --danger-icon: #F0675E;
    --danger-text: #FF8A82;
    --danger-bg: #3A1512;
    --danger-on-bg: #FFC4BF;
    --danger-fill: #C8322A;
    --danger-fill-hover: #A2241E;

    --info-icon: #4FA3F0;
    --info-text: #7CBBF5;
    --info-bg: #0E2742;
    --info-on-bg: #BBDCFB;

    --neutral-icon: #A8B0BD;
    --neutral-bg: #232934;
    --neutral-on-bg: #E8EBF0;

    --shadow-e1: 0 1px 6px rgba(0, 0, 0, 0.35);
    --shadow-e2: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-e3: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
}