/* Abrak Design Tokens — «اورورا» (cyan → violet + ember). License OPL-1
   ---------------------------------------------------------------------------
   🔴 این فایل باید *قبل از* site.css لود شود (هم در <link> قالبِ site_layout،
   هم در باندلِ web.assets_frontend). site.css توکن‌های قدیمیِ --ab-* را از
   لایه‌ی semantic همین‌جا می‌خواند، پس ترتیب مذاکره‌پذیر نیست.

   🔴 مثل site.css کلِ فایل داخل بلاکِ ignoreِ rtlcss است (پایین‌تر): باندلِ اودو
   برای فارسی از rtlcss رد می‌شود و این استایل‌ها از اول RTL نوشته شده‌اند؛ بدون
   آن بلاک، خروجیِ باندل با بایت‌های لینکِ مستقیم یکی نمی‌ماند.
   ⚠️ داخلِ کامنتِ CSS هرگز نشانه‌ی پایانِ کامنت را ننویس — کامنت همان‌جا بسته
   می‌شود و پارسر بلاکِ بعدی را می‌بلعد (همین اشتباه یک‌بار کلِ لایه‌ی primitive
   را بی‌اثر کرد).

   لایه‌بندی (طبق نوت ۲۳ بخش ۳.۲–۳.۶):
     ۱) primitive  — رنگ خام، هیچ معنایی ندارد
     ۲) semantic   — نقشِ رنگ (light + prefers-color-scheme: dark)
     ۳) component  — --btn-* / --card-* / --section-* / --nav-*
     ۴) legacy map — نگاشتِ --ab-* قدیمی به semantic تا /pricing و /apps و
                     لندینگ‌ها با تغییرِ هویت نشکنند
   --------------------------------------------------------------------------- */
/*rtl:begin:ignore*/

/* ═══════════════════════ ۱) PRIMITIVE ═══════════════════════ */
:root {
  /* Aurora — cyan */
  --c-cyan-200: #a5f0ff;
  --c-cyan-300: #6ee7ff;
  --c-cyan-400: #38d2ec;
  --c-cyan-500: #12b5cf;
  --c-cyan-700: #0e7490;

  /* Aurora — violet */
  --c-violet-300: #c4b5fd;
  --c-violet-400: #a78bfa;
  --c-violet-500: #8b5cf6;
  --c-violet-600: #7c3aed;
  --c-violet-700: #6d28d9;
  --c-violet-800: #5b21b6;

  /* Aurora — ember (لهجه‌ی گرم، فقط ریز) */
  --c-ember-300: #ffd7a3;
  --c-ember-400: #fbbf6b;
  --c-ember-500: #f59e42;

  /* Ink / Neutral — گرمِ کمی بنفش‌مایل تا با اورورا هم‌خانواده بماند */
  --c-ink-950: #0d0b14;
  --c-ink-900: #141222;
  --c-ink-800: #1e1b2e;
  --c-ink-700: #2a2740;
  --c-slate-600: #4a4a5e;
  --c-slate-500: #5b5b70;
  --c-slate-400: #8b8b9e;
  --c-slate-300: #b9b6cc;
  --c-mist-100: #f5f3fb;
  --c-mist-200: #ece9f6;
  --c-mist-300: #ddd8ee;
  --c-white: #ffffff;

  /* state (semantic ثابت — در هر دو حالت یکی) */
  --c-success-500: #12a67a;
  --c-warning-500: #d97706;
  --c-danger-500: #dc2626;
}

/* ═══════════════════════ ۲) SEMANTIC — LIGHT ═══════════════════════
   نسبت‌های کنتراست در نوت ۲۳ بخش ۳.۲ سنجیده شده‌اند (همه AA یا بالاتر). */
