/* 
 * The Forge Project - Design System Variables
 * Version: 1.0
 * Date: 2025-05-11
 * Validation Code: OMNI-CSS-VAR-20250511-001
 *
 * This file contains all the CSS variables for The Forge Project Design System.
 * These variables should be used consistently across all interfaces to ensure
 * visual harmony and adherence to the design system.
 */

:root {
    /* Primary Color Palette - Machine Spirit Essence */
    --cogitator-steel: #2d3142; /* Deep steel blue - primary dark */
    --forge-graphite: #4f5d75; /* Metallic gray - primary */
    --binary-silver: #bfc0c0; /* Muted silver - primary light */
    
    /* Secondary Color Palette - Sacred Mechanism */
    --ritual-copper: #a36336; /* Aged copper - secondary */
    --sacred-brass: #d09e57; /* Warm brass - secondary light */
    --ancient-bronze: #704214; /* Deep bronze - secondary dark */
    
    /* Accent Color Palette - Machine Blessings */
    --mechadendrite-red: #9a3334; /* Deep rust red - accent */
    --binary-pulse: #c24d4e; /* Vibrant electronic pulse - accent light */
    --machine-blood: #5c1f20; /* Dark machine oil - accent dark */
    
    /* Utility Colors - Sacred Functions */
    --blessed-green: #4a7c59; /* Success state - ritual completion */
    --incense-amber: #c38d5f; /* Warning state - ritual caution */
    --scrapcode-red: #9a3334; /* Danger state - ritual failure */
    --datarune-blue: #556a8a; /* Information state - machine knowledge */
    
    /* Sacred Light Spectrum */
    --parchment: #f4f3ea; /* Light background - ancient texts */
    --sacred-ash: #e6e6df; /* Secondary light background */
    --dark-iron: #2d3142; /* Dark text and backgrounds */
    --holy-oil: #faf0dc; /* Highlighted elements */
    
    /* Metallurgic Gradient - Machine Gray Spectrum */
    --steel-100: #f7f7f7;
    --steel-200: #e3e3e3;
    --steel-300: #bfc0c0;
    --steel-400: #9c9d9d;
    --steel-500: #7d7e7f;
    --steel-600: #646569;
    --steel-700: #4f5d75;
    --steel-800: #3d4759;
    --steel-900: #2d3142;
    
    /* Typography */
    --font-family-sacred: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    --font-family-ritual: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    --font-family-binary: 'Courier New', monospace;
    --font-size-base: 16px;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.875rem;
    --font-size-3xl: 2.25rem;
    --font-size-4xl: 3rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-loose: 2;
    
    /* Sacred Spacing - Ritual Measurements */
    --spacing-sacred-1: 0.25rem;
    --spacing-sacred-2: 0.5rem;
    --spacing-sacred-3: 1rem;
    --spacing-sacred-4: 1.5rem;
    --spacing-sacred-5: 3rem;
    
    /* Borders - Machine Seals */
    --seal-width: 1px;
    --seal-width-medium: 2px;
    --seal-width-thick: 3px;
    --seal-color: var(--ritual-copper);
    --seal-radius: 0.25rem;
    --seal-radius-lg: 0.5rem;
    --seal-radius-sm: 0.125rem;
    
    /* Shadows - Machine Aura */
    --aura-sm: 0 0.125rem 0.25rem rgba(45, 49, 66, 0.15);
    --aura: 0 0.5rem 1rem rgba(45, 49, 66, 0.2);
    --aura-lg: 0 1rem 3rem rgba(45, 49, 66, 0.3);
    
    /* Transitions - Ritual Flow */
    --ritual-transition: all 0.2s ease-in-out;
    --ritual-transition-slow: all 0.3s ease-in-out;
    --ritual-transition-fast: all 0.1s ease-in-out;
    
    /* Z-Index Scale - Layer Hierarchy */
    --layer-base: 0;
    --layer-above: 10;
    --layer-modal: 100;
    --layer-popup: 200;
    --layer-toast: 300;
    --layer-top: 1000;
    
    /* Grid - Sacred Layout */
    --grid-columns: 12;
    --grid-gutter: 1.5rem;
    --container-padding: 1rem;
    --container-max-width: 1200px;
    
    /* Breakpoints - Viewport Sanctification */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}
