/**
 * Katholisch.ai CSS Variables
 * K-TV Brand Theme
 * 
 * This file contains all CSS custom properties (variables) used throughout the site.
 * Modify these values to change the site-wide theme.
 */

:root {
    /* ====================================
       Brand Colors
       ==================================== */
    --ktv-text: #2D2926;
    --ktv-brand: #EE9C44;
    --ktv-brand-shade: #CA853A;
    --ktv-brand-deep: #B5722E;
    
    /* Brand Tints (lighter shades) */
    --ktv-tint-50: #FDF6EE;
    --ktv-tint-100: #F8E8D4;
    
    /* ====================================
       Neutral Colors
       ==================================== */
    --ktv-neutral-50: #FAFAF9;
    --ktv-neutral-100: #F5F5F4;
    --ktv-neutral-200: #E7E5E4;
    --ktv-neutral-300: #D6D3D1;
    --ktv-neutral-400: #A8A29E;
    --ktv-neutral-500: #78716C;
    --ktv-neutral-600: #57534E;
    --ktv-neutral-700: #44403C;
    --ktv-neutral-800: #292524;
    --ktv-neutral-900: #1C1917;
    
    /* ====================================
       Semantic Colors
       ==================================== */
    --ktv-success: #22C55E;
    --ktv-warning: #F59E0B;
    --ktv-error: #EF4444;
    --ktv-info: #3B82F6;
    
    /* ====================================
       Panel Colors (Dark Theme)
       ==================================== */
    --panel-bg: #1A1814;
    --panel-card-bg: #262220;
    --panel-card-hover: #322E2B;
    --panel-text: #E7E5E4;
    --panel-text-muted: #A8A29E;
    
    /* ====================================
       Shadows
       ==================================== */
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-glow: 0 0 20px rgba(238, 156, 68, 0.15);
    
    /* ====================================
       Typography
       ==================================== */
    --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-mono: 'Monaco', 'Consolas', 'Courier New', monospace;
    
    /* Font Sizes */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;
    
    /* ====================================
       Spacing
       ==================================== */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-2xl: 3rem;    /* 48px */
    
    /* ====================================
       Border Radius
       ==================================== */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.25rem;  /* 20px */
    --radius-full: 9999px;
    
    /* ====================================
       Transitions
       ==================================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ====================================
       Z-Index Layers
       ==================================== */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-sidebar: 40;
    --z-modal-backdrop: 50;
    --z-modal: 60;
    --z-popover: 70;
    --z-tooltip: 80;
    --z-toast: 90;
    --z-max: 100;
    
    /* ====================================
       Layout
       ==================================== */
    --sidebar-width: 280px;
    --panel-width: 400px;
    --header-height: 60px;
    --input-height: 80px;
}