/* ============================================================
   AZR Design System — Tokens
   v.02 · 2026
   المصدر الواحد للحقيقة. كل قيمة في النظام تأتي من هنا.
   ============================================================ */

:root {
  /* — الأسس · Foundation · 60% ————————————————————— */
  --azr-cream:       #F2EDE3;
  --azr-paper:       #FBF7EE;
  --azr-ink:         #0A1628;
  --azr-ink-deep:    #050B14;

  /* — العلامة · Signal · 30% ————————————————————— */
  --azr-orange:        #E8530E;
  --azr-orange-deep:   #C13E00;
  --azr-orange-soft:   #FFB088;
  --azr-ink-warm:      #1B1815;

  /* — القطاعات · Sectors · 8% ————————————————————— */
  --azr-emerald:  #1F6B4D;  /* حكومي · بيئي */
  --azr-plum:     #6B1F5C;  /* ثقافي · إعلامي */
  --azr-brass:    #C99A2C;  /* تراثي · فاخر */
  --azr-cobalt:   #2C6BB8;  /* تقني · مالي */

  /* — المساعدة · Utility · 2% ————————————————————— */
  --azr-mute-soft: #C9C2B5;
  --azr-mute:      #6B6256;
  --azr-alert:     #BE2C2C;
  --azr-success:   #1A8C5C;

  /* — Semantic (للاستخدام في المكونات) —————————— */
  --bg-default:     var(--azr-paper);
  --bg-alt:         var(--azr-cream);
  --bg-dark:        var(--azr-ink);
  --bg-dark-deep:   var(--azr-ink-deep);

  --text-strong:    var(--azr-ink);
  --text-soft:      var(--azr-mute);
  --text-on-dark:   var(--azr-paper);
  --text-accent:    var(--azr-orange);

  --border:         var(--azr-mute-soft);
  --accent:         var(--azr-orange);
  --accent-pressed: var(--azr-orange-deep);
  --accent-soft:    var(--azr-orange-soft);

  /* — Typography Families ———————————————————————— */
  --font-primary:  'Tajawal', system-ui, -apple-system, sans-serif;
  --font-display:  'Instrument Serif', 'Times New Roman', serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;
  --font-support:  'Inter', system-ui, -apple-system, sans-serif;

  /* — Type Scale (السلم الطباعي) ————————————————— */
  --size-d1:    128px;
  --size-d2:    108px;
  --size-h1:    72px;
  --size-h2:    48px;
  --size-h3:    36px;
  --size-h4:    28px;
  --size-lede:  22px;
  --size-body:  18px;
  --size-small: 14px;
  --size-label: 13px;

  --line-tight:  1.0;
  --line-snug:   1.1;
  --line-normal: 1.5;
  --line-body:   1.7;   /* للعربي خصيصاً */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-label:  0.2em;

  /* — Spacing (8px baseline) ————————————————————— */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   80px;
  --space-10:  96px;
  --space-11:  128px;
  --space-12:  160px;

  /* — Grid ————————————————————————————————————— */
  --grid-web-cols:    12;
  --grid-web-gutter:  32px;
  --grid-web-margin:  80px;
  --grid-web-max:     1440px;

  --grid-slide-cols:    12;
  --grid-slide-gutter:  40px;
  --grid-slide-margin:  80px;

  --grid-social-cols:    6;
  --grid-social-gutter:  24px;
  --grid-social-margin:  64px;

  /* — Radius ———————————————————————————————————— */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* — Motion ———————————————————————————————————— */
  --duration-instant: 120ms;
  --duration-fast:    240ms;
  --duration-base:    480ms;
  --duration-slow:    720ms;
  --ease-azr:         cubic-bezier(0.22, 0.61, 0.36, 1);

  /* — Shadow ———————————————————————————————————— */
  --shadow-none: none;
  --shadow-sm:   0 2px 4px rgba(10, 22, 40, 0.06);
  --shadow-md:   0 4px 12px rgba(10, 22, 40, 0.08);
  --shadow-lg:   0 12px 32px rgba(10, 22, 40, 0.12);
}

/* — Base Reset & Defaults ————————————————————————— */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-primary);
  font-size: var(--size-body);
  line-height: var(--line-body);
  color: var(--text-strong);
  background: var(--bg-default);
  font-weight: 400;
  direction: rtl;
}

body[dir="ltr"] {
  direction: ltr;
  font-family: var(--font-support);
  line-height: var(--line-normal);
}

/* — Type Classes —————————————————————————————— */

.azr-d1 {
  font-size: var(--size-d1);
  line-height: var(--line-tight);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
}

.azr-d2 {
  font-size: var(--size-d2);
  line-height: var(--line-tight);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
}

.azr-h1 {
  font-size: var(--size-h1);
  line-height: var(--line-snug);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.azr-h2 {
  font-size: var(--size-h2);
  line-height: var(--line-snug);
  font-weight: 700;
}

.azr-h3 {
  font-size: var(--size-h3);
  line-height: 1.15;
  font-weight: 700;
}

.azr-h4 {
  font-size: var(--size-h4);
  line-height: 1.2;
  font-weight: 700;
}

.azr-lede {
  font-size: var(--size-lede);
  line-height: var(--line-normal);
  font-weight: 400;
  color: var(--text-soft);
}

.azr-body {
  font-size: var(--size-body);
  line-height: var(--line-body);
  font-weight: 400;
}

.azr-small {
  font-size: var(--size-small);
  line-height: var(--line-normal);
  font-weight: 400;
}

.azr-label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-soft);
}

.azr-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--text-accent);
}

.azr-mono {
  font-family: var(--font-mono);
  font-weight: 400;
}

/* — Grid Container ——————————————————————————— */

.azr-container {
  max-width: var(--grid-web-max);
  margin-inline: auto;
  padding-inline: var(--grid-web-margin);
}

.azr-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-web-cols), 1fr);
  gap: var(--grid-web-gutter);
}

/* — Accessibility ———————————————————————————— */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* — Mobile responsive ————————————————————————— */

@media (max-width: 768px) {
  :root {
    --size-d1: 56px;
    --size-d2: 48px;
    --size-h1: 40px;
    --size-h2: 32px;
    --size-h3: 26px;
    --size-h4: 22px;
    --grid-web-margin: 24px;
  }
}