/*
 * ═══════════════════════════════════════════════
 *  _tokens.css — Design Tokens (هویت بصری)
 *  این فایل باید قبل از _base.css لینک شود
 * ═══════════════════════════════════════════════
 */

:root {

  /* ══ TYPOGRAPHY ══ */
  --font-family:    'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  --fs-xs:          11px;
  --fs-sm:          12px;
  --fs-base:        13px;
  --fs-md:          14px;
  --fs-lg:          16px;
  --fs-xl:          18px;
  --fs-2xl:         20px;
  --fs-3xl:         28px;
  --fs-4xl:         36px;

  --fw-normal:      400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  --lh-tight:       1.4;
  --lh-normal:      1.7;
  --lh-relaxed:     1.9;


  /* ══ COLORS — Neutral ══ */
  --c-white:        #FFFFFF;
  --c-gray-50:      #F9FAFB;
  --c-gray-100:     #F3F4F6;
  --c-gray-200:     #E5E7EB;
  --c-gray-300:     #D1D5DB;
  --c-gray-400:     #9CA3AF;
  --c-gray-500:     #6B7280;
  --c-gray-600:     #4B5563;
  --c-gray-700:     #374151;
  --c-gray-800:     #1F2937;
  --c-gray-900:     #111827;
  --c-text:         #343A40;
  --c-text-light:   #6B7280;
  --c-text-muted:   #9CA3AF;


  /* ══ COLORS — Semantic ══ */
  --c-blue:         #3B82F6;
  --c-blue-dark:    #1E40AF;
  --c-blue-light:   #EFF6FF;
  --c-blue-border:  #BFDBFE;

  --c-green:        #22C55E;
  --c-green-dark:   #16A34A;
  --c-green-light:  #F0FDF4;
  --c-green-border: #BBF7D0;

  --c-red:          #EF4444;
  --c-red-dark:     #DC2626;
  --c-red-light:    #FEF2F2;
  --c-red-border:   #FECACA;

  --c-yellow:       #EAB308;
  --c-yellow-dark:  #CA8A04;
  --c-yellow-light: #FEFCE8;
  --c-yellow-border:#FDE68A;

  --c-orange:       #F97316;
  --c-orange-dark:  #EA580C;
  --c-orange-light: #FFF7ED;
  --c-orange-border:#FED7AA;

  --c-purple:       #8B5CF6;
  --c-purple-dark:  #7C3AED;
  --c-purple-light: #FAF5FF;
  --c-purple-border:#DDD6FE;

  --c-teal:         #14B8A6;
  --c-teal-dark:    #0D9488;
  --c-teal-light:   #F0FDFA;
  --c-teal-border:  #99F6E4;

  --c-slate:        #475569;
  --c-slate-dark:   #334155;
  --c-slate-light:  #F8FAFC;


  /* ══ SPACING — مضرب ۴ ══ */
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           20px;
  --sp-6:           24px;
  --sp-7:           28px;
  --sp-8:           32px;
  --sp-10:          40px;
  --sp-12:          48px;


  /* ══ BORDER RADIUS ══ */
  --r-sm:           6px;
  --r-md:           10px;
  --r-lg:           14px;
  --r-xl:           20px;
  --r-full:         50%;
  --r-pill:         999px;


  /* ══ BORDERS ══ */
  --border:         1px solid var(--c-gray-200);
  --border-light:   1px solid var(--c-gray-100);


  /* ══ SHADOWS ══ */
  --shadow-xs:      0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:      0 8px 24px rgba(0,0,0,0.1);
  --shadow-hover:   0 6px 16px rgba(0,0,0,0.07);


  /* ══ CARD ══ */
  --card-bg:        var(--c-white);
  --card-border:    var(--border);
  --card-radius:    var(--r-xl);
  --card-padding:   var(--sp-6);
  --card-shadow:    var(--shadow-xs);

  --card-header-bg:     var(--c-gray-50);
  --card-header-border: var(--border);
  --card-header-py:     var(--sp-3);
  --card-header-px:     var(--sp-5);


  /* ══ TRANSITIONS ══ */
  --ease-default:   .2s ease;
  --ease-bounce:    .3s cubic-bezier(.4,0,.2,1);
  --ease-slow:      .6s ease;


  /* ══ Z-INDEX ══ */
  --z-tooltip:      10;
  --z-sticky:       50;
  --z-modal:        100;
}


/* ══ MOBILE OVERRIDES ══ */
@media screen and (max-width: 576px) {
  :root {
    --card-padding:   var(--sp-4);
    --card-header-px: var(--sp-4);
    --fs-base:        12px;
    --fs-md:          13px;
  }
}