/**
 * DESIGN SYSTEM — Cao Thắng Portal
 * Tất cả tokens định nghĩa tại đây, không hardcode ở nơi khác.
 */

:root {
    /* Color */
    --color-primary:    #1E3A5F;
    --color-primary-l:  #2E5090;
    --color-accent:     #3B82F6;
    --color-accent-l:   #60A5FA;
    --color-surface:    #FFFFFF;
    --color-bg:         #F4F6FA;
    --color-bg-alt:     #EEF2F7;
    --color-text:       #1E293B;
    --color-text-2:     #64748B;
    --color-text-3:     #94A3B8;
    --color-border:     #E2E8F0;
    --color-border-h:   #CBD5E1;
    --color-success:    #16A34A;
    --color-success-bg: #F0FDF4;
    --color-danger:     #DC2626;
    --color-danger-bg:  #FEF2F2;
    --color-warning:    #D97706;
    --color-warning-bg: #FFFBEB;
    --color-info:       #0891B2;
    --color-info-bg:    #ECFEFF;
    --color-primary-soft:   #EAF2FF;
    --color-primary-softer: #F5F9FF;
    --color-hero-end:       #EDF4FF;

    /* Sidebar */
    --sidebar-bg:       #FFFFFF;
    --sidebar-text:     #475569;
    --sidebar-muted:    #94A3B8;
    --sidebar-hover:    #F8FAFC;
    --sidebar-active:   #EFF6FF;
    --sidebar-border:   #E2E8F0;
    --sidebar-w:        264px;

    /* Typography */
    --font-body:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --text-xs:    0.75rem;   /* 12px */
    --text-sm:    0.8125rem; /* 13px */
    --text-base:  0.875rem;  /* 14px */
    --text-md:    1rem;      /* 16px */
    --text-lg:    1.125rem;  /* 18px */
    --text-xl:    1.5rem;    /* 24px */
    --text-2xl:   1.75rem;   /* 28px */

    /* Spacing */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-2xl: 24px;

    /* Shadow */
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
    --shadow-soft: 0 18px 50px rgba(30,58,95,0.10);

    /* Transition */
    --transition: 0.15s ease;
}