/* =============================================================================
   Avanobat — Design Tokens (single source of truth)
   -----------------------------------------------------------------------------
   This is the ONE place where every visual variable lives. Change a value here
   and it updates everywhere across the whole app.

   Loaded first on every page (before login.css / static-pages.css and before
   any page's own styles), so every component and page can reference these
   tokens via var(--token).

   NOTE: the color / radius / shadow values below are the exact values the app
   already used (previously duplicated inside login.css, static-pages.css and
   index.html). They are unchanged on purpose — centralising them must not alter
   the appearance.
   ========================================================================== */

:root {
  /* ---- Brand / text colors ------------------------------------------------ */
  --navy-900: #223437;
  --navy-950: #223437;
  --text-strong: #223437;
  --text-muted: rgba(34, 52, 55, 0.65);
  --text-hint: rgba(34, 52, 55, 0.55);
  --placeholder: rgba(34, 52, 55, 0.55);
  --text-inverse: #FEFDF8; /* near-white text on colored panels */
  --text-gray: #6b7280;    /* neutral gray text (legacy) */
  --overlay: rgba(34, 52, 55, 0.55); /* modal backdrop scrim */
  --cta-tint: rgba(242, 198, 140, 0.18); /* soft amber background tint */

  /* ---- Surfaces / background --------------------------------------------- */
  --bg: #FAF9F7;
  --surface: #FAF9F7;
  --surface-alt: #FAF9F7;

  /* ---- Borders ----------------------------------------------------------- */
  --border: #D9E2DA;
  --border-subtle: #D9E2DA;

  /* ---- Accent / primary (emerald, per the mockups) ----------------------- */
  --primary: #1F6E61;
  --accent: #1F6E61;
  --accent-strong: #1A5F54;
  --accent-soft: rgba(31, 110, 97, 0.12);
  --focus-ring: rgba(31, 110, 97, 0.25);

  /* ---- Mint surfaces (soft sage/mint sections from the mockups) ---------- */
  --mint: #EBF2EF;
  --mint-strong: #DCEAE5;
  --mint-soft: rgba(31, 110, 97, 0.08);

  /* ---- Call to action (amber) -------------------------------------------- */
  --cta: #F4B740;
  --cta-soft: rgba(244, 183, 64, 0.16);

  /* ---- Secondary (sage) -------------------------------------------------- */
  --secondary: #8BB7A5;
  --secondary-soft: rgba(139, 183, 165, 0.25);
  --chip: rgba(139, 183, 165, 0.25);

  /* ---- Status ------------------------------------------------------------ */
  --success: #1F6E61;
  --warning: #F4B740;
  --error: #D92D20;

  /* ---- Radius ------------------------------------------------------------ */
  --radius: 12px;
  --radius-lg: 20px;

  /* ---- Shadows ----------------------------------------------------------- */
  --shadow-sm: 0 8px 24px rgba(34, 52, 55, 0.06);
  --shadow: 0 18px 60px rgba(34, 52, 55, 0.10);
  --shadow-soft: 0 16px 40px rgba(34, 52, 55, 0.08);

  /* ---- Typography -------------------------------------------------------- */
  --font-family: "IRANSansX", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-body: 14px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.4;
  --line-height-base: 1.7;
  --line-height-loose: 1.9;

  /* ---- Spacing scale ----------------------------------------------------- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;

  /* ---- Breakpoints (reference values for @media queries) ----------------- */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;

  /* ---- Aliases for tokens referenced in legacy inline styles ------------- */
  /* (these were referenced via var() but never defined, so the properties
     silently dropped — e.g. input focus rings and CTA backgrounds. Aliasing
     them to the existing brand tokens restores the intended look.) */
  --accent-cta: var(--cta);
  --accent-cta-soft: var(--cta-soft);
  --accent-ring: var(--focus-ring);

  /* ---- Surface layer (FLAT/clean, per the mockups) ----------------------- */
  /* The mockups are flat — white cards, hairline borders, soft subtle shadows,
     NO frosted blur/translucency. These vars (historically "glass-*") are kept
     by name so assets/styles/glass.css consumes them unchanged, but their values
     are now opaque + blur:0 so the whole UI renders clean and flat. */
  --glass-bg: #ffffff;
  --glass-bg-strong: #ffffff;
  --glass-bg-tint: #ffffff;
  --glass-bg-deep: rgba(16, 40, 34, 0.5);        /* modal scrim */
  --glass-border: #E7ECEA;
  --glass-border-soft: #EEF2F0;
  --glass-blur: 0px;
  --glass-blur-strong: 0px;
  --glass-shadow: 0 8px 26px rgba(16, 40, 34, 0.07);
  --glass-shadow-soft: 0 2px 12px rgba(16, 40, 34, 0.05);
  --glass-highlight: 0 0 #0000;                   /* no inset highlight */
  --glass-sheen: transparent;                     /* no shimmer */
  --glass-glow: 0 6px 18px rgba(31, 110, 97, 0.18);
}

