/**
 * ╔══════════════════════════════════════════════════════╗
 * ║   Diyaa Tech — Design Tokens v1.0                   ║
 * ║   Diyaa Albouzan | Tech · Brand System              ║
 * ║   استورد هذا الملف في أي تصميم جديد                ║
 * ╚══════════════════════════════════════════════════════╝
 *
 * Usage:
 *   <link rel="stylesheet" href="diyaa-tokens.css">
 *   or: @import url('diyaa-tokens.css');
 */

/* ─────────────────────────────────────────────────────
   GOOGLE FONTS — paste this link tag in every HTML file
   ─────────────────────────────────────────────────────
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
   ───────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════
   ROOT TOKENS
════════════════════════════════════════════════════ */
:root {

  /* ── Colors ── */
  --dt-bg:          #0D1117;   /* خلفية الصفحة */
  --dt-surface:     #161B22;   /* الكروت والبانلات */
  --dt-surface-2:   #1C2128;   /* طبقة سطح إضافية */
  --dt-primary:     #2DD4BF;   /* الأساسي (تيل) */
  --dt-primary-dim: rgba(45,212,191,0.10);  /* خلفية Tags */
  --dt-primary-border: rgba(45,212,191,0.22); /* حدود Tags */
  --dt-amber:       #F59E0B;   /* كهرماني / Pop */
  --dt-amber-dim:   rgba(245,158,11,0.08);  /* خلفية Amber Tags */
  --dt-amber-border: rgba(245,158,11,0.20); /* حدود Amber Tags */
  --dt-text:        #E6EDF3;   /* النص الرئيسي */
  --dt-muted:       #8B949E;   /* النص الثانوي */
  --dt-border:      rgba(139,148,158,0.13); /* حدود الكروت */
  --dt-divider:     rgba(139,148,158,0.12); /* الفواصل */

  /* ── Typography ── */
  --dt-font-arabic:  'IBM Plex Sans Arabic', system-ui, sans-serif;
  --dt-font-latin:   'IBM Plex Sans', system-ui, sans-serif;
  --dt-font-heading-ar: 'Cairo', sans-serif;
  --dt-font-heading-en: 'Space Grotesk', sans-serif;
  --dt-font-mono:    'IBM Plex Sans', 'Courier New', monospace;

  /* ── Font Sizes ── */
  --dt-text-display: 46px;   /* Cairo 900 / Space Grotesk 700 */
  --dt-text-h1:      32px;
  --dt-text-h2:      26px;
  --dt-text-h3:      20px;
  --dt-text-body:    15px;
  --dt-text-sm:      13px;
  --dt-text-xs:      11px;
  --dt-text-xxs:     10px;

  /* ── Spacing (multiples of 8) ── */
  --dt-space-1:   4px;
  --dt-space-2:   8px;
  --dt-space-3:   12px;
  --dt-space-4:   16px;
  --dt-space-5:   20px;
  --dt-space-6:   24px;
  --dt-space-8:   32px;
  --dt-space-10:  40px;
  --dt-space-12:  48px;
  --dt-space-14:  56px;
  --dt-space-16:  64px;
  --dt-space-20:  80px;

  /* ── Border Radius ── */
  --dt-radius-sm:   6px;
  --dt-radius-md:   10px;
  --dt-radius-lg:   14px;
  --dt-radius-xl:   16px;
  --dt-radius-2xl:  20px;
  --dt-radius-pill: 100px;

  /* ── Shadows ── */
  --dt-shadow-sm:   0 2px 8px  rgba(0,0,0,0.25);
  --dt-shadow-md:   0 6px 20px rgba(0,0,0,0.30);
  --dt-shadow-lg:   0 12px 40px rgba(0,0,0,0.40);
  --dt-glow-primary: 0 0 20px rgba(45,212,191,0.30);
  --dt-glow-amber:   0 0 16px rgba(245,158,11,0.25);

  /* ── Gradients ── */
  --dt-accent-bar: linear-gradient(90deg, transparent 0%, #2DD4BF 30%, #F59E0B 60%, transparent 100%);
  --dt-gradient-bg:
    radial-gradient(ellipse 1000px 800px at 80%  5%, rgba(45,212,191,0.06) 0%, transparent 60%),
    radial-gradient(ellipse  700px 600px at 10% 90%, rgba(245,158,11, 0.05) 0%, transparent 60%);
  --dt-dot-grid: radial-gradient(circle, rgba(139,148,158,0.09) 1px, transparent 1px);

  /* ── Transitions ── */
  --dt-ease: 0.18s ease;
  --dt-ease-bounce: 0.22s cubic-bezier(0.34,1.56,0.64,1);
}


/* ════════════════════════════════════════════════════
   BASE RESET + DIRECTION
════════════════════════════════════════════════════ */
.dt-base {
  direction: rtl;
  font-family: var(--dt-font-arabic);
  color: var(--dt-text);
  background-color: var(--dt-bg);
  background-image: var(--dt-gradient-bg), var(--dt-dot-grid);
  background-size: 100% 100%, 100% 100%, 28px 28px;
  -webkit-font-smoothing: antialiased;
}


/* ════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
════════════════════════════════════════════════════ */

/* Arabic */
.dt-display-ar { font-family: var(--dt-font-heading-ar); font-weight: 900; font-size: var(--dt-text-display); line-height: 1.15; }
.dt-h1-ar      { font-family: var(--dt-font-heading-ar); font-weight: 700; font-size: var(--dt-text-h1);      line-height: 1.25; }
.dt-h2-ar      { font-family: var(--dt-font-heading-ar); font-weight: 700; font-size: var(--dt-text-h2);      line-height: 1.30; }
.dt-h3-ar      { font-family: var(--dt-font-heading-ar); font-weight: 600; font-size: var(--dt-text-h3);      line-height: 1.35; }
.dt-body-ar    { font-family: var(--dt-font-arabic);     font-weight: 400; font-size: var(--dt-text-body);    line-height: 1.75; color: var(--dt-muted); }
.dt-caption-ar { font-family: var(--dt-font-arabic);     font-weight: 400; font-size: var(--dt-text-xs);      color: var(--dt-muted); opacity: 0.65; }

/* Latin */
.dt-display-en { font-family: var(--dt-font-heading-en); font-weight: 700; font-size: var(--dt-text-display); line-height: 1.10; direction: ltr; }
.dt-h1-en      { font-family: var(--dt-font-heading-en); font-weight: 700; font-size: var(--dt-text-h1);      direction: ltr; }
.dt-h2-en      { font-family: var(--dt-font-heading-en); font-weight: 700; font-size: var(--dt-text-h2);      direction: ltr; }
.dt-body-en    { font-family: var(--dt-font-latin);      font-weight: 400; font-size: var(--dt-text-body);    line-height: 1.70; color: var(--dt-muted); direction: ltr; }
.dt-mono       { font-family: var(--dt-font-mono);       font-size: var(--dt-text-xs);  letter-spacing: 0.05em; direction: ltr; }

/* Color utilities */
.dt-text-primary { color: var(--dt-primary) !important; }
.dt-text-amber   { color: var(--dt-amber)   !important; }
.dt-text-muted   { color: var(--dt-muted)   !important; }


/* ════════════════════════════════════════════════════
   CARD
════════════════════════════════════════════════════ */
.dt-card {
  background:    var(--dt-surface);
  border:        1px solid var(--dt-border);
  border-radius: var(--dt-radius-xl);
  padding:       var(--dt-space-8) var(--dt-space-10);
  transition:    transform var(--dt-ease), box-shadow var(--dt-ease);
}

.dt-card:hover {
  transform:   translateY(-3px);
  box-shadow:  var(--dt-shadow-md);
}

.dt-card-sm {
  padding: var(--dt-space-4) var(--dt-space-5);
  border-radius: var(--dt-radius-lg);
}


/* ════════════════════════════════════════════════════
   TAG / PILL
════════════════════════════════════════════════════ */
.dt-tag {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--dt-space-2);
  background:    var(--dt-primary-dim);
  border:        1px solid var(--dt-primary-border);
  border-radius: var(--dt-radius-pill);
  padding:       5px 14px;
  font-family:   var(--dt-font-heading-ar);
  font-size:     var(--dt-text-xs);
  font-weight:   700;
  color:         var(--dt-primary);
}

