/* ==========================================================
   DESIGN TOKENS – NGUỒN CHUẨN DUY NHẤT CỦA UI V3
   Không khai báo lại các giá trị này trong file CSS khác.
   ========================================================== */

:root {
    /* Màu nhận diện Đoàn trường – NBK */
    --color-primary-25: #f7fbff;
    --color-primary-50: #eef7ff;
    --color-primary-100: #d9edff;
    --color-primary-200: #b9ddff;
    --color-primary-300: #88c7ff;
    --color-primary-400: #50a6ff;
    --color-primary-500: #1d82f2;
    --color-primary-600: #0a64c9;
    --color-primary-700: #0751a4;
    --color-primary-800: #094687;
    --color-primary-900: #0d3b70;
    --color-primary-950: #08264b;

    --color-youth-red-50: #fff1f1;
    --color-youth-red-100: #ffe0e0;
    --color-youth-red-500: #e51d2a;
    --color-youth-red-600: #c8101d;
    --color-youth-red-700: #a70f19;

    /* Màu ngữ nghĩa */
    --color-success-50: #eefbf3;
    --color-success-100: #d7f5e2;
    --color-success-600: #16833e;
    --color-success-700: #116832;

    --color-warning-50: #fff8e8;
    --color-warning-100: #ffedbd;
    --color-warning-600: #a65f00;
    --color-warning-700: #844900;

    --color-danger-50: #fff1f0;
    --color-danger-100: #ffe0dd;
    --color-danger-200: #ffc6c1;
    --color-danger-300: #ff9d93;
    --color-danger-600: #c62f25;
    --color-danger-700: #9f241d;

    --color-info-50: #eef8ff;
    --color-info-100: #d9efff;
    --color-info-600: #0875bd;
    --color-info-700: #075e98;

    /* Màu trung tính */
    --color-white: #ffffff;
    --color-slate-25: #fcfdfe;
    --color-slate-50: #f7f9fc;
    --color-slate-100: #eef2f7;
    --color-slate-200: #dce4ee;
    --color-slate-300: #c3cedc;
    --color-slate-400: #8fa0b4;
    --color-slate-500: #66788e;
    --color-slate-600: #4c5d72;
    --color-slate-700: #36465a;
    --color-slate-800: #223247;
    --color-slate-900: #142337;
    --color-slate-950: #0a1626;

    /* Alias dùng chung */
    --color-primary: var(--color-primary-600);
    --color-primary-soft: var(--color-primary-50);
    --color-primary-hover: var(--color-primary-700);
    --color-primary-active: var(--color-primary-800);
    --color-accent: var(--color-youth-red-500);
    --color-background: var(--color-slate-50);
    --color-surface: var(--color-white);
    --color-surface-soft: var(--color-slate-50);
    --color-surface-subtle: var(--color-slate-25);
    --color-surface-muted: var(--color-slate-100);
    --color-text: var(--color-slate-900);
    --color-text-soft: var(--color-slate-700);
    --color-muted: var(--color-slate-500);
    --color-text-muted: var(--color-muted);
    --color-border: var(--color-slate-200);
    --color-border-strong: var(--color-slate-300);
    --color-focus: var(--color-primary-400);
    --color-overlay: rgba(10, 22, 38, 0.56);

    /* Typography */
    --font-family:
        "Be Vietnam Pro",
        "Segoe UI",
        Arial,
        sans-serif;
    --font-family-mono:
        "Cascadia Code",
        "Consolas",
        monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.9375rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-heading: 1.35;
    --line-height-body: 1.6;

    /* Khoảng cách theo thang 4px */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Kích thước điều khiển */
    --control-height-sm: 2rem;
    --control-height-md: 2.5rem;
    --control-height-lg: 3rem;
    --touch-target-min: 2.75rem;

    /* Bo góc */
    --radius-xs: 0.375rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-pill: 999px;

    /* Bóng đổ */
    --shadow-xs: 0 1px 2px rgba(10, 22, 38, 0.06);
    --shadow-sm: 0 4px 12px rgba(10, 22, 38, 0.08);
    --shadow-md: 0 12px 28px rgba(10, 22, 38, 0.12);
    --shadow-lg: 0 24px 54px rgba(10, 22, 38, 0.18);
    --shadow-xl: var(--shadow-lg);

    /* Chuyển động */
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 320ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --easing-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Z-index */
    --z-base: 0;
    --z-sticky: 100;
    --z-dropdown: 300;
    --z-sidebar: 500;
    --z-overlay: 700;
    --z-dialog: 800;
    --z-toast: 900;

    /* Chiều rộng bố cục */
    --header-height: 4.75rem;
    --sidebar-width: 16rem;
    --content-max-width: 90rem;
    --form-max-width: 36rem;
    --dialog-max-width: 32rem;
}