/* KONIAN CRUD Framework - CSS Variable Definitions */
/* Classical Component-Based CSS */
/* Framework Version 2.0.0 */

:root
{
    /* ===== FARBEN ===== */

    /* Basis-Farben */
    --color-black: #000000;
    --color-dark: #333333;
    --color-medium: #666666;
    --color-light: #999999;
    --color-lighter: #cccccc;
    --color-lightest: #f5f5f5;
    --color-white: #ffffff;

    /* Erweiterte Graustufen-Palette */
    --gray-50: #fafafa;
    --gray-100: var(--color-lightest);  /* Alias für #f5f5f5 */
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;

    /* ===== ABSTÄNDE ===== */

    --space-xs: 2px;
    --space-sm: 4px;
    --space-md: 8px;
    --space-lg: 12px;
    --space-xl: 16px;
    --space-xxl: 24px;

    /* ===== SCHRIFTGRÖSSEN ===== */

    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 24px;
    --font-xxl: 32px;

    /* ===== SCHRIFTARTEN ===== */

    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-family-mono: "SFMono-Regular", "Monaco", "Inconsolata", "Roboto Mono", monospace;

    /* ===== SCHATTEN ===== */

    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 4px 16px rgba(0, 0, 0, 0.2);

    /* ===== BORDER-RADIUS ===== */

    --radius-default: 5px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}