.dt-tag-amber {
  background: var(--dt-amber-dim);
  border-color: var(--dt-amber-border);
  color: var(--dt-amber);
}

.dt-tag-dot::before {
  content: '';
  width:  5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════
   HEX CODE CHIP
════════════════════════════════════════════════════ */
.dt-hex {
  font-family:    var(--dt-font-mono);
  font-size:      11.5px;
  font-weight:    500;
  color:          var(--dt-muted);
  background:     rgba(0,0,0,0.25);
  padding:        3px 8px;
  border-radius:  var(--dt-radius-sm);
  direction:      ltr;
  display:        inline-block;
  letter-spacing: 0.06em;
}


/* ════════════════════════════════════════════════════
   SECTION HEADER
════════════════════════════════════════════════════ */
.dt-section-head {
  display:     flex;
  align-items: center;
  gap:         var(--dt-space-4);
  margin-bottom: var(--dt-space-8);
}

.dt-section-bar {
  width:         3px;
  height:        24px;
  background:    linear-gradient(to bottom, var(--dt-primary), rgba(45,212,191,0.25));
  border-radius: 2px;
  flex-shrink:   0;
}

.dt-section-title {
  font-family: var(--dt-font-heading-ar);
  font-weight: 700;
  font-size:   var(--dt-text-sm);
  color:       var(--dt-text);
}

.dt-section-sub {
  font-family:    var(--dt-font-heading-en);
  font-size:      var(--dt-text-xxs);
  font-weight:    500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color:          var(--dt-muted);
  direction:      ltr;
}

.dt-section-num {
  font-family:    var(--dt-font-heading-en);
  font-weight:    700;
  font-size:      var(--dt-text-xxs);
  color:          var(--dt-primary);
  opacity:        0.5;
  letter-spacing: 0.08em;
  direction:      ltr;
}


/* ════════════════════════════════════════════════════
   DIVIDER
════════════════════════════════════════════════════ */
.dt-divider {
  width:      100%;
  height:     1px;
  background: var(--dt-divider);
  border:     none;
  margin:     var(--dt-space-6) 0;
}

.dt-divider-accent {
  background: linear-gradient(90deg, var(--dt-primary), transparent);
}


/* ════════════════════════════════════════════════════
   ACCENT BAR (top of page)
════════════════════════════════════════════════════ */
.dt-accent-bar {
  height:     2px;
  background: var(--dt-accent-bar);
}


/* ════════════════════════════════════════════════════
   GLOW HELPERS
════════════════════════════════════════════════════ */
.dt-glow-primary { filter: drop-shadow(0 0 18px rgba(45,212,191,0.35)); }
.dt-glow-amber   { filter: drop-shadow(0 0 14px rgba(245,158,11, 0.30)); }

.dt-glow-bg-primary {
  position: absolute;
  background: radial-gradient(ellipse, rgba(45,212,191,0.10) 0%, transparent 65%);
  pointer-events: none;
}

.dt-glow-bg-amber {
  position: absolute;
  background: radial-gradient(ellipse, rgba(245,158,11,0.08) 0%, transparent 65%);
  pointer-events: none;
}


/* ════════════════════════════════════════════════════
   MOCKUP CHROME (macOS-style window)
════════════════════════════════════════════════════ */
.dt-chrome {
  background:    var(--dt-surface);
  border:        1px solid var(--dt-border);
  border-radius: var(--dt-radius-xl);
  overflow:      hidden;
}

.dt-chrome-bar {
  padding:       11px 18px;
  border-bottom: 1px solid var(--dt-border);
  display:       flex;
  align-items:   center;
  gap:           7px;
  direction:     ltr;
}

.dt-chrome-dot {
  width:         11px;
  height:        11px;
  border-radius: 50%;
  flex-shrink:   0;
}

.dt-chrome-label {
  font-family:    var(--dt-font-heading-en);
  font-size:      11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--dt-muted);
  margin-left:    6px;
}


