/* ═══════════════════════════════════════════════════════════════════
   etedal-tokens.css — V19.9.0 (Phase 3)
   ──────────────────────────────────────────────────────────────────
   Design tokens — قيم تصميم موحَّدة لكلّ النظام.
   هذا الملف **يضاف** إلى style.css الموجود ولا يستبدله.
   ينشئ نظام scale موحَّد للـspacing وtypography وcolor وelevation.

   كل القيم متاحة كـCSS variables → سهلة الاستبدال للـtheming.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing scale (4px base) ── */
  --et-sp-0:  0;
  --et-sp-1:  4px;
  --et-sp-2:  8px;
  --et-sp-3:  12px;
  --et-sp-4:  16px;
  --et-sp-5:  20px;
  --et-sp-6:  24px;
  --et-sp-7:  28px;   /* FIX: كانت 7 و9 مفقودتين من السلّم، وأيّ صفحة تستعملهما
                        تحصل على حشو معدوم لأنّ المتغيّر غير معرَّف. */
  --et-sp-8:  32px;
  --et-sp-9:  36px;
  --et-sp-10: 40px;
  --et-sp-12: 48px;
  --et-sp-16: 64px;

  /* ── Typography scale ── */
  --et-fs-xs:   11px;
  --et-fs-sm:   12.5px;
  --et-fs-base: 14px;
  --et-fs-md:   15px;
  --et-fs-lg:   17px;
  --et-fs-xl:   20px;
  --et-fs-2xl:  24px;
  --et-fs-3xl:  30px;
  --et-fs-4xl:  36px;

  --et-fw-light:    300;
  --et-fw-regular:  400;
  --et-fw-medium:   500;
  --et-fw-semibold: 600;
  --et-fw-bold:     700;
  --et-fw-black:    800;

  --et-lh-tight:   1.25;
  --et-lh-snug:    1.4;
  --et-lh-normal:  1.55;
  --et-lh-relaxed: 1.7;

  /* ── Colors (semantic) ── */
  --et-color-primary:        #6cb499;
  --et-color-primary-dark:   #4f9c80;
  --et-color-primary-light:  #e4f2ec;
  --et-color-secondary:      #2f7e99;
  --et-color-secondary-dark: #1f5a70;

  --et-color-success: #22c55e;
  --et-color-warning: #f59e0b;
  --et-color-danger:  #ef4444;
  --et-color-info:    #3b82f6;
  --et-color-purple:  #a78bfa;

  --et-color-success-bg: #ecfdf5;
  --et-color-warning-bg: #fffbeb;
  --et-color-danger-bg:  #fef2f2;
  --et-color-info-bg:    #eff6ff;
  --et-color-purple-bg:  #f5f3ff;

  /* Neutral scale */
  --et-color-bg:    #f7f9fb;
  --et-color-card:  #ffffff;
  --et-color-text:  #0f172a;
  --et-color-text2: #475569;
  --et-color-text3: #94a3b8;
  --et-color-border:      #e2e8f0;
  --et-color-border-soft: #f1f5f9;

  /* ── Elevation ── */
  --et-shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --et-shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --et-shadow-md: 0 4px 6px -1px rgba(15,23,42,0.08), 0 2px 4px -1px rgba(15,23,42,0.06);
  --et-shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.08), 0 4px 6px -2px rgba(15,23,42,0.04);
  --et-shadow-xl: 0 20px 25px -5px rgba(15,23,42,0.10), 0 10px 10px -5px rgba(15,23,42,0.04);

  /* ── Radius ── */
  --et-radius-sm: 6px;
  --et-radius-md: 10px;
  --et-radius-lg: 14px;
  --et-radius-xl: 20px;
  --et-radius-full: 9999px;

  /* ── Layout ── */
  --et-container-sm:  640px;
  --et-container-md:  768px;
  --et-container-lg:  1024px;
  --et-container-xl:  1280px;
  --et-container-2xl: 1536px;

  --et-density-compact: 8px;
  --et-density-cozy:    12px;
  --et-density-comfy:   16px;

  /* ── Transitions ── */
  --et-transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --et-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --et-transition-slow:   320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark-mode overrides */
body.dark-mode {
  --et-color-bg:          #0b1220;
  --et-color-card:        #111a2e;
  --et-color-text:        #f1f5f9;
  --et-color-text2:       #cbd5e1;
  --et-color-text3:       #94a3b8;
  --et-color-border:      #1e293b;
  --et-color-border-soft: #1a2436;

  --et-color-primary-light: #0f3026;
  --et-color-success-bg:    #052e16;
  --et-color-warning-bg:    #422006;
  --et-color-danger-bg:     #450a0a;
  --et-color-info-bg:       #172554;
  --et-color-purple-bg:     #2e1065;

  --et-shadow-xs: 0 1px 2px rgba(0,0,0,0.25);
  --et-shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --et-shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --et-shadow-lg: 0 10px 20px rgba(0,0,0,0.45);
  --et-shadow-xl: 0 20px 30px rgba(0,0,0,0.55);
}

/* High-density mode (smart dashboards) */
.et-density-compact {
  --et-density: var(--et-density-compact);
}
.et-density-cozy {
  --et-density: var(--et-density-cozy);
}
.et-density-comfy {
  --et-density: var(--et-density-comfy);
}