/* Elee design-system tokens (copied from design/_ds/.../tokens) */

@font-face {
  font-family: 'IRANSansXFaNum';
  src: url('../fonts/IRANSansXFaNum-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSansXFaNum';
  src: url('../fonts/IRANSansXFaNum-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── الی استار — Color Tokens ─────────────────────────────────────────── */
/*
 * رنگ‌های استخراج‌شده از لوگو رسمی الی استار (elee_icon.png)
 * زرد برند: #FDEE00 — مشکی: #000000
 */

:root {
  /* ── Brand Yellow ───────────────────── */
  --color-yellow-100: #FFFDE0;
  --color-yellow-200: #FFFAAB;
  --color-yellow-300: #FFF566;
  --color-yellow-400: #FFF133;
  --color-yellow-500: #FDEE00;   /* ← رنگ اصلی برند از لوگو */
  --color-yellow-600: #D9CB00;
  --color-yellow-700: #A89E00;

  /* ── Black / Dark ───────────────────── */
  --color-black:      #000000;
  --color-dark-900:   #111111;
  --color-dark-800:   #1A1A1A;
  --color-dark-700:   #2A2A2A;
  --color-dark-600:   #3A3A3A;
  --color-dark-500:   #4A4A4A;

  /* ── White / Surface ────────────────── */
  --color-white:      #FFFFFF;
  --color-surface-tint: #FFFEF5;   /* زرد خیلی روشن برای پس‌زمینه صفحه */
  --color-surface-alt:  #FFFDE0;

  /* ── Neutral ────────────────────────── */
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E8E8E8;
  --color-gray-300: #D0D0D0;
  --color-gray-400: #A0A0A0;
  --color-gray-500: #707070;
  --color-gray-600: #484848;

  /* ── Semantic ───────────────────────── */
  --color-primary:          var(--color-yellow-500);
  --color-primary-hover:    var(--color-yellow-400);
  --color-primary-active:   var(--color-yellow-600);
  --color-primary-text:     var(--color-black);   /* متن روی زمینه زرد */

  --color-bg:               var(--color-white);
  --color-bg-alt:           var(--color-surface-tint);
  --color-bg-dark:          var(--color-black);
  --color-bg-dark-alt:      var(--color-dark-800);

  --color-surface:          var(--color-white);
  --color-surface-raised:   var(--color-surface-tint);

  --color-text-primary:     var(--color-black);
  --color-text-secondary:   var(--color-dark-600);
  --color-text-tertiary:    var(--color-gray-500);
  --color-text-on-dark:     var(--color-white);
  --color-text-on-dark-muted: var(--color-gray-400);
  --color-text-brand:       var(--color-yellow-500);

  --color-border:           var(--color-gray-200);
  --color-border-dark:      var(--color-dark-700);
  --color-border-brand:     var(--color-yellow-500);

  /* ── Status ─────────────────────────── */
  --color-success:  #1A7A3F;
  --color-warning:  #D48000;
  --color-error:    #C53030;
  --color-info:     #1A5FAB;
}

/* ─── الی استار — Typography Tokens ──────────────────────────────────────── */

:root {
  /* ── Font families ──────────────────── */
  --font-primary:   'IRANSansX', 'Tahoma', 'Arial', sans-serif;
  --font-numeric:   'IRANSansXFaNum', 'IRANSansX', 'Tahoma', sans-serif;
  /* Fallback stack for environments without IRANSansX */

  /* ── Scale ──────────────────────────── */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.25rem;   /* 36px */
  --text-4xl:   3rem;      /* 48px */
  --text-5xl:   3.75rem;   /* 60px */

  /* ── Weights ────────────────────────── */
  --font-regular: 400;
  --font-bold:    700;

  /* ── Line heights ───────────────────── */
  --leading-tight:   1.3;
  --leading-normal:  1.6;   /* Comfortable for Persian body text */
  --leading-relaxed: 1.8;

  /* ── Letter spacing ─────────────────── */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;

  /* ── Semantic roles ─────────────────── */
  --font-display:     var(--font-primary);
  --font-body:        var(--font-primary);
  --font-ui:          var(--font-primary);
  --font-data:        var(--font-numeric);   /* Use for prices, phone numbers */
}

/* ─── الی استار — Spacing Tokens ─────────────────────────────────────────── */
/* 4px base unit grid */

:root {
  --space-0:   0;
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Semantic layout ────────────────── */
  --space-section-y:      var(--space-20);   /* Vertical section padding */
  --space-container-x:    var(--space-8);    /* Page side padding */
  --space-card-pad:       var(--space-6);    /* Inside a card */
  --space-stack-sm:       var(--space-3);
  --space-stack-md:       var(--space-6);
  --space-stack-lg:       var(--space-12);

  /* ── Component internals ────────────── */
  --space-btn-x:          var(--space-6);
  --space-btn-y:          var(--space-3);
  --space-input-x:        var(--space-4);
  --space-input-y:        var(--space-3);

  /* ── Container max-widths ───────────── */
  --max-w-sm:    640px;
  --max-w-md:    768px;
  --max-w-lg:    1024px;
  --max-w-xl:    1280px;
  --max-w-site:  1200px;
}

/* ─── الی استار — Border & Radius Tokens ─────────────────────────────────── */

:root {
  /* ── Border widths ──────────────────── */
  --border-0:   0; /* @kind other */
  --border-1:   1px;
  --border-2:   2px;
  --border-4:   4px;

  /* ── Radius scale ───────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Semantic ───────────────────────── */
  --radius-btn:    var(--radius-md);
  --radius-card:   var(--radius-lg);
  --radius-input:  var(--radius-md);
  --radius-badge:  var(--radius-full);
  --radius-chip:   var(--radius-full);

  /* ── Border styles ──────────────────── */
  --border-default:  var(--border-1) solid var(--color-border);
  --border-brand:    var(--border-2) solid var(--color-primary);
  --border-dark:     var(--border-1) solid var(--color-border-dark);
}

/* ─── الی استار — Shadow Tokens ──────────────────────────────────────────── */

:root {
  /* ── Elevation scale ────────────────── */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl:   0 16px 40px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-2xl:  0 24px 64px rgba(0, 0, 0, 0.20);

  /* ── Brand glow (yellow) ────────────── */
  --shadow-brand-sm:  0 2px 8px rgba(253, 238, 0, 0.35);
  --shadow-brand-md:  0 4px 16px rgba(253, 238, 0, 0.45);
  --shadow-brand-lg:  0 8px 32px rgba(253, 238, 0, 0.50);

  /* ── Inset shadows ──────────────────── */
  --shadow-inset-sm: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-inset-md: inset 0 2px 6px rgba(0, 0, 0, 0.10);
}