@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

@font-face {
  font-family: "Vazir";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Vazir-Light.woff2") format("woff2"),
       url("fonts/Vazir-Light.woff") format("woff");
}
@font-face {
  font-family: "Vazir";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Vazir-Regular.woff2") format("woff2"),
       url("fonts/Vazir-Regular.woff") format("woff");
}
@font-face {
  font-family: "Vazir";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Vazir-Medium.woff2") format("woff2"),
       url("fonts/Vazir-Medium.woff") format("woff");
}
@font-face {
  font-family: "Vazir";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Vazir-Bold.woff2") format("woff2"),
       url("fonts/Vazir-Bold.woff") format("woff");
}
@font-face {
  font-family: "Vazir";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Vazir-Black.woff2") format("woff2"),
       url("fonts/Vazir-Black.woff") format("woff");
}

:root {
  
  --brand-magenta: #E91E63;
  --brand-orange:  #FF6B35;
  --brand-blue:    #2196F3;
  --brand-green:   #8BC34A;

  --brand-gradient: linear-gradient(
    135deg,
    #E91E63 0%,
    #FF6B35 33%,
    #2196F3 66%,
    #8BC34A 100%
  ); /* @kind color */

  
  --brand-gradient-h: linear-gradient(
    90deg,
    #E91E63 0%,
    #FF6B35 33%,
    #2196F3 66%,
    #8BC34A 100%
  ); /* @kind color */

  
  --magenta-50:  #FCE4EC;
  --magenta-100: #F8BBD0;
  --magenta-200: #F48FB1;
  --magenta-300: #F06292;
  --magenta-400: #EC407A;
  --magenta-500: #E91E63;
  --magenta-600: #D81B60;
  --magenta-700: #C2185B;
  --magenta-800: #AD1457;
  --magenta-900: #880E4F;
  --magenta-950: #4A0F2F;

  
  --orange-50:  #FFF3E0;
  --orange-100: #FFE0B2;
  --orange-200: #FFCC80;
  --orange-300: #FFB74D;
  --orange-400: #FFA726;
  --orange-500: #FF6B35;
  --orange-600: #FB8C00;
  --orange-700: #F57C00;
  --orange-800: #EF6C00;
  --orange-900: #E65100;
  --orange-950: #BF360C;

  
  --blue-50:  #E3F2FD;
  --blue-100: #BBDEFB;
  --blue-200: #90CAF9;
  --blue-300: #64B5F6;
  --blue-400: #42A5F5;
  --blue-500: #2196F3;
  --blue-600: #1E88E5;
  --blue-700: #1976D2;
  --blue-800: #1565C0;
  --blue-900: #0D47A1;
  --blue-950: #062769;

  
  --green-50:  #F1F8E9;
  --green-100: #DCEDC8;
  --green-200: #C5E1A5;
  --green-300: #AED581;
  --green-400: #9CCC65;
  --green-500: #8BC34A;
  --green-600: #7CB342;
  --green-700: #689F38;
  --green-800: #558B2F;
  --green-900: #33691E;
  --green-950: #1B5E20;

  
  --bg-light:    #FAFBFC;
  --bg-warm:     #ECEAE2;
  --bg-white:    #FFFFFF;

  --bg-dark:     #050B14;
  --bg-dark-2:   #0A1628;
  --bg-dark-3:   #1A1428;

  --line:        rgba(0, 0, 0, 0.06);
  --line-strong: rgba(0, 0, 0, 0.12);
  --line-on-dark: rgba(255, 255, 255, 0.10);

  
  --text-primary:   #0A0A0A;
  --text-secondary: #555555;
  --text-muted:     #888888;

  --text-on-dark:    #FFFFFF;
  --text-on-dark-2:  rgba(255, 255, 255, 0.70);
  --text-on-dark-3:  rgba(255, 255, 255, 0.50);

  
  --color-success: var(--green-600);
  --color-warning: var(--orange-500);
  --color-danger:  var(--magenta-600);
  --color-info:    var(--blue-600);

  
  
  --font-fa: "Vazir", "Estedad", "Vazirmatn", "IRANSans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-en: "Inter", "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;

  
  --fs-hero:    56px;
  --fs-h1:      40px;
  --fs-h2:      32px;
  --fs-h3:      20px;
  --fs-body-l:  16px;
  --fs-body:    14px;
  --fs-body-s:  13px;
  --fs-caption: 12px;
  --fs-tiny:    10px;

  --lh-hero:    1.15; /* @kind other */
  --lh-h1:      1.2;  /* @kind other */
  --lh-h2:      1.3;  /* @kind other */
  --lh-h3:      1.4;  /* @kind other */
  --lh-body-l:  1.8;  /* @kind other */
  --lh-body:    2.0;  /* @kind other */
  --lh-body-s:  1.9;  /* @kind other */
  --lh-caption: 1.7;  /* @kind other */
  --lh-tiny:    1.5;  /* @kind other */

  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */

  
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-pill: 100px;

  
  --shadow-card:        0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-card-hover:  0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-float:       0 30px 80px rgba(10, 10, 10, 0.10);
  --shadow-dark-glow:   0 20px 60px rgba(0, 0, 0, 0.40);

  --inset-glass:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);

  
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:    150ms; /* @kind other */
  --dur-base:    250ms; /* @kind other */
  --dur-slow:    600ms; /* @kind other */

  
  --container-sm: 640px;  /* @kind spacing */
  --container-md: 768px;  /* @kind spacing */
  --container-lg: 1024px; /* @kind spacing */
  --container-xl: 1280px; /* @kind spacing */
}

.t-hero,
.t-h1,
.t-h2,
.t-h3 {
  font-family: var(--font-fa);
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.t-hero { font-size: var(--fs-hero); line-height: var(--lh-hero); }
.t-h1   { font-size: var(--fs-h1);   line-height: var(--lh-h1); }
.t-h2   { font-size: var(--fs-h2);   line-height: var(--lh-h2); }
.t-h3   { font-size: var(--fs-h3);   line-height: var(--lh-h3); }

.t-body-l,
.t-body,
.t-body-s,
.t-caption {
  font-family: var(--font-fa);
  color: var(--text-secondary);
  font-weight: var(--fw-regular);
  text-wrap: pretty;
}

.t-body-l  { font-size: var(--fs-body-l);  line-height: var(--lh-body-l); }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.t-body-s  { font-size: var(--fs-body-s);  line-height: var(--lh-body-s); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }

.t-tiny {
  font-family: var(--font-fa);
  font-size: var(--fs-tiny);
  line-height: var(--lh-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.t-mono {
  font-family: var(--font-mono);
}

.t-gradient {
  background: var(--brand-gradient-h);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

[dir="rtl"] .t-hero,
[dir="rtl"] .t-h1,
[dir="rtl"] .t-h2,
[dir="rtl"] .t-h3,
[dir="rtl"] .t-body,
[dir="rtl"] .t-body-l,
[dir="rtl"] .t-body-s,
[dir="rtl"] .t-caption,
[dir="rtl"] .t-tiny {
  font-family: var(--font-fa);
}

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