/* ==============================================
   HOC-System – Farbsystem
   ============================================== */

:root {
    --primary: #6C5CE7;
    --primary-dark: #5A4BD1;
    --primary-active: #4A3CB8;
    --primary-rgb: 108, 92, 231;
    --primary-dark-rgb: 90, 75, 209;

    --accent: #00D2FF;
    --accent-rgb: 0, 210, 255;

    --success: #00B894;
    --success-rgb: 0, 184, 148;

    --secondary: #636E72;
    --secondary-rgb: 99, 110, 114;

    --primary-bg-faint:    rgba(108, 92, 231, 0.03);
    --primary-bg-subtle:   rgba(108, 92, 231, 0.06);
    --primary-bg-hover:    rgba(108, 92, 231, 0.08);
    --primary-bg-active:   rgba(108, 92, 231, 0.10);
    --primary-bg-emphasis:  rgba(108, 92, 231, 0.12);
    --primary-bg-strong:   rgba(108, 92, 231, 0.15);
    --primary-bg-bold:     rgba(108, 92, 231, 0.25);

    --primary-border-subtle:  rgba(108, 92, 231, 0.12);
    --primary-border-default: rgba(108, 92, 231, 0.20);
    --primary-border-hover:   rgba(108, 92, 231, 0.30);
    --primary-border-focus:   rgba(108, 92, 231, 0.35);
    --primary-border-strong:  rgba(108, 92, 231, 0.50);

    --primary-shadow-sm: rgba(108, 92, 231, 0.12);
    --primary-shadow-md: rgba(108, 92, 231, 0.25);
    --primary-shadow-lg: rgba(108, 92, 231, 0.35);

    --accent-bg-subtle: rgba(0, 210, 255, 0.08);
    --accent-bg-hover:  rgba(0, 210, 255, 0.12);
}