/* ════════════════════════════════════════════════════
   LOGO WORDMARK HELPER
════════════════════════════════════════════════════ */
.dt-wordmark {
  display:     flex;
  align-items: center;
  gap:         10px;
  direction:   ltr;
}

.dt-wordmark-ar {
  font-family:    var(--dt-font-heading-ar);
  font-weight:    900;
  color:          var(--dt-text);
  letter-spacing: -0.01em;
  line-height:    1;
}

.dt-wordmark-sep {
  width:      1.5px;
  height:     1em;
  background: linear-gradient(to bottom, transparent, var(--dt-primary) 30%, var(--dt-primary) 70%, transparent);
  flex-shrink: 0;
}

.dt-wordmark-en {
  font-family:    var(--dt-font-heading-en);
  font-weight:    700;
  color:          var(--dt-primary);
  letter-spacing: 0.02em;
}


/* ════════════════════════════════════════════════════
   CREATOR PORTRAIT — صورة المبدع
   الاستخدام: أضف الكلاس على <img src="my-avatar.png">
   في كل YouTube thumbnail أو Reels/TikTok cover
   الموضع: الجهة اليسرى، ~40% من عرض التصميم
════════════════════════════════════════════════════ */
.creator-portrait {
  /* الحجم: ~40% من عرض الحاوية الأب */
  width: 40%;
  height: 100%;
  object-fit: cover;
  object-position: center top;

  /* التموضع: الجهة اليسرى دائماً */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  /* التأثيرات: توهج تيل خفيف */
  filter:
    drop-shadow(0 0 32px rgba(45, 212, 191, 0.22))
    drop-shadow(0 0 10px rgba(45, 212, 191, 0.12));

  /* ضمان الحدة على الشاشات عالية الدقة */
  image-rendering: -webkit-optimize-contrast;
  z-index: 2;
}

