/* سپهر — design tokens (UX-D1, UX-D2; 1405/07/30).  Reference: canvas «سپهر — فایل اصلی طراحی UI/UX» › سیستم طراحی.
   Type scale: 8 steps.  Colour: Material 3 roles from the person's theme (body style sets --sp-primary/-soft/-bg/-surface/-line).
   Stylesheets use var(--fs-x, <old px>) / var(--ds-x, <old hex>): without this file every page looks as before. */
:root{
  --fs-label:12px;--fs-caption:13px;--fs-body-sm:14px;--fs-body:16px;
  --fs-title-sm:18px;--fs-title:20px;--fs-headline:24px;--fs-display:30px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --shape-xs:4px;--shape-s:8px;--shape-m:12px;--shape-l:16px;--shape-xl:28px;--shape-full:999px;
  --touch-min:44px
}
body{
  --ds-primary:var(--sp-primary,#212E85);
  --ds-primary-container:var(--sp-primary-soft,#E8EAF6);
  --ds-bg:var(--sp-bg,#F6F7FB);
  --ds-line:var(--sp-line,#E3E5EE);
  --ds-ink:var(--sp-ink,#1C1D22);
  --ds-surface-low:#F4F5F9;--ds-surface:#EDEEF5;--ds-surface-high:#E4E6F0;
  /* the same Material 3 role names the office panel uses (sp_office_m3/tokens.css) */
  --primary:var(--ds-primary);--on-primary:#fff;
  --primary-container:var(--ds-primary-container);--on-primary-container:var(--sp-primary-dark,#17205E);
  --surface:var(--sp-surface,#fff);--surface-container-lowest:#fff;
  --surface-container-low:var(--ds-surface-low);--surface-container:var(--ds-surface);--surface-container-high:var(--ds-surface-high);
  --on-surface:var(--ds-ink);--on-surface-variant:var(--sp-ink-2,#5C5F6B);
  --outline:#777680;--outline-variant:var(--ds-line);
  --success:#196C40;--warning:#8A5100;--error:#BA1A1A
}
@supports (color:color-mix(in srgb,red 50%,white)){
  body{
    --ds-surface-low:color-mix(in srgb,var(--ds-primary) 5%,#fff);
    --ds-surface:color-mix(in srgb,var(--ds-primary) 8%,#fff);
    --ds-surface-high:color-mix(in srgb,var(--ds-primary) 12%,#fff)
  }
}
