/* ============================================================
   Tayseer ERP — Brand Tokens (Single Source of Truth)
   ============================================================
   ⚠️  لتغيير الهوية البصرية بالكامل: عدّل المتغيرات في هذا الملف فقط.
   ⚠️  All other CSS files derive from these variables — do not
       hardcode brand colors elsewhere.
   ============================================================
   Identity: Teal #075867 + White
   Updated:  2026-05-03
   ============================================================ */

:root {
  /* ─── PRIMARY BRAND (Teal) ─── */
  --brand-primary:          #075867;
  --brand-primary-rgb:      7, 88, 103;
  --brand-primary-hover:    #054450;
  --brand-primary-emphasis: #033540;

  /* ─── PRIMARY SHADES (50 → 900) ─── */
  --brand-primary-50:  #e6f0f2;
  --brand-primary-100: #c2dade;
  --brand-primary-200: #8fb9c1;
  --brand-primary-300: #5c98a3;
  --brand-primary-400: #297786;
  --brand-primary-500: #075867;
  --brand-primary-600: #064f5c;
  --brand-primary-700: #054450;
  --brand-primary-800: #033540;
  --brand-primary-900: #022730;

  /* ─── SUBTLE BACKGROUNDS / BORDERS ─── */
  --brand-primary-subtle-bg:     rgba(7, 88, 103, 0.08);
  --brand-primary-subtle-border: rgba(7, 88, 103, 0.20);
  --brand-primary-subtle-hover:  rgba(7, 88, 103, 0.15);

  /* ─── ACCENT (Light teal — replaces former gold) ─── */
  --brand-accent:       #5c98a3;
  --brand-accent-light: #8fb9c1;
  --brand-accent-dark:  #297786;

  /* ─── ON-BRAND TEXT / SURFACES ─── */
  --brand-on-primary:   #ffffff;
  --brand-surface:      #ffffff;
  --brand-surface-alt:  #f7f9fa;

  /* ─── SIDEBAR (Brand teal — matches identity exactly) ─── */
  --brand-sidebar-bg:        #075867;
  --brand-sidebar-bg-rgb:    7, 88, 103;
  --brand-sidebar-text:      #e6f0f2;
  --brand-sidebar-active:    #ffffff;
  --brand-sidebar-active-bg: rgba(255, 255, 255, 0.15);

  /* ─── STATUS COLORS (kept harmonious with teal) ─── */
  --brand-success: #28a745;
  --brand-warning: #ffc107;
  --brand-danger:  #dc3545;
  --brand-info:    #0284C7; /* sky-600 — readable white text (5.1:1 AA) */

  /* ─── TYPOGRAPHY (Cairo — خط النظام الوحيد للعربية) ─── */
  --font-family:       'Cairo', sans-serif;
  --font-family-ar:    'Cairo', sans-serif;
  /* أرقام العرض — مطابق acc-kpi-val (Cairo + tabular-nums) */
  --font-family-num:   var(--font-family);
  --font-family-mono:  var(--font-family-num);
  --font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;

  /* ─── BRAND WAVE «التمويج» — signature surface treatment ───
     Dual radial glow: teal from the top corner + a soft green from
     the opposite bottom corner. Use as the FIRST background layer(s),
     followed by a base color, e.g.:
         background: var(--brand-wave), var(--bs-card-bg, #fff);
     Variants:
       --brand-wave       hero panels & page headers (default strength)
       --brand-wave-soft  large/ambient surfaces (navbar, toolbars)
       --brand-wave-deep  overlay for saturated primary surfaces      */
  --brand-wave-accent-rgb: 40, 199, 111;
  --brand-wave:
      radial-gradient(120% 90% at 100% 0%, rgba(var(--brand-primary-rgb), 0.14) 0%, transparent 60%),
      radial-gradient(80% 60% at 0% 100%, rgba(var(--brand-wave-accent-rgb), 0.08) 0%, transparent 60%);
  --brand-wave-soft:
      radial-gradient(120% 90% at 100% 0%, rgba(var(--brand-primary-rgb), 0.08) 0%, transparent 60%),
      radial-gradient(80% 60% at 0% 100%, rgba(var(--brand-wave-accent-rgb), 0.05) 0%, transparent 60%);
  --brand-wave-deep:
      radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.14) 0%, transparent 60%),
      radial-gradient(80% 60% at 0% 100%, rgba(var(--brand-wave-accent-rgb), 0.22) 0%, transparent 60%);

  /* ─── DARK MODE PRIMARY (auto-applied on [data-bs-theme="dark"]) ─── */
  --brand-primary-dark-mode:          #5c98a3;
  --brand-primary-dark-mode-rgb:      92, 152, 163;
  --brand-primary-dark-mode-hover:    #297786;
  --brand-primary-dark-mode-emphasis: #8fb9c1;
  --brand-primary-dark-mode-subtle-bg:     rgba(92, 152, 163, 0.15);
  --brand-primary-dark-mode-subtle-border: rgba(92, 152, 163, 0.30);
}

/* ─── DARK MODE: Override brand primary for visibility on dark bg ─── */
[data-bs-theme="dark"] {
  --brand-primary:               var(--brand-primary-dark-mode);
  --brand-primary-rgb:           var(--brand-primary-dark-mode-rgb);
  --brand-primary-hover:         var(--brand-primary-dark-mode-hover);
  --brand-primary-emphasis:      var(--brand-primary-dark-mode-emphasis);
  --brand-primary-subtle-bg:     var(--brand-primary-dark-mode-subtle-bg);
  --brand-primary-subtle-border: var(--brand-primary-dark-mode-subtle-border);
  --brand-sidebar-bg:            #033540;
  --brand-sidebar-bg-rgb:        3, 53, 64;

  /* Wave glows need a touch more presence on dark surfaces */
  --brand-wave:
      radial-gradient(120% 90% at 100% 0%, rgba(var(--brand-primary-rgb), 0.20) 0%, transparent 60%),
      radial-gradient(80% 60% at 0% 100%, rgba(var(--brand-wave-accent-rgb), 0.10) 0%, transparent 60%);
  --brand-wave-soft:
      radial-gradient(120% 90% at 100% 0%, rgba(var(--brand-primary-rgb), 0.12) 0%, transparent 60%),
      radial-gradient(80% 60% at 0% 100%, rgba(var(--brand-wave-accent-rgb), 0.06) 0%, transparent 60%);
}