/* ════════════════════════════════════════════════════════════
   OIC Theme — Design Tokens
   المستوى 1: Primitive (قيم خام ثابتة)
   المستوى 2: Semantic (معنى سياقي — يتغير مع الداكن)
   ════════════════════════════════════════════════════════════ */

:root {

  /* ── Primitive: Slate ── */
  --oic-slate-50:   #f8fafc;
  --oic-slate-100:  #f1f5f9;
  --oic-slate-200:  #e2e8f0;
  --oic-slate-300:  #cbd5e1;
  --oic-slate-400:  #94a3b8;
  --oic-slate-500:  #64748b;
  --oic-slate-600:  #475569;
  --oic-slate-700:  #334155;
  --oic-slate-800:  #1e293b;
  --oic-slate-900:  #0f172a;
  --oic-slate-950:  #07101f;

  /* ── Primitive: White / Black ── */
  --oic-white:      #ffffff;
  --oic-black:      #000000;
  --oic-white-a10:  rgba(255,255,255,.10);
  --oic-white-a20:  rgba(255,255,255,.20);
  --oic-white-a40:  rgba(255,255,255,.40);
  --oic-white-a60:  rgba(255,255,255,.60);
  --oic-white-a80:  rgba(255,255,255,.80);
  --oic-black-a10:  rgba(0,0,0,.10);
  --oic-black-a20:  rgba(0,0,0,.20);
  --oic-black-a40:  rgba(0,0,0,.40);

  /* ── Primitive: Brand ── */
  --oic-green-100:  #d1fae5;
  --oic-green-300:  #6ee7b7;
  --oic-green-500:  #4ea181;
  --oic-green-700:  #0b7a57;
  --oic-green-900:  #064e35;
  --oic-gold-300:   #fcd34d;
  --oic-gold-500:   #d1b066;
  --oic-gold-700:   #c6a24f;
  --oic-gold-900:   #92681f;
  --oic-blue-500:   #3f6ea8;
  --oic-blue-700:   #2563eb;

  /* ── Primitive: Transparent ── */
  --oic-transparent: transparent;

  /* ══ Semantic: Surfaces (تتغير مع الداكن) ══ */
  --c-page:     #f4f7f5;   /* خلفية الصفحة */
  --c-surface:  #ffffff;   /* خلفية البطاقات */
  --c-surface-2:#f8fafc;   /* خلفية ثانوية */
  --c-overlay:  rgba(255,255,255,.9); /* overlay شفاف */

  /* ══ Semantic: Borders ══ */
  --c-border:      #e2e8f0;
  --c-border-soft: #dde8e3;
  --c-border-dark: #cbd5e1;

  /* ══ Semantic: Text ══ */
  --c-text:       #141e1b;
  --c-text-2:     #5a7168;
  --c-text-3:     #94a3b8;
  --c-text-inv:   #ffffff;   /* نص على خلفية داكنة */

  /* ══ Semantic: State ══ */
  --c-focus:    var(--c-primary);
  --c-success:  #16a34a;
  --c-warning:  #d97706;
  --c-error:    #dc2626;
  --c-info:     #2563eb;
}

/* ══ Dark Mode Override ══════════════════════════════════════ */
[data-theme="dark"], .dark {
  --c-page:     #0f172a;
  --c-surface:  #1e293b;
  --c-surface-2:#0f172a;
  --c-overlay:  rgba(15,23,42,.9);

  --c-border:      rgba(255,255,255,.08);
  --c-border-soft: rgba(255,255,255,.06);
  --c-border-dark: rgba(255,255,255,.12);

  --c-text:     #f1f5f9;
  --c-text-2:   #94a3b8;
  --c-text-3:   #64748b;
  --c-text-inv: #0f172a;

  --c-heading: #ffffff;
  --c-heading-primary: #7bc3a8;
  --c-heading-secondary: #e2c373;
  --c-heading-shape: #e2c373;
  --c-heading-shape-bg: rgba(226, 195, 115, 0.16);
}

/* ══ Dynamic Tint Variables — تتغير مع dark mode ══════════════
   ☀️ فاتح: tint مع أبيض (يُفتَّح اللون)
   🌙 داكن: shade مع أسود (يُغمَّق اللون — نفس النسبة مُعكوسة)
   ════════════════════════════════════════════════════════════ */
