/* =============================================================================
   ESTOM design tokens
   Скопировано 1:1 из 2.design/estom-2.pen через pencil MCP.
   Источник правды — .pen файл. При расхождении этот файл обновляется под него,
   не наоборот.
   ============================================================================= */

:root {
  /* ---------- Brand & primary ---------- */
  --primary:         #2C7BE5;
  --primary-dark:    #1A5BB8;
  --primary-light:   #EBF2FF;
  --accent:          #1A8A72;

  /* ---------- Surfaces ---------- */
  --bg:              #F3F6FA;
  --bg-alt:          #F8FAFC;
  --surface:         #FFFFFF;
  --border:          #E2E8F0;
  --overlay:         #0F172A80;
  --transparent:     #00000000;

  /* ---------- Text ---------- */
  --text-primary:    #0F172A;
  --text-secondary:  #64748B;
  --text-muted:      #94A3B8;
  --text-white:      #FFFFFF;

  /* ---------- Status ---------- */
  --success:         #10B981;
  --success-light:   #ECFDF5;
  --warning:         #F59E0B;
  --warning-light:   #FFFBEB;
  --error:           #EF4444;
  --error-light:     #FEF2F2;
  --info:            #3B82F6;
  --info-light:      #EFF6FF;

  /* ---------- Sidebar ---------- */
  --sidebar-bg:      #0F172A;
  --sidebar-text:    #CBD5E1;
  --sidebar-active:  #2C7BE5;
  --sidebar-width:   220px;

  /* ---------- Topbar ---------- */
  --topbar-height:   52px;

  /* ---------- White alphas (используются поверх тёмных поверхностей) ---------- */
  --white-alpha-5:   #FFFFFF0D;
  --white-alpha-8:   #FFFFFF14;

  /* ---------- Typography ---------- */
  --font-family:     "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-h1:         28px;
  --font-h2:         22px;
  --font-h3:         18px;
  --font-body:       14px;
  --font-small:      13px;
  --font-caption:    12px;
  --font-tiny:       11px;

  /* ---------- Spacing (gap / padding) ---------- */
  --gap-xs:          4px;
  --gap-sm:          8px;
  --gap-md:          16px;
  --gap-lg:          24px;
  --gap-xl:          32px;
  --gap-2xl:         48px;
  --gap-3xl:         64px;

  /* ---------- Radius ---------- */
  --radius-xs:       4px;
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-pill:     999px;

  /* ---------- Form control heights ---------- */
  --input-height:    40px;

  /* ---------- Shadows ---------- */
  --shadow-color:    #0F172A0D;
  --shadow-sm:       0 1px 2px var(--shadow-color);
  --shadow-md:       0 1px 3px var(--shadow-color);
  --shadow-lg:       0 4px 12px var(--shadow-color);
}