/* ============================================================
   مرکز حرکات اصلاحی دکتر خوش‌باطن — Design tokens
   Two themes. Every colour is defined on :root first, then
   overridden inside [data-theme="light"]. Nothing gets its
   only definition inside a theme block.
   ============================================================ */

:root{
  /* ---- brand: sampled from the clinic logo ---- */
  --brand-900:#04352E;
  --brand-800:#06483E;
  --brand-700:#0A5C50;
  --brand-600:#0F7A6C;   /* the logo teal */
  --brand-500:#159183;
  --brand-400:#28AC9B;
  --brand-300:#57C6B6;
  --brand-200:#96DED2;
  --brand-100:#CDF0EA;

  /* ---- measurement scale: unloaded → overloaded ----
     Used by every pressure map, severity bar and force vector.
     Colour here always encodes a value, never decoration.      */
  --l0:#12415C; --l1:#1B7F9E; --l2:#2FA98C;
  --l3:#D8B84E; --l4:#DE7A42; --l5:#C63C4E;

  /* ---- semantic status ---- */
  --ok:#2FA98C;
  --warn:#D8B84E;
  --bad:#D46876;
  --info:#1B7F9E;

  /* ---- dark surfaces (default theme) ---- */
  --bg:#05090C;
  --bg-2:#080E13;
  --surface:#0B131A;
  --surface-2:#101B23;
  --surface-3:#16242E;
  --line:rgba(211,228,224,.10);
  --line-2:rgba(211,228,224,.20);
  --line-3:rgba(211,228,224,.32);

  --fg:#E8EFEC;
  --fg-2:#A9BDB8;
  --fg-3:#7B928D;

  --brand:var(--brand-400);
  --brand-soft:rgba(40,172,155,.14);
  --brand-line:rgba(40,172,155,.40);
  --on-brand:#04211C;

  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 8px 30px rgba(0,0,0,.45);
  --shadow-3:0 24px 70px rgba(0,0,0,.55);

  /* the 3D viewing chamber keeps its own dark palette in both themes:
     off-white bone has to read against something. */
  --stage-1:#070E13;
  --stage-2:#0C1A22;
  --stage-line:rgba(211,228,224,.16);
  --stage-fg:#8FA8A4;

  --grain-opacity:.15;
  --glow:radial-gradient(60% 60% at 50% 40%,rgba(40,172,155,.18),transparent 70%);

  /* ---- type ---- */
  --font-display:"Estedad","Vazirmatn",system-ui,sans-serif;
  --font-body:"Vazirmatn",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"PlexMono","Vazirmatn",ui-monospace,SFMono-Regular,monospace;

  --fs-xs:11.5px;
  --fs-sm:13px;
  --fs-base:15px;
  --fs-md:16.5px;
  --fs-lg:clamp(16px,1.3vw,19px);
  --fs-h4:clamp(15px,1.2vw,17px);
  --fs-h3:clamp(19px,1.9vw,25px);
  --fs-h2:clamp(26px,3.6vw,46px);
  --fs-h1:clamp(32px,5.4vw,68px);

  /* ---- metrics ---- */
  --hud:60px;
  --gut:clamp(18px,4vw,64px);
  --maxw:1440px;
  --r-sm:6px;
  --r:10px;
  --r-lg:16px;
  --r-pill:999px;

  --t-fast:180ms cubic-bezier(.22,1,.36,1);
  --t-med:420ms cubic-bezier(.22,1,.36,1);
  --t-slow:900ms cubic-bezier(.22,1,.36,1);

  color-scheme:dark;
}

/* ============================================================
   LIGHT THEME — clinical, matches the logo on white
   ============================================================ */
[data-theme="light"]{
  --bg:#F5F8F7;
  --bg-2:#EDF3F1;
  --surface:#FFFFFF;
  --surface-2:#F3F8F6;
  --surface-3:#E6F0ED;
  --line:rgba(6,72,62,.12);
  --line-2:rgba(6,72,62,.22);
  --line-3:rgba(6,72,62,.36);

  --fg:#082A25;
  --fg-2:#3D5A54;
  --fg-3:#566D68;

  --brand:var(--brand-600);
  --brand-soft:rgba(15,122,108,.10);
  --brand-line:rgba(15,122,108,.34);
  --on-brand:#FFFFFF;

  --l0:#2C6F91; --l1:#1B7F9E; --l2:#12896F;
  --l3:#C9A22E; --l4:#D96A2C; --l5:#B92B3E;

  --ok:#117F67;
  --warn:#8D6D12;
  --bad:#B92B3E;
  --info:#1B7F9E;

  --shadow-1:0 1px 2px rgba(8,42,37,.07);
  --shadow-2:0 8px 30px rgba(8,42,37,.09);
  --shadow-3:0 24px 70px rgba(8,42,37,.13);

  --grain-opacity:.05;
  --glow:radial-gradient(60% 60% at 50% 40%,rgba(15,122,108,.10),transparent 70%);

  color-scheme:light;
}