:root {
  /* Primary tints — فاتح */
  --c-primary-t5:   color-mix(in srgb, var(--c-primary)  5%, white);
  --c-primary-t10:  color-mix(in srgb, var(--c-primary) 10%, white);
  --c-primary-t15:  color-mix(in srgb, var(--c-primary) 15%, white);
  --c-primary-t20:  color-mix(in srgb, var(--c-primary) 20%, white);
  --c-primary-t30:  color-mix(in srgb, var(--c-primary) 30%, white);
  --c-primary-t40:  color-mix(in srgb, var(--c-primary) 40%, white);
  --c-primary-t50:  color-mix(in srgb, var(--c-primary) 50%, white);
  --c-primary-t60:  color-mix(in srgb, var(--c-primary) 60%, white);
  --c-primary-t70:  color-mix(in srgb, var(--c-primary) 70%, white);
  --c-primary-t80:  color-mix(in srgb, var(--c-primary) 80%, white);
  --c-primary-t90:  color-mix(in srgb, var(--c-primary) 90%, white);
  --c-primary-t95:  color-mix(in srgb, var(--c-primary) 95%, white);
  /* Primary shades — غامق */
  --c-primary-s5:   color-mix(in srgb, var(--c-primary)  5%, black);
  --c-primary-s10:  color-mix(in srgb, var(--c-primary) 10%, black);
  --c-primary-s20:  color-mix(in srgb, var(--c-primary) 20%, black);
  --c-primary-s30:  color-mix(in srgb, var(--c-primary) 30%, black);
  --c-primary-s40:  color-mix(in srgb, var(--c-primary) 40%, black);
  --c-primary-s50:  color-mix(in srgb, var(--c-primary) 50%, black);
  --c-primary-s60:  color-mix(in srgb, var(--c-primary) 60%, black);
  --c-primary-s70:  color-mix(in srgb, var(--c-primary) 70%, black);
  --c-primary-s80:  color-mix(in srgb, var(--c-primary) 80%, black);
  --c-primary-s90:  color-mix(in srgb, var(--c-primary) 90%, black);
  --c-primary-s95:  color-mix(in srgb, var(--c-primary) 95%, black);
  /* Secondary tints */
  --c-secondary-t5:   color-mix(in srgb, var(--c-secondary)  5%, white);
  --c-secondary-t10:  color-mix(in srgb, var(--c-secondary) 10%, white);
  --c-secondary-t20:  color-mix(in srgb, var(--c-secondary) 20%, white);
  --c-secondary-t30:  color-mix(in srgb, var(--c-secondary) 30%, white);
  --c-secondary-t40:  color-mix(in srgb, var(--c-secondary) 40%, white);
  --c-secondary-t50:  color-mix(in srgb, var(--c-secondary) 50%, white);
  --c-secondary-t60:  color-mix(in srgb, var(--c-secondary) 60%, white);
  --c-secondary-t70:  color-mix(in srgb, var(--c-secondary) 70%, white);
  --c-secondary-t80:  color-mix(in srgb, var(--c-secondary) 80%, white);
  --c-secondary-t90:  color-mix(in srgb, var(--c-secondary) 90%, white);
  --c-secondary-t95:  color-mix(in srgb, var(--c-secondary) 95%, white);
  /* Secondary shades */
  --c-secondary-s5:   color-mix(in srgb, var(--c-secondary)  5%, black);
  --c-secondary-s10:  color-mix(in srgb, var(--c-secondary) 10%, black);
  --c-secondary-s20:  color-mix(in srgb, var(--c-secondary) 20%, black);
  --c-secondary-s30:  color-mix(in srgb, var(--c-secondary) 30%, black);
  --c-secondary-s40:  color-mix(in srgb, var(--c-secondary) 40%, black);
  --c-secondary-s50:  color-mix(in srgb, var(--c-secondary) 50%, black);
  --c-secondary-s60:  color-mix(in srgb, var(--c-secondary) 60%, black);
  --c-secondary-s70:  color-mix(in srgb, var(--c-secondary) 70%, black);
  --c-secondary-s80:  color-mix(in srgb, var(--c-secondary) 80%, black);
  --c-secondary-s90:  color-mix(in srgb, var(--c-secondary) 90%, black);
  --c-secondary-s95:  color-mix(in srgb, var(--c-secondary) 95%, black);
}

/* ══ Dark Mode — عكس التدرج: tint يصير shade والعكس ══════════ */
[data-theme="dark"], .dark {
  /* Primary: في الداكن الـ tint يُعكَس لـ shade */
  --c-primary-t5:   color-mix(in srgb, var(--c-primary)  5%, black);
  --c-primary-t10:  color-mix(in srgb, var(--c-primary) 10%, black);
  --c-primary-t15:  color-mix(in srgb, var(--c-primary) 15%, black);
  --c-primary-t20:  color-mix(in srgb, var(--c-primary) 20%, black);
  --c-primary-t30:  color-mix(in srgb, var(--c-primary) 30%, black);
  --c-primary-t40:  color-mix(in srgb, var(--c-primary) 40%, black);
  --c-primary-t50:  color-mix(in srgb, var(--c-primary) 50%, black);
  --c-primary-t60:  color-mix(in srgb, var(--c-primary) 60%, black);
  --c-primary-t70:  color-mix(in srgb, var(--c-primary) 70%, black);
  --c-primary-t80:  color-mix(in srgb, var(--c-primary) 80%, black);
  --c-primary-t90:  color-mix(in srgb, var(--c-primary) 90%, black);
  --c-primary-t95:  color-mix(in srgb, var(--c-primary) 95%, black);
  /* Primary: في الداكن الـ shade يُعكَس لـ tint */
  --c-primary-s5:   color-mix(in srgb, var(--c-primary)  5%, white);
  --c-primary-s10:  color-mix(in srgb, var(--c-primary) 10%, white);
  --c-primary-s20:  color-mix(in srgb, var(--c-primary) 20%, white);
  --c-primary-s30:  color-mix(in srgb, var(--c-primary) 30%, white);
  --c-primary-s40:  color-mix(in srgb, var(--c-primary) 40%, white);
  --c-primary-s50:  color-mix(in srgb, var(--c-primary) 50%, white);
  --c-primary-s60:  color-mix(in srgb, var(--c-primary) 60%, white);
  --c-primary-s70:  color-mix(in srgb, var(--c-primary) 70%, white);
  --c-primary-s80:  color-mix(in srgb, var(--c-primary) 80%, white);
  --c-primary-s90:  color-mix(in srgb, var(--c-primary) 90%, white);
  --c-primary-s95:  color-mix(in srgb, var(--c-primary) 95%, white);
  /* Secondary */
  --c-secondary-t5:   color-mix(in srgb, var(--c-secondary)  5%, black);
  --c-secondary-t10:  color-mix(in srgb, var(--c-secondary) 10%, black);
  --c-secondary-t20:  color-mix(in srgb, var(--c-secondary) 20%, black);
  --c-secondary-t30:  color-mix(in srgb, var(--c-secondary) 30%, black);
  --c-secondary-t40:  color-mix(in srgb, var(--c-secondary) 40%, black);
  --c-secondary-t50:  color-mix(in srgb, var(--c-secondary) 50%, black);
  --c-secondary-t60:  color-mix(in srgb, var(--c-secondary) 60%, black);
  --c-secondary-t70:  color-mix(in srgb, var(--c-secondary) 70%, black);
  --c-secondary-t80:  color-mix(in srgb, var(--c-secondary) 80%, black);
  --c-secondary-t90:  color-mix(in srgb, var(--c-secondary) 90%, black);
  --c-secondary-t95:  color-mix(in srgb, var(--c-secondary) 95%, black);
  --c-secondary-s5:   color-mix(in srgb, var(--c-secondary)  5%, white);
  --c-secondary-s10:  color-mix(in srgb, var(--c-secondary) 10%, white);
  --c-secondary-s20:  color-mix(in srgb, var(--c-secondary) 20%, white);
  --c-secondary-s30:  color-mix(in srgb, var(--c-secondary) 30%, white);
  --c-secondary-s40:  color-mix(in srgb, var(--c-secondary) 40%, white);
  --c-secondary-s50:  color-mix(in srgb, var(--c-secondary) 50%, white);
  --c-secondary-s60:  color-mix(in srgb, var(--c-secondary) 60%, white);
  --c-secondary-s70:  color-mix(in srgb, var(--c-secondary) 70%, white);
  --c-secondary-s80:  color-mix(in srgb, var(--c-secondary) 80%, white);
  --c-secondary-s90:  color-mix(in srgb, var(--c-secondary) 90%, white);
  --c-secondary-s95:  color-mix(in srgb, var(--c-secondary) 95%, white);
}