/**
 * 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;
    
    /* Semantic Color Aliases */
    --color-success: #22C55E;
    --color-success-light: #DCFCE7;
    --color-warning: #F59E0B;
    --color-warning-light: #FEF3C7;
    --color-error: #EF4444;
    --color-error-light: #FEE2E2;
    --color-info: #3B82F6;
    --color-info-light: #DBEAFE;
    
    /* ====================================
       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;
    
    /* ====================================
       Theme-aware Colors (Light Mode defaults)
       ==================================== */
    --theme-bg: #FFFFFF;
    --theme-bg-secondary: var(--ktv-neutral-50);
    --theme-bg-tertiary: var(--ktv-neutral-100);
    --theme-text: var(--ktv-text);
    --theme-text-secondary: var(--ktv-neutral-600);
    --theme-text-muted: var(--ktv-neutral-500);
    --theme-border: var(--ktv-neutral-200);
    --theme-border-light: var(--ktv-neutral-100);
    --theme-card-bg: #FFFFFF;
    --theme-input-bg: #FFFFFF;
    --theme-hover-bg: var(--ktv-neutral-100);
}

/* ====================================
   Dark Mode Theme
   ==================================== */
.dark-mode {
    --ktv-text: #E7E5E4;
    --ktv-tint-50: rgba(238, 156, 68, 0.1);
    --ktv-tint-100: rgba(238, 156, 68, 0.15);
    
    --ktv-neutral-50: #1C1917;
    --ktv-neutral-100: #262524;
    --ktv-neutral-200: #353331;
    --ktv-neutral-300: #44403C;
    --ktv-neutral-400: #57534E;
    --ktv-neutral-500: #78716C;
    --ktv-neutral-600: #A8A29E;
    --ktv-neutral-700: #D6D3D1;
    --ktv-neutral-800: #E7E5E4;
    --ktv-neutral-900: #FAFAF9;
    
    --color-success-light: rgba(34, 197, 94, 0.2);
    --color-warning-light: rgba(245, 158, 11, 0.2);
    --color-error-light: rgba(239, 68, 68, 0.2);
    --color-info-light: rgba(59, 130, 246, 0.2);
    
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(238, 156, 68, 0.25);
    
    --theme-bg: #1A1814;
    --theme-bg-secondary: #1F1D1A;
    --theme-bg-tertiary: #262220;
    --theme-text: #E7E5E4;
    --theme-text-secondary: #A8A29E;
    --theme-text-muted: #78716C;
    --theme-border: #353331;
    --theme-border-light: #2A2826;
    --theme-card-bg: #262220;
    --theme-input-bg: #1F1D1A;
    --theme-hover-bg: #322E2B;
}