/* ─── Design Tokens — IEHub LMS ───────────────────────────────────────────── */
/* Source of truth: mọi giá trị màu, spacing, radius đều lấy từ đây           */

:root {
  /* Brand */
  --color-primary:        #e63946;
  --color-primary-hover:  #c62d38;
  --color-primary-bg:     #FDEDED;
  --color-primary-border: #FF9696;

  /* Neutral */
  --color-text-main:      #333333;
  --color-text-muted:     #6F6F6F;
  --color-text-faint:     #8D8D8D;
  --color-border:         #DDDDDD;
  --color-bg-page:        #F7F7F7;
  --color-bg-surface:     #ffffff;
  --color-bg-disabled:    #E8E8E8;

  /* Status */
  --color-success-bg:     #ECF9EE;
  --color-success-text:   #0C6D26;
  --color-warning:        #FF9800;
  --color-streak-hot:     #AF4F4F;
  --color-streak-remain:  #8D8D8D;

  /* Heatmap levels */
  --heatmap-0: #E8E8E8;
  --heatmap-1: #E8E8E8;
  --heatmap-2: #FFC169;
  --heatmap-3: #FF9600;
  --heatmap-4: #DA8000;

  /* Typography */
  --font-base: 'Inter', sans-serif;

  /* Spacing */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  12px;
  --spacing-lg:  16px;
  --spacing-xl:  20px;
  --spacing-2xl: 24px;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-full: 9999px;

  /* Layout */
  --topbar-height:  62px;
  --sidebar-width:  272px;
  --main-max-width: 816px;
}