/* 14agency Fastload Framework - Globale Settings <°)))>< v1.0*/

:root {
    --brand-primary: #6a11cb;
    --brand-secondary: #2575fc;
    --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    --brand-gradient-2: linear-gradient(12deg, var(--brand-primary), var(--brand-secondary));
    
    --text-main: #333333;
    --text-light: #666666;
    --white: #ffffff;
    --bg-light: #f8f9fa;
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --background: #0e0e0e;
    --surface: #131313;
    --surface-container: #1c1b1b;
    --primary: #4d8efe;
    --on-primary: #ffffff;
    --secondary: #ffb5a0;
    --text-main: #e5e2e1;
    --text-dim: #8c909f;
    --border-radius: 12px;
    --foreground: hsl(220 20% 10%);
    --card: hsl(0 0% 100%);
    --muted: hsl(220 14% 96%);
    --muted-foreground: hsl(220 10% 45%);
    --secondary: hsl(220 14% 96%);
    --primary: hsl(227 100% 59%);
    --primary-foreground: hsl(0 0% 100%);
    --accent: hsl(4 85% 68%);
    --cta: hsl(4 85% 60%);
    --cta-hover: hsl(4 85% 55%);
    --border: hsl(220 14% 90%);
    --hero-start: hsl(227 100% 59%);
    --hero-end: hsl(250 80% 65%);
    --gradient-hero: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 100%);

    --radius: 0.75rem;
    --radius-sm: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-pill: 9999px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-cta: 0 10px 30px -10px hsl(4 85% 60% / 0.5);

    --container-narrow: 70rem;

    /* Typografie */
    --font-maintext: 'Open Sans', sans-serif;
    --font-headlines: 'JetBrains Mono', monospace;
}

.text-white{
  color:var--(white);
}

.text-black{
  color:var--(#000);
}