/* ================================================================
   RAW KRACHT DESIGN SYSTEM - SHARED VARIABLES
   ================================================================
   
   Single Source of Truth voor alle styling
   Gebruikt door: Website (PHP) + Member App (PWA)
   
   Last updated: 13 januari 2026
   ================================================================ */

:root {
    /* ============================================
       COLORS - Brand Identity
       ============================================ */
    
    /* Primary Colors */
    --matte-black: #0a0a0a;      /* Main backgrounds, darkest elements */
    --charcoal: #1a1a1a;         /* Cards, sections, secondary backgrounds */
    --warm-wood: #c4956c;        /* Primary brand color, CTAs, highlights */
    --gold: #d4a574;             /* Secondary accents, hover states */
    --brick-red: #8b4f39;        /* Tertiary accent, warnings, errors */
    --cream: #f5f5f0;            /* Primary text color, light elements */
    
    /* Opacity Variations (for overlays, borders) */
    --dark-overlay: rgba(10, 10, 10, 0.85);
    --wood-overlay-light: rgba(196, 149, 108, 0.05);
    --wood-overlay-medium: rgba(196, 149, 108, 0.1);
    --wood-overlay-heavy: rgba(196, 149, 108, 0.2);
    --wood-border-light: rgba(196, 149, 108, 0.2);
    --wood-border-medium: rgba(196, 149, 108, 0.3);
    
    /* Text Opacity */
    --text-primary: rgba(245, 245, 240, 1);
    --text-secondary: rgba(245, 245, 240, 0.8);
    --text-tertiary: rgba(245, 245, 240, 0.6);
    --text-disabled: rgba(245, 245, 240, 0.4);
    
    
    /* ============================================
       TYPOGRAPHY - Fonts & Sizing
       ============================================ */
    
    /* Font Families */
    --font-header: 'Bebas Neue', sans-serif;
    --font-body: 'Archivo', sans-serif;
    --font-button: 'Archivo', sans-serif;
    
    /* Font Weights */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    
    /* Font Sizes - Fluid (responsive) */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.85rem;      /* 13.6px */
    --text-base: 0.95rem;    /* 15.2px */
    --text-lg: 1.2rem;       /* 19.2px */
    --text-xl: 1.5rem;       /* 24px */
    --text-2xl: 1.8rem;      /* 28.8px */
    --text-3xl: 2.5rem;      /* 40px */
    --text-4xl: 3rem;        /* 48px */
    
    /* Line Heights */
    --leading-tight: 1;
    --leading-snug: 1.2;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;
    
    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
    --tracking-widest: 0.15em;
    
    
    /* ============================================
       SPACING - Margins & Padding
       ============================================ */
    
    --space-xs: 0.25rem;     /* 4px */
    --space-sm: 0.5rem;      /* 8px */
    --space-md: 1rem;        /* 16px */
    --space-lg: 1.5rem;      /* 24px */
    --space-xl: 2rem;        /* 32px */
    --space-2xl: 2.5rem;     /* 40px */
    --space-3xl: 3rem;       /* 48px */
    --space-4xl: 5rem;       /* 80px */
    
    
    /* ============================================
       BORDERS & RADIUS
       ============================================ */
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 50%;
    
    /* Border Widths */
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 4px;
    
    
    /* ============================================
       SHADOWS - Elevation
       ============================================ */
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.5);
    
    /* Glow Effects (for CTAs) */
    --glow-wood: 0 4px 15px rgba(196, 149, 108, 0.3);
    --glow-wood-strong: 0 8px 24px rgba(196, 149, 108, 0.5);
    --glow-gold: 0 6px 20px rgba(212, 165, 116, 0.4);
    
    
    /* ============================================
       TRANSITIONS - Animations
       ============================================ */
    
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    
    /* ============================================
       LAYOUT - Breakpoints & Constraints
       ============================================ */
    
    /* Max Widths */
    --container-sm: 420px;
    --container-md: 480px;
    --container-lg: 768px;
    --container-xl: 1400px;
    
    /* Z-Index Layers */
    --z-base: 1;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-modal: 200;
    --z-toast: 1000;
    
    
    /* ============================================
       GRADIENTS
       ============================================ */
    
    --gradient-primary: linear-gradient(90deg, var(--warm-wood), var(--gold));
    --gradient-dark: linear-gradient(135deg, var(--charcoal) 0%, #2a2a2a 100%);
    --gradient-overlay: linear-gradient(180deg, var(--matte-black) 0%, var(--charcoal) 100%);
}


/* ================================================================
   COMPONENT PRESETS - Common Patterns
   ================================================================ */

/* Button Base Styles */
.btn-primary {
    background: var(--gold);
    color: var(--matte-black);
    border: none;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    font-family: var(--font-button);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--glow-wood);
}

.btn-primary:hover {
    background: var(--warm-wood);
    transform: translateY(-2px);
    box-shadow: var(--glow-wood-strong);
}

.btn-secondary {
    background: transparent;
    color: var(--cream);
    border: var(--border-medium) solid var(--warm-wood);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    font-family: var(--font-button);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-secondary:hover {
    background: var(--warm-wood);
    color: var(--matte-black);
    transform: translateY(-2px);
}

/* Card Base Styles */
.card {
    background: var(--charcoal);
    border: var(--border-thin) solid var(--wood-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: all var(--transition-normal);
}

.card:hover {
    border-color: var(--warm-wood);
    background: var(--wood-overlay-light);
    transform: translateY(-2px);
}

/* Input Base Styles */
.input {
    width: 100%;
    padding: var(--space-md);
    background: var(--matte-black);
    border: var(--border-thin) solid var(--wood-border-medium);
    border-radius: var(--radius-md);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: all var(--transition-normal);
}

.input:focus {
    outline: none;
    border-color: var(--warm-wood);
    background: var(--wood-overlay-light);
    box-shadow: 0 0 0 3px var(--wood-overlay-medium);
}


/* ================================================================
   UTILITY CLASSES - Quick Helpers
   ================================================================ */

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-wood { color: var(--warm-wood); }
.text-gold { color: var(--gold); }

/* Backgrounds */
.bg-black { background: var(--matte-black); }
.bg-charcoal { background: var(--charcoal); }
.bg-wood-light { background: var(--wood-overlay-light); }
.bg-wood-medium { background: var(--wood-overlay-medium); }

/* Borders */
.border-wood { border: var(--border-thin) solid var(--wood-border-light); }
.border-wood-medium { border: var(--border-thin) solid var(--wood-border-medium); }

/* Spacing Utilities */
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }


/* ================================================================
   USAGE NOTES
   ================================================================
   
   WEBSITE (PHP):
   <link rel="stylesheet" href="../shared/css/variables.css">
   <style>
       body { background: var(--matte-black); }
       h1 { color: var(--warm-wood); font-family: var(--font-header); }
   </style>
   
   APP (HTML):
   <link rel="stylesheet" href="../shared/css/variables.css">
   <style>
       .dashboard { background: var(--charcoal); }
       .btn { background: var(--gold); }
   </style>
   
   BENEFITS:
   - Change --warm-wood once → updates everywhere
   - Consistent spacing, colors, fonts across all pages
   - Easy to maintain and scale
   - No duplicate CSS code
   
   ================================================================ */