/* طبقة fade للدمج مع الخلفية (أضف هذا على عنصر أخ ::after) */
.creator-portrait-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 30%,
    rgba(13, 17, 23, 0.55) 60%,
    #0D1117 90%
  );
  z-index: 3;
  pointer-events: none;
}

/* نسخة Reels/TikTok (عمودي) */
.creator-portrait-vertical {
  width: 100%;
  height: 55%;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  top: 0; left: 0; right: 0;
  filter:
    drop-shadow(0 0 28px rgba(45, 212, 191, 0.20))
    drop-shadow(0 0 8px  rgba(45, 212, 191, 0.10));
  z-index: 2;
}

/* ════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
════════════════════════════════════════════════════ */
.dt-grid-2  { display: grid; grid-template-columns: 1fr 1fr;           gap: var(--dt-space-6); }
.dt-grid-3  { display: grid; grid-template-columns: 1fr 1fr 1fr;       gap: var(--dt-space-5); }
.dt-grid-4  { display: grid; grid-template-columns: repeat(4,1fr);     gap: var(--dt-space-4); }
.dt-grid-6  { display: grid; grid-template-columns: repeat(6,1fr);     gap: var(--dt-space-4); }

@media (max-width: 768px) {
  .dt-grid-2, .dt-grid-3, .dt-grid-4, .dt-grid-6 { grid-template-columns: 1fr; }
}