/* ════════════════════════════════════════════════════════════════════════════
   MEDICALAI — Platform Design Tokens (shared across landing, app, admin)
   Clinical H&E palette (hematoxylin violet + eosin rose) + live teal for AI.
   Light-default public site; dark hero + dark app shell.
   ════════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Brand accents (Sina theme: soft teal + amber, low-saturation medical) ── */
  --brand:    oklch(0.70 0.10 192);   /* soft teal — primary */
  --brand-2:  oklch(0.66 0.09 200);   /* teal-cyan */
  --brand-3:  oklch(0.62 0.09 210);   /* deep cyan */
  --brand-grad: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  --violet:    oklch(0.70 0.10 192);   /* alias for shared components → teal */
  --violet-2:  oklch(0.64 0.09 200);
  --violet-3:  oklch(0.58 0.08 205);
  --rose:      oklch(0.76 0.10 72);     /* amber — warm secondary accent */
  --teal:      oklch(0.78 0.10 195);    /* live / web-search */
  --teal-2:    oklch(0.72 0.10 196);
  --amber:     oklch(0.76 0.10 72);
  --gold:      oklch(0.80 0.10 80);

  /* ── Paper (formal report document) ── */
  --paper:        #f7f4ec;
  --paper-2:      #efeadd;
  --paper-line:   #ddd5c4;
  --paper-ink:    #20242b;
  --paper-mut:    #6f6a5d;
  --paper-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 40px rgba(0,0,0,.45);

  /* ── Light surfaces (public site default) ── */
  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --surface-2: #f1f3f7;
  --surface-3: #e9ecf2;
  --line:      #e3e7ee;
  --line-2:    #d2d8e3;
  --ink:       #131722;
  --ink-2:     #3d4658;
  --ink-3:     #6b7384;
  --ink-4:     #9aa2b1;

  /* ── Dark surfaces (hero, app, admin) — neutral slate-teal ── */
  --d-bg:      #080f12;
  --d-bg-2:    #0c1519;
  --d-surface: #111d21;
  --d-surface-2:#19282d;
  --d-line:    #21333a;
  --d-line-2:  #2e444c;
  --d-ink:     #eef3f3;
  --d-ink-1:   #d7e0e1;
  --d-ink-2:   #aebbbd;
  --d-ink-3:   #6f8084;
  --ink-hi:    #fff;   /* high-contrast text on surfaces — flips dark in day theme */

  /* ── Status ── */
  --ok:    oklch(0.70 0.14 155);
  --warn:  oklch(0.78 0.13 80);
  --danger:oklch(0.62 0.19 25);
  --ok-s:   color-mix(in oklch, var(--ok) 14%, var(--surface));
  --warn-s: color-mix(in oklch, var(--warn) 16%, var(--surface));

  /* ── Per-specialty accents (oklch hue wheel) ── */
  --sp-patho:   oklch(0.70 0.10 192);   /* پاتولوژی — teal (flagship) */
  --sp-vet:     oklch(0.64 0.14 155);   /* دامپزشکی — green */
  --sp-pharma:  oklch(0.66 0.15 25);    /* داروسازی — coral */
  --sp-psych:   oklch(0.62 0.13 305);   /* روان‌پزشکی — purple-pink */
  --sp-internal:oklch(0.62 0.14 245);   /* داخلی — blue */
  --sp-nursing: oklch(0.68 0.13 190);   /* پرستاری — teal */
  --sp-radio:   oklch(0.60 0.13 265);   /* رادیولوژی — indigo */
  --sp-lab:     oklch(0.66 0.14 130);   /* آزمایشگاه — lime-green */
  --sp-dental:  oklch(0.68 0.12 215);   /* دندان — sky */
  --sp-nutri:   oklch(0.70 0.14 95);    /* تغذیه — yellow-green */
  --sp-cardio:  oklch(0.60 0.18 20);    /* قلب — red */
  --sp-derma:   oklch(0.70 0.13 50);    /* پوست — amber */
  --sp-biomed:  oklch(0.64 0.15 270);   /* مهندسی پزشکی — blue-violet */

  /* ── Type ── */
  --ff:      'Vazirmatn', 'Manrope', system-ui, sans-serif;
  --ff-en:   'Manrope', 'Vazirmatn', system-ui, sans-serif;
  --ff-serif:'Source Serif 4', Georgia, serif;
  --ff-mono: 'IBM Plex Mono', monospace;

  /* ── Radius / shadow ── */
  --r-xl: 28px;
  --r-lg: 20px;
  --r:    14px;
  --r-sm: 10px;
  --r-xs: 7px;
  --sh-sm:  0 1px 2px rgba(19,23,34,.06), 0 2px 6px rgba(19,23,34,.05);
  --sh:     0 4px 14px rgba(19,23,34,.08), 0 12px 32px rgba(19,23,34,.06);
  --sh-lg:  0 18px 50px rgba(19,23,34,.14);
  --sh-violet: 0 10px 34px color-mix(in oklch, var(--brand-2) 36%, transparent);

  --container: 1200px;
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--ff); background: var(--bg); color: var(--ink); line-height: 1.6; direction: rtl; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[dir="ltr"], body.en { direction: ltr; }
body.en { font-family: var(--ff-en); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: color-mix(in oklch, var(--violet) 25%, transparent); }
.mono { font-family: var(--ff-mono); font-feature-settings: "tnum"; }
.serif { font-family: var(--ff-serif); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .container { padding: 0 18px; } }

