/* ===========================================
   LUTSlap Design System Variables
   =========================================== */

:root {
    /* ========================================
       SPACING
       Derived from existing patterns: 4px, 6px, 8px, 10px, 12px, 20px
       ======================================== */
    --space-xs: 4px;
    --space-sm: 6px;
    --space-md: 8px;
    --space-lg: 12px;
    --space-xl: 20px;

    /* ========================================
       TYPOGRAPHY - Font Sizes
       Derived from existing patterns: 10px, 11px, 12px, 13px
       ======================================== */
    --text-xs: 10px;
    /* Section labels, badges */
    --text-sm: 11px;
    /* File names, folder names */
    --text-base: 12px;
    /* Standard UI text */
    --text-md: 13px;
    /* Buttons, inputs */

    /* ========================================
       TYPOGRAPHY - Font Weights
       ======================================== */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ========================================
       BORDER RADIUS
       Derived from existing patterns: 4px, 6px, 8px, 12px
       ======================================== */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* ========================================
       INTERACTIVE ELEMENT HEIGHTS
       Standardize buttons, inputs, dropdowns
       ======================================== */
    --control-height-sm: 28px;
    --control-height-md: 32px;
    --control-height-lg: 36px;

    /* ========================================
       TRANSITIONS
       ======================================== */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-smooth: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}