/* ============================================
 * Airtask MN Admin — Design Tokens
 * Reuse mobile token-уудыг + desktop-д тохирсон нэмэлт
 * ============================================ */

:root {
  /* === Mobile-аас өвлөн авсан === */
  --color-bg:           #FFFFFF;
  --color-page:         #F4F6FB;   /* Admin page background (slightly bluer) */
  --color-surface:      #F6F7FB;
  --color-surface-2:    #EDEFF7;
  --color-border:       #E0E3EF;
  --color-border-strong:#C9D2E6;
  --color-overlay:      rgba(15, 24, 73, 0.4);

  --color-text:         #0F1849;
  --color-text-muted:   #5C6082;
  --color-text-faint:   #9CA0B5;
  --color-text-on-cta:  #FFFFFF;
  --color-text-link:    #1A6CFA;

  --color-primary:        #1A6CFA;
  --color-primary-hover:  #1456D4;
  --color-primary-press:  #0F44B8;

  --color-navy:         #0F1849;
  --color-navy-2:       #1B2671;   /* Sidebar hover */
  --color-navy-3:       #2A3680;

  --color-success:      #2E7B4A;
  --color-success-bg:   #E5F8EC;
  --color-warning:      #B8650B;
  --color-warning-bg:   #FFF8E5;
  --color-danger:       #E54848;
  --color-danger-bg:    #FFE5E5;
  --color-info:         #1A6CFA;
  --color-info-bg:      #EAF1FF;

  /* Status row colors (admin-specific) */
  --color-status-active:    #2E7B4A;
  --color-status-pending:   #B8650B;
  --color-status-blocked:   #E54848;
  --color-status-archived:  #5C6082;

  /* Tier */
  --color-tier-bronze:   #B07432;
  --color-tier-silver:   #8A8FA6;
  --color-tier-gold:     #D4A82C;
  --color-tier-platinum: #5B6DB8;

  /* === Typography === */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;

  --text-display-1: 32px;
  --text-h1:        24px;
  --text-h2:        20px;
  --text-h3:        16px;
  --text-body:      14px;
  --text-small:     13px;
  --text-caption:   12px;
  --text-overline:  11px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* === Spacing (4px grid) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;

  /* === Radius === */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* === Elevation === */
  --shadow-sm: 0 1px 2px rgba(15, 24, 73, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 24, 73, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 24, 73, 0.12);
  --shadow-focus: 0 0 0 3px rgba(26, 108, 250, 0.2);

  /* === Layout === */
  --sidebar-w: 256px;
  --sidebar-collapsed-w: 64px;
  --topbar-h:  64px;
  --content-max-w: 1280px;

  /* === Motion === */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-normal: 220ms;
}