/* KADR design tokens — the single source of colour, type, spacing, radius and motion values.
   Every page stylesheet uses these variables; nothing else in the project defines a colour. */
:root{
  /* surfaces (warm off-white page, white panels) */
  --bg:#faf9f6;--bg2:#ffffff;--bg3:#f5f4f0;--bg4:#edebe6;--bg5:#e3e0d9;
  /* text */
  --tx:#15151b;--tx2:#565662;--tx3:#6d6d79;--tx-inv:#ffffff;
  /* lines */
  --bd:#ebe9e4;--bd2:#d9d6ce;
  /* accent: restrained blue→violet, used only for the primary action and selected states */
  --acc:#3555f0;--acc2:#7a3df0;--acc-ink:#2b45c9;--acc-soft:#eef1ff;--acc-bd:#c7d0ff;
  --grad:linear-gradient(135deg,var(--acc),var(--acc2));
  /* status colours (text colours reach ≥4.5:1 on their soft background) */
  --ok:#0d7044;--ok-soft:#e7f5ed;--warn:#8f5200;--warn-soft:#fff3dc;--bad:#b3202a;--bad-soft:#fdeced;
  /* the preview stays dark so video is judged on a neutral surface */
  --video:#0d0d12;--video-tx:#d7d7e0;
  --overlay:rgba(21,21,27,.46);
  /* interface scale: 1 on phones and ordinary laptops, larger on big/high-res screens, slightly smaller on very small phones.
     static/js/fluid.js refines it continuously (and applies the person's "Interface size" choice); the steps below are the no-script baseline. */
  --fz:1;
  /* spacing, radius, controls (all follow --fz) */
  --s1:calc(4px*var(--fz));--s2:calc(8px*var(--fz));--s3:calc(12px*var(--fz));--s4:calc(16px*var(--fz));--s5:calc(24px*var(--fz));--s6:calc(32px*var(--fz));--s7:calc(48px*var(--fz));
  --r1:calc(6px*var(--fz));--r2:calc(10px*var(--fz));--r3:calc(14px*var(--fz));--r4:calc(20px*var(--fz));--ctl:calc(40px*var(--fz));--ctl-sm:calc(32px*var(--fz));
  /* notches, rounded corners and the mobile browser bars */
  --sa-t:env(safe-area-inset-top,0px);--sa-r:env(safe-area-inset-right,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px);
  /* elevation */
  --sh1:0 1px 2px rgba(21,21,27,.05);--sh2:0 10px 30px -12px rgba(21,21,27,.18);
  /* motion */
  --d1:100ms;--d2:160ms;--d3:220ms;--ease:cubic-bezier(.2,.7,.2,1);--ease-in:cubic-bezier(.4,0,1,1);--t:var(--d2);
  /* layers and layout */
  --side-w:calc(232px*var(--fz));--z-side:20;--z-bar:30;--z-menu:45;--z-dlg:40;--z-toast:60;
  --font:Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,"Noto Sans Arabic","Noto Naskh Arabic",Tahoma,Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media(pointer:coarse){:root{--ctl:calc(44px*var(--fz));--ctl-sm:calc(40px*var(--fz))}}
@media(max-width:340px){:root{--fz:.94}}
@media(min-width:1536px){:root{--fz:1.05}}@media(min-width:1920px){:root{--fz:1.14}}@media(min-width:2560px){:root{--fz:1.28}}@media(min-width:3200px){:root{--fz:1.45}}@media(min-width:3840px){:root{--fz:1.56}}