/* ======================================================================== */
/*  دارک‌مود — پالتِ زمرّدی/زغالی (با دقت برای کنتراست و آرامشِ چشم)          */
/*  با data-theme="dark" روی <html> فعال می‌شود (toggle در پنل‌ها).          */
/* ======================================================================== */
html[data-theme="dark"] {
  /* متن‌ها (روشن روی پس‌زمینهٔ تیره) */
  --text-strong: #E8F0ED;
  --text-muted: rgba(232, 240, 237, 0.66);
  --text-hint: rgba(232, 240, 237, 0.50);
  --placeholder: rgba(232, 240, 237, 0.42);
  --text-inverse: #0E1513;
  --text-gray: #9AA6A2;
  /* navy به‌عنوان «مرکّبِ» متن در ده‌ها جا استفاده شده؛ در دارک باید روشن شود
     (تنها دو گرادینتِ آواتار از آن استفاده می‌کنند که جداگانه override شده‌اند). */
  --navy-900: #E8F0ED;
  --navy-950: #E8F0ED;
  --overlay: rgba(0, 0, 0, 0.62);
  --cta-tint: rgba(244, 183, 64, 0.16);

  /* پس‌زمینه و سطوح */
  --bg: #0E1513;
  --surface: #141E1B;
  --surface-alt: #18241F;

  /* مرزها (روشنِ نیمه‌شفاف) */
  --border: rgba(255, 255, 255, 0.10);
  --border-subtle: rgba(255, 255, 255, 0.07);

  /* اکسنت زمرّد — پس‌زمینهٔ دکمه همان برند، ولی متن/آیکن/لینک روشن‌تر برای کنتراست */
  --primary: #2FA088;
  --accent: #1F6E61;
  --accent-strong: #5FD0B8;
  --accent-soft: rgba(95, 208, 184, 0.14);
  --focus-ring: rgba(95, 208, 184, 0.30);

  /* مینت/سبزِ ملایمِ سطوح */
  --mint: rgba(95, 208, 184, 0.10);
  --mint-strong: rgba(95, 208, 184, 0.16);
  --mint-soft: rgba(95, 208, 184, 0.08);

  /* امبر (CTA) */
  --cta: #F4B740;
  --cta-soft: rgba(244, 183, 64, 0.16);

  /* ثانویه/چیپ */
  --secondary: #8BB7A5;
  --secondary-soft: rgba(139, 183, 165, 0.18);
  --chip: rgba(139, 183, 165, 0.18);

  /* وضعیت‌ها */
  --success: #4FC2A8;
  --warning: #F4B740;
  --error: #FF6B5E;

  /* سایه‌ها (تیره‌تر) */
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.50);

  /* شیشه‌ای‌ها */
  --glass-bg: #16211D;
  --glass-bg-strong: #1B2722;
  --glass-bg-tint: #16211D;
  --glass-bg-deep: rgba(0, 0, 0, 0.60);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-soft: rgba(255, 255, 255, 0.06);
  --glass-blur: 14px;
  --glass-blur-strong: 22px;
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.50);
  --glass-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.40);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --glass-sheen: transparent;
  --glass-glow: 0 6px 18px rgba(31, 110, 97, 0.30);

  /* باتم‌بارِ شیشه‌ای در دارک */
  --nav-glass-bg: rgba(20, 30, 27, 0.72);
  --nav-glass-border: rgba(255, 255, 255, 0.10);
  --nav-glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* لینک‌ها بدون خط زیر در کل سایت (طبق درخواست) — رنگ/استایل دکمه‌ها حفظ می‌شود */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
.blog-body a, .article a, .tr-admin-html a { color: var(--primary, #295958); font-weight: 600; }

/* ===== کامپوننتِ OTP چندباکسه (ورود + رزرو) ===== */
.otp-boxes { display: flex; gap: 10px; direction: ltr; justify-content: center; flex-wrap: nowrap; }
.otp-box {
  width: 48px; height: 56px; flex: 0 0 auto; text-align: center;
  font-size: 22px; font-weight: 800; letter-spacing: 0;
  border: 1.5px solid var(--border, #D9E2DA); border-radius: 14px;
  background: var(--glass-bg); color: var(--text-strong, #223437);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
  -moz-appearance: textfield;
}
.otp-box::-webkit-outer-spin-button, .otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otp-box:focus { border-color: var(--primary, #295958); box-shadow: 0 0 0 3px rgba(41, 89, 88, 0.15); }
@media (max-width: 420px) { .otp-boxes { gap: 7px; } .otp-box { width: 42px; height: 50px; font-size: 19px; } }

/* لرزشِ هشدار (کد اشتباه / تغییر شماره) — قابل استفاده روی هر عنصر */
@keyframes hmnShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.hmn-shake { animation: hmnShake .45s ease; }
.hmn-shake-field { border-color: #D92D20 !important; box-shadow: 0 0 0 3px rgba(217,45,32,0.15) !important; }