/* ============================================================
   THEME.CSS — Globales Design-System
   Farben • Abstände • Fonts • Radius • Shadow
============================================================ */

/* ---------------------------
   FARBPALETTE
--------------------------- */

:root {
    /* Brand Primary */
    --primary: #2563eb;
    --primary-light: #3b82f6;
    --primary-dark: #1d4ed8;

    /* Secondary */
    --secondary: #4f46e5;
    --secondary-light: #818cf8;
    --secondary-dark: #3730a3;

    /* Grayscale */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Status Colors */
    --success: #22c55e;
    --success-bg: #e7fbe9;

    --error: #ef4444;
    --error-bg: #ffeaea;

    --warning: #f59e0b;
    --warning-bg: #fef3c7;

    /* Info */
    --info: #3b82f6;
    --info-bg: #eff6ff;

    /* Transparent helpers */
    --white: #ffffff;
    --black: #000000;
}

/* ---------------------------
   FONTS
--------------------------- */

:root {
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    --font-size-base: 18px;
    --font-size-small: 14px;
    --font-size-large: 22px;

    --line-height: 1.6;
}

/* ---------------------------
   RADIUS
--------------------------- */

:root {
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
}

/* ---------------------------
   SPACING
--------------------------- */

:root {
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;
}

/* ---------------------------
   SHADOWS
--------------------------- */

:root {
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.10);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.15);
}

/* ---------------------------
   LAYOUT CONTAINERS
--------------------------- */

:root {
    --container-max: 1400px;
    --content-max: 900px;
}

/* ---------------------------
   TRANSITIONS
--------------------------- */

:root {
    --transition-fast: 0.15s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
}