:root {
  --color-bg: var(--c-white);
  --color-bg-tint: #f7f5fd;
  --color-surface: var(--c-white);
  --color-surface-2: #faf8ff;
  --color-surface-sunken: var(--c-mist-100);

  --color-text: var(--c-ink-900);          /* 16.1:1 روی bg — AAA */
  --color-text-muted: var(--c-slate-600);  /*  8.3:1 — AAA        */
  --color-text-subtle: var(--c-slate-500); /*  6.5:1 — AA+        */
  --color-text-on-brand: var(--c-white);   /*  6.9:1 روی brand    */

  --color-brand: var(--c-violet-700);      /* 6.9:1 روی سفید — متن/لینک */
  --color-brand-hover: var(--c-violet-800);
  --color-brand-soft: #f3edff;             /* پس‌زمینه‌ی خیلی روشنِ برند */
  --color-accent: var(--c-cyan-700);       /* 5.2:1 روی سفید */
  --color-accent-soft: #e6f7fb;
  --color-ember: #b45309;                  /* ember خواناشده برای متن روی سفید */

  --color-border: #e6e2f2;
  --color-border-strong: var(--c-mist-300);
  --color-focus: var(--c-violet-600);

  --color-success: var(--c-success-500);
  --color-warning: var(--c-warning-500);
  --color-danger: var(--c-danger-500);

  /* سطوحِ همیشه-تیره (هیرو/CTA/نوارِ سازمانی) — در هر دو حالت ثابت‌اند */
  --color-ondark-bg: var(--c-ink-950);
  --color-ondark-bg-2: var(--c-ink-900);
  --color-ondark-text: #f3f1fb;            /* 17:1   — AAA */
  --color-ondark-muted: var(--c-slate-300);/*  9.1:1 — AAA */
  --color-ondark-brand: var(--c-violet-300);
  --color-ondark-accent: var(--c-cyan-300);
  --color-ondark-surface: rgba(255, 255, 255, .045);
  --color-ondark-border: rgba(255, 255, 255, .09);
}

/* ═══════════════════════ ۲ب) SEMANTIC — DARK ═══════════════════════
   فقط توکن‌های semantic سواپ می‌شوند؛ هیچ قاعده‌ی چیدمانی این‌جا نیست. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--c-ink-950);
    --color-bg-tint: var(--c-ink-900);
    --color-surface: #17142a;
    --color-surface-2: #1c1930;
    --color-surface-sunken: #100e1c;

    --color-text: #f3f1fb;
    --color-text-muted: var(--c-slate-300);
    --color-text-subtle: #a09db8;
    --color-text-on-brand: #120e22;

    --color-brand: var(--c-violet-300);     /* 9.8:1 روی زغالی */
    --color-brand-hover: #d6ccff;
    --color-brand-soft: rgba(139, 92, 246, .16);
    --color-accent: var(--c-cyan-300);      /* 11:1 */
    --color-accent-soft: rgba(56, 210, 236, .14);
    --color-ember: var(--c-ember-400);

    --color-border: rgba(255, 255, 255, .10);
    --color-border-strong: rgba(255, 255, 255, .18);
    --color-focus: var(--c-violet-400);

    --color-success: #35d6a4;
    --color-warning: #f2b53f;
    --color-danger: #f87171;
  }
}

/* ═══════════════════════ ۳) مقیاس‌ها ═══════════════════════ */
:root {
  /* فاصله — مقیاس ۴px */
  --space-1: .25rem;   /*  4 */
  --space-2: .5rem;    /*  8 */
  --space-3: .75rem;   /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* تایپ — مقیاس ماژولار ۱.۲۵ (major third)، پایه ۱۶px */
  --fs-100: .75rem;
  --fs-200: .875rem;
  --fs-300: 1rem;
  --fs-400: 1.25rem;
  --fs-500: 1.563rem;
  --fs-600: 1.953rem;
  --fs-700: clamp(2.2rem, 4.6vw, 3.4rem);
  --fs-800: clamp(2.6rem, 6vw, 3.8rem);

  --lh-tight: 1.25;
  --lh-heading: 1.4;
  --lh-body: 1.8;      /* فارسی نفس بیشتری می‌خواهد */
  --lh-loose: 1.9;

  --fw-normal: 400;
  --fw-bold: 700;
  --tracking-tight: -.01em;

  /* شعاع */
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 16px;
  --radius-4: 22px;
  --radius-pill: 999px;

  /* سایه — رنگِ ink، نه مشکیِ خام */
  --shadow-1: 0 1px 2px rgba(20, 18, 34, .06), 0 2px 8px -2px rgba(20, 18, 34, .08);
  --shadow-2: 0 2px 4px rgba(20, 18, 34, .05), 0 12px 28px -14px rgba(20, 18, 34, .20);
  --shadow-3: 0 4px 8px rgba(20, 18, 34, .05), 0 28px 60px -20px rgba(20, 18, 34, .26);
  --glow-brand: 0 0 0 1px rgba(124, 58, 237, .25), 0 18px 40px -18px rgba(124, 58, 237, .45);

  /* حرکت */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 400ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);

  /* z-index — یک نردبانِ واحد، پایانِ عددهای جادویی */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 50;
  --z-dropdown: 60;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1040;

  /* چیدمان */
  --container: 1140px;
  --container-wide: 1240px;
  --section-pad-block: clamp(3.5rem, 8vw, 6rem);
  --section-pad-block-sm: clamp(2.5rem, 5vw, 3.5rem);
  --card-min: clamp(15rem, 30vw, 17.5rem);

  /* گرادیان‌های مجاز — فقط لبه/متن/بلاب، هرگز پرکننده‌ی سطحِ بزرگ */
  --grad-aurora-line: linear-gradient(90deg, #38d2ec, #8b5cf6 55%, #f59e42);
  --grad-aurora-text: linear-gradient(100deg, #7c3aed 0%, #12b5cf 50%, #7c3aed 100%);
  --grad-aurora-text-dark: linear-gradient(100deg, #6ee7ff 0%, #c4b5fd 55%, #fbbf6b 100%);
  --grad-cta: linear-gradient(135deg, #7c3aed, #12b5cf);
  --grad-cta-hover: linear-gradient(135deg, #6d28d9, #0e9fb8);
  --grad-hero-dark: radial-gradient(120% 90% at 15% 0%, #1b1633 0%, #0d0b14 60%);

  /* شیشه — دستور واحد */
  --glass-bg: color-mix(in srgb, var(--color-surface) 72%, transparent);
  --glass-border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  --glass-blur: blur(10px) saturate(1.4);
  --glass-bg-dark: rgba(255, 255, 255, .06);
  --glass-border-dark: 1px solid rgba(255, 255, 255, .12);
  /* grain ۲٪ برای جلوگیری از banding روی گرادیان‌های بزرگ */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ═══════════════════════ ۴) COMPONENT ═══════════════════════ */
:root {
  /* دکمه */
  --btn-radius: var(--radius-2);
  --btn-font: var(--fw-bold);
  --btn-pad-sm: .45rem .9rem;
  --btn-pad-md: .7rem 1.35rem;
  --btn-pad-lg: .95rem 1.9rem;
  --btn-fs-sm: var(--fs-200);
  --btn-fs-md: var(--fs-300);
  --btn-fs-lg: 1.06rem;
  --btn-primary-bg: var(--grad-cta);
  --btn-primary-fg: var(--c-white);
  --btn-primary-shadow: 0 10px 24px -12px rgba(124, 58, 237, .55);
  --btn-min-target: 44px;

  /* کارت */
  --card-bg: var(--color-surface);
  --card-border: 1px solid var(--color-border);
  --card-radius: var(--radius-3);
  --card-pad: clamp(1.1rem, 2.4vw, 1.6rem);
  --card-shadow: var(--shadow-1);
  --card-shadow-hover: var(--shadow-2);

  /* سکشن */
  --section-bg: var(--color-bg);
  --section-bg-tint: var(--color-bg-tint);
  --section-fg: var(--color-text);

  /* ناوبری */
  --nav-h: 64px;
  --nav-bg: color-mix(in srgb, var(--color-bg) 92%, transparent);
  --nav-border: 1px solid var(--color-border);
  --nav-fg: var(--color-text);

  /* فرم */
  --field-radius: var(--radius-2);
  --field-border: 1px solid var(--color-border-strong);
  --field-bg: var(--color-surface);

  /* focus — خط‌مشیِ واحدِ سراسری */
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 2px;
}

/* ═══════════════════════ ۵) LEGACY MAP ═══════════════════════
   site.css و همه‌ی صفحه‌های دیگر (/pricing, /apps, لندینگ‌ها) هنوز --ab-*
   می‌خوانند. با این نگاشت، هویتِ اورورا یک‌جا اعمال می‌شود و هیچ صفحه‌ای
   نمی‌شکند. مقادیرِ خام در site.css:root حذف شده‌اند تا فقط یک منبعِ حقیقت
   بماند. */
:root {
  --ab-primary: var(--color-brand);
  --ab-primary-dark: var(--color-brand-hover);
  --ab-accent: var(--color-accent);
  --ab-ink: var(--color-text);
  --ab-muted: var(--color-text-muted);
  --ab-bg: var(--color-bg);
  --ab-bg-alt: var(--color-bg-tint);
  --ab-border: var(--color-border);
  --ab-radius: var(--radius-3);
  --ab-shadow-sm: var(--shadow-1);
  --ab-shadow-md: var(--shadow-2);
  --ab-shadow-lg: var(--shadow-3);
}

/*rtl:end:ignore*/