/* ============================================================
   variables.css – Design Tokens
   Kế thừa brand colors từ HUBSP (003375 / 0052cc)
   ============================================================ */

:root {
    /* ─── Brand (HUBSP palette) ─── */
    --brand-50:  #f0f7ff;
    --brand-100: #e0effe;
    --brand-200: #bae0fd;
    --brand-500: #0052cc;
    --brand-600: #025bad;
    --brand-700: #003b7a;
    --brand-800: #003375;
    --brand-900: #002654;

    /* ─── Surface / Neutral ─── */
    --surface-0:   #ffffff;
    --surface-50:  #f8fafc;
    --surface-100: #f1f5f9;
    --surface-200: #e2e8f0;
    --surface-300: #cbd5e1;
    --surface-400: #94a3b8;
    --surface-500: #64748b;
    --surface-600: #475569;
    --surface-700: #334155;
    --surface-800: #1e293b;
    --surface-900: #0f172a;

    /* ─── Semantic ─── */
    --color-success:        #22c55e;
    --color-success-bg:     #f0fdf4;
    --color-success-border: #bbf7d0;
    --color-warning:        #f59e0b;
    --color-warning-bg:     #fffbeb;
    --color-warning-border: #fde68a;
    --color-danger:         #ef4444;
    --color-danger-bg:      #fef2f2;
    --color-danger-border:  #fecaca;

    /* ─── Typography ─── */
    --font: 'Inter', system-ui, sans-serif;
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;

    /* ─── Spacing ─── */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
    --sp-4: 1rem;     --sp-5: 1.25rem;  --sp-6: 1.5rem;
    --sp-8: 2rem;     --sp-10: 2.5rem;  --sp-12: 3rem;

    /* ─── Radius ─── */
    --r-sm:   0.5rem;
    --r-md:   0.75rem;
    --r-lg:   1rem;
    --r-xl:   1.25rem;
    --r-2xl:  1.5rem;
    --r-3xl:  2rem;
    --r-full: 9999px;

    /* ─── Shadows ─── */
    --shadow-sm:    0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md:    0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.05);
    --shadow-xl:    0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    --shadow-brand: 0 4px 12px -3px rgba(0,82,204,0.35);
    --shadow-brand-hover: 0 6px 16px -3px rgba(0,82,204,0.45);

    /* ─── Transitions ─── */
    --t-fast:   0.15s ease;
    --t-base:   0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --t-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    /* ─── Layout ─── */
    --sidebar-w:    260px;
    --navbar-h:     60px;
    --bottom-nav-h: 68px;
}