@charset "UTF-8";

/*
 * لایهٔ توکن — «ریل رسید».
 * منبع: docs/design-system.md بند ۲. این فایل واژگان است، نه جمله‌ها:
 * فقط @font-face و custom property. هیچ استایل کامپوننتی اینجا نوشته نمی‌شود.
 *
 * هیچ هگز خامی در هیچ استایل‌شیت دیگری نوشته نمی‌شود — همه از همین توکن‌ها می‌آید.
 *
 * قبل از rtl.css بار می‌شود تا هم متغیرها در دسترس آن باشند و هم خانوادهٔ
 * "Estedad" تعریف شده باشد: rtl.css در ۹ جا font-family: "estedad" می‌گذارد و
 * تا امروز هیچ @font-face ای برای آن وجود نداشت (بند ۳ سیستم دیزاین).
 */

/* ---------- استعداد: بدنهٔ همهٔ متن‌ها، برش fa-num ---------- */

@font-face {
    font-family: "Estedad";
    src: url("../vendor/fonts/farsi-fonts-fa-num/estedad-300.woff2") format("woff2"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-300.woff") format("woff"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-300.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Estedad";
    src: url("../vendor/fonts/farsi-fonts-fa-num/estedad-400.woff2") format("woff2"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-400.woff") format("woff"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-400.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Estedad";
    src: url("../vendor/fonts/farsi-fonts-fa-num/estedad-500.woff2") format("woff2"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-500.woff") format("woff"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-500.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Estedad";
    src: url("../vendor/fonts/farsi-fonts-fa-num/estedad-700.woff2") format("woff2"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-700.woff") format("woff"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-700.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- لاله‌زار: فقط و فقط عدد رسید. تنها وزن موجود ۷۰۰ است ---------- */

@font-face {
    font-family: "Lalezar";
    src: url("../vendor/fonts/farsi-fonts-fa-num/lalezar-700.woff2") format("woff2"),
         url("../vendor/fonts/farsi-fonts-fa-num/lalezar-700.woff") format("woff"),
         url("../vendor/fonts/farsi-fonts-fa-num/lalezar-700.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- توکن‌ها ---------- */

:root {
    /* زمینهٔ عملیاتی — تیره */
    --ink-900: #0B141C;   /* زمینهٔ صفحهٔ کیوسک */
    --ink-800: #101C28;   /* زمینهٔ کارت روی تیره */
    --ink-700: #17293A;   /* سطح برجسته، و رنگ متن روی روشن */
    --ink-600: #22394F;   /* خط مو روی تیره */

    /* برند — دست‌نخورده می‌ماند */
    --navy:    #134D78;
    --navy-d:  #0D3350;

    /* برنجی: کرما و تجهیزات برنجی کافه. لهجهٔ اصلی. */
    --brass:   #D3922F;
    --brass-l: #E8B45F;
    --brass-d: #A56E1E;

    /* وضعیت */
    --jade:    #2E9E6B;   /* آماده / موفق */
    --ember:   #D2452F;   /* دیرکرد / خطر / لغو */
    --amber:   #C8873F;   /* یادداشت مشتری */

    /* اِمبرِ روشن — «قرمز روی جوهری، وقتی متن است».
       اندازه‌گیری‌شده: --ember روی --ink-800 فقط ۳٫۸۰:۱ می‌دهد و برای متن ریز به AA
       (۴٫۵:۱) نمی‌رسد؛ این ۵٫۴۳:۱ می‌دهد. همان کاری که بند ۵ سیستم دیزاین برای
       --brass-l تجویز کرده، اینجا برای اِمبر. برای زمینه‌های تیره است، نه روشن. */
    --ember-l: #E86A54;

    /* زمینهٔ اداری — روشن */
    --paper:   #F1F3F6;   /* زمینهٔ صفحهٔ پنل */
    --surface: #FFFFFF;   /* کارت روی روشن */
    --line:    #E3E8EF;   /* خط مو روی روشن */
    --muted:   #6B7C93;   /* متن ثانویه روی روشن */
    --muted-d: #8FA3BC;   /* متن ثانویه روی تیره */

    /* متن ثانویهٔ خواناتر روی روشن.
       اندازه‌گیری‌شده: --muted روی --paper فقط ۳٫۸۳:۱ و روی --surface ‏۴٫۲۶:۱ می‌دهد —
       هر دو زیر AA (۴٫۵:۱) برای متن ریز، و متن ثانویه همیشه ریز است. این ۴٫۸۹:۱ روی
       کاغذ و ۵٫۴۴:۱ روی سفید می‌دهد. همان کاری که پاس B با --ember-l برای زمینهٔ جوهری
       کرد، اینجا برای زمینهٔ اداری.
       --muted دست‌نخورده می‌ماند: روی متن درشت (≥۱۹px/۷۰۰، کف AA بزرگ ۳:۱) هنوز درست
       است و سیستم دیزاین آن را تعریف کرده. */
    --muted-s: #5A6B82;

    /* تایپ */
    --font-display: "Lalezar";  /* lalezar-700 — تنها وزن موجود */
    --font-body:    "Estedad";  /* estedad-300/400/500/700 */

    /* فاصله — مقیاس ۴px. نام هر توکن همان مقدارش است تا نتواند دروغ بگوید. */
    --sp-4:  4px;
    --sp-8:  8px;
    --sp-12: 12px;
    --sp-16: 16px;
    --sp-24: 24px;
    --sp-32: 32px;
    --sp-48: 48px;

    /* شعاع */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 18px;

    /* سایه — فقط دو تا. روی تیره سایه کار نمی‌کند؛ آنجا از --ink-700 به‌عنوان لبه
       استفاده می‌شود. هر دو از --ink-900 مشتق شده‌اند، نه از یک سیاه دلبخواه. */
    --shadow-card: 0 1px 2px rgba(11, 20, 28, .06), 0 2px 8px rgba(11, 20, 28, .06);
    --shadow-lift: 0 4px 12px rgba(11, 20, 28, .10), 0 12px 28px rgba(11, 20, 28, .10);
}

/* ---------- کف فوکوس ----------
   تا امروز هیچ استایل فوکوسی در کل اپ وجود نداشت و کاربر کیبورد نمی‌دید کجاست
   (بند ۵ سیستم دیزاین). :focus-visible است نه :focus، تا کلیک موشی حلقه نگیرد.

   ⚠️ پاس C رنگ پیش‌فرض را از --brass به --brass-d برد. اندازه‌گیری‌شده: --brass روی
   --paper ‏۲٫۳۸:۱ و روی --surface ‏۲٫۶۵:۱ می‌دهد — زیر کف ۳:۱ که WCAG برای اجزای
   غیرمتنی (و حلقهٔ فوکوس یکی از آن‌هاست) می‌خواهد. --brass-d ‏۳٫۹۰ و ۴٫۳۳ می‌دهد.
   زمینهٔ روشن پیش‌فرض همهٔ صفحات اداری و کارت صفحهٔ ورود است؛ زمینهٔ جوهریِ کیوسک
   اُورراید خودش را دارد و همچنان --brass-l است (۹٫۱۳:۱ روی --ink-800). */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brass-d);
    outline-offset: 2px;
}

/* روی زمینهٔ جوهریِ صفحات کیوسک، برنجیِ روشن‌تر لازم است تا حلقه دیده شود */
.kiosk-body button:focus-visible,
.kiosk-body a:focus-visible,
.kiosk-body input:focus-visible,
.kiosk-body select:focus-visible,
.kiosk-body textarea:focus-visible,
.kiosk-body [tabindex]:focus-visible {
    outline-color: var(--brass-l);
}