/* shared buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; font-size: .94rem;
  padding: 13px 24px; border-radius: 999px; transition: .18s; white-space: nowrap; line-height: 1; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: linear-gradient(135deg, var(--violet), var(--violet-2)); color: #fff; box-shadow: var(--sh-violet); }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--sh-sm); }
.btn-ghost:hover { border-color: var(--ink-4); transform: translateY(-1px); }
.btn-dark { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); }
.btn-dark:hover { background: rgba(255,255,255,.16); }
.btn-lg { padding: 16px 30px; font-size: 1rem; }

/* section heading */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--violet); background: color-mix(in oklch, var(--violet) 10%, transparent); padding: 6px 14px; border-radius: 999px; }
.eyebrow svg { width: 15px; height: 15px; }
.h-sec { font-size: clamp(1.8rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.sub-sec { font-size: clamp(1rem, 2vw, 1.18rem); color: var(--ink-3); max-width: 620px; line-height: 1.7; }

.reveal { opacity: 0; transform: translateY(24px); transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ── ALL-DARK landing (Sina): remap light tokens to dark, premium, uniform with app ── */
body {
  --bg: #080f12; --surface: #111d21; --surface-2: #0c1519; --surface-3: #19282d;
  --line: #21333a; --line-2: #2e444c;
  --ink: #eef3f3; --ink-2: #aebbbd; --ink-3: #7c8c90; --ink-4: #5d6e72;
  --sh-sm: 0 1px 2px rgba(0,0,0,.3); --sh: 0 6px 22px rgba(0,0,0,.4); --sh-lg: 0 18px 50px rgba(0,0,0,.55);
  background: #080f12;
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ══ DAY THEME — auto light palette (applied by time of day) ══
   Overrides only the --d-* neutrals + --ink-hi; brand accents stay the same. */
html[data-theme="day"] {
  --d-bg:       #f3f6f8;
  --d-bg-2:     #ffffff;
  --d-surface:  #ffffff;
  --d-surface-2:#eef2f6;
  --d-line:     #e2e8ee;
  --d-line-2:   #cfd8e1;
  --d-ink:      #16222b;
  --d-ink-1:    #283642;
  --d-ink-2:    #44535f;
  --d-ink-3:    #73828c;
  --ink-hi:     #0e1a20;
}

/* ── Accessibility (BFSG/WCAG): visible keyboard focus everywhere ── */
:focus-visible { outline: 2px solid var(--brand, #19e3c2); outline-offset: 2px; border-radius: 4px; }
/* don't show the ring on mouse/touch (only keyboard) — :focus-visible already handles this,
   but suppress the legacy :focus glow on pointer for inputs that manage their own state */
*:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }