/* ═══════════════════════════════════════════════════════
   JetCi Landing — Design Tokens & Variables
   ═══════════════════════════════════════════════════════ */

/* Local Persian Font (Vazirmatn) — Zero-latency, No FOUT/CLS */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn_500Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn_600SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn_700Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn_800ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Brand Colors (Snapp & Mobility Inspired) ─── */
  --brand-primary:     #00b862;   /* signature mobility green */
  --brand-primary-h:   #009e52;   /* darker hover */
  --brand-primary-l:   #22c55e;   /* vibrant accent */
  --brand-dark:        #064e3b;   /* deep rich forest */
  --brand-mid:         #047857;   /* emerald-700 */
  --brand-light:       #f0fdf4;   /* clean subtle tint */
  --brand-light-2:     #dcfce7;   /* light tint */

  /* ─── Accent ─── */
  --accent:            #2563eb;   /* electric blue */
  --accent-h:          #1d4ed8;   
  --accent-light:      #eff6ff;   

  /* ─── Neutrals ─── */
  --gray-50:   #f9fafb;
  --gray-100:  #f3f4f6;
  --gray-200:  #e5e7eb;
  --gray-300:  #d1d5db;
  --gray-400:  #9ca3af;
  --gray-500:  #6b7280;
  --gray-600:  #4b5563;
  --gray-700:  #374151;
  --gray-800:  #1f2937;
  --gray-900:  #111827;

  /* ─── Semantic ─── */
  --success:   #10b981;
  --warning:   #f59e0b;
  --danger:    #ef4444;
  --info:      #3b82f6;

  /* ─── Text ─── */
  --text-primary:    #0f172a;
  --text-secondary:  #475569;
  --text-muted:      #94a3b8;
  --text-white:      #ffffff;
  --text-on-brand:   #ffffff;

  /* ─── Background ─── */
  --bg-page:         #ffffff;
  --bg-alt:          #f8fafc;
  --bg-card:         #ffffff;
  --bg-glass:        rgba(255, 255, 255, 0.72);

  /* ─── Border ─── */
  --border-color:    #e2e8f0;
  --border-radius:   12px;
  --border-radius-sm: 8px;
  --border-radius-lg: 20px;
  --border-radius-xl: 32px;
  --border-radius-full: 9999px;

  /* ─── Shadow ─── */
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.07), 0 8px 10px -6px rgb(0 0 0 / 0.04);
  --shadow-green: 0 10px 25px -5px rgba(0, 184, 98, 0.28);
  --shadow-green-lg: 0 16px 32px -6px rgba(0, 184, 98, 0.35);

  /* ─── Typography ─── */
  --font-family:    'Vazirmatn', system-ui, -apple-system, sans-serif;
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-size-4xl:  2.25rem;    /* 36px */
  --font-size-5xl:  3rem;       /* 48px */
  --font-size-6xl:  3.75rem;    /* 60px */

  --font-weight-light:   300;
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;
  --font-weight-extra:   800;
  --font-weight-black:   900;

  --line-height-tight:  1.25;
  --line-height-snug:   1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.625;
  --line-height-loose:  2;

  /* ─── Spacing ─── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ─── Layout ─── */
  --container-max:    1220px;
  --container-pad:    clamp(1rem, 5vw, 2rem);
  --navbar-height:    76px;
  --section-padding:  clamp(3.5rem, 7vw, 6rem);

  /* ─── Transitions ─── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Gradients ─── */
  --gradient-brand:   linear-gradient(135deg, #00b862 0%, #009e52 100%);
  --gradient-hero:    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  --gradient-card:    #ffffff;
  --gradient-glass:   rgba(255, 255, 255, 0.88);
  --gradient-text:    linear-gradient(135deg, #111827 0%, #00b862 100%);

  /* ─── Z-index ─── */
  --z-base:    1;
  --z-above:   10;
  --z-modal:   100;
  --z-navbar:  200;
  --z-tooltip: 300;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:         #0f172a;
    --bg-alt:          #1e293b;
    --bg-card:         #1e293b;
    --bg-glass:        rgba(15, 23, 42, 0.85);
    --text-primary:    #f1f5f9;
    --text-secondary:  #94a3b8;
    --text-muted:      #64748b;
    --border-color:    #334155;
  }
}