/* =========================
   TOKENS — SIS FINAL LOCK
   ========================= */

:root {

    /* ================== COLOR ================== */
    --color-bg-row: #fafafa;
    --color-bg-row-hover: #f3f4f6;

    --color-border-soft: #f1f5f9;
    --color-border-default: #e5e7eb;
    --color-border-strong: #d1d5db;

    --color-text-primary: #111827;
    --color-text-secondary: #6b7280;

    --color-input-bg: #f9fafb;
    --color-input-bg-focus: #ffffff;

    --color-primary: #2563eb;


    /* ================== SPACING ================== */
    /* GIỮ NGUYÊN SCALE CỦA BẠN (KHÔNG PHÁ UI) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;


    /* ================== SIZE ================== */
    --height-input: 32px;
    --height-switch: 24px;


    /* ================== RADIUS ================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;


    /* ================== BORDER ================== */
    --border-soft: 1px solid var(--color-border-soft);
    --border-default: 1px solid var(--color-border-default);
    --border-strong: 1px solid var(--color-border-strong);


    /* ================== SHADOW ================== */
    --shadow-focus: 0 0 0 2px rgba(37, 99, 235, 0.12);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);


    /* ================== TRANSITION ================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;


    /* ================== FONT (ADD NHẸ – KHÔNG PHÁ) ================== */
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
}