/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — FIT RMUTI MIS SYSTEM (SHARED)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Brand colours */
  --clr-orange:       #FF5F0E;
  --clr-orange-light: #FF7A35;
  --clr-orange-glow:  rgba(255, 95, 14, 0.25);
  --clr-navy:         #1E2D3D;
  --clr-slate:        #2C3E50;
  --clr-slate-light:  #3A5068;
  --clr-white:        #FFFFFF;

  /* Neutral */
  --clr-bg:           #F0F4F8;
  --clr-text:         #1E2D3D;
  --clr-muted:        #6B7C93;

  /* Semantic */
  --clr-success:      #1DB954;
  --clr-info:         #3498DB;
  --clr-warning:      #F39C12;
  --clr-danger:       #E74C3C;

  /* Shadows */
  --shadow-xs:  0 1px 4px rgba(0,0,0,.06);
  --shadow-sm:  0 2px 10px rgba(0,0,0,.08);
  --shadow-md:  0 8px 24px rgba(0,0,0,.12);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.16);
  --shadow-xl:  0 28px 72px rgba(0,0,0,.22);

  /* Radius */
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  20px;
  --radius-xl:  24px;

  /* Transition */
  --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* Admin Compat Mappings */
  --primary-orange: var(--clr-orange);
  --secondary-orange: var(--clr-orange-light);
  --dark-gray: var(--clr-slate);
  --light-gray: var(--clr-bg);
  --border-radius-lg: var(--radius-lg);
}