/* Camus Mecánica - Design Tokens & CSS Custom Properties */

:root {
    /* Color Palette */
    --color-bg-primary:     hsl(0, 0%, 7%);       /* #121212 - Pure dark back */
    --color-bg-secondary:   hsl(0, 0%, 12%);      /* #1e1e1e - Sidebar, card back */
    --color-bg-elevated:    hsl(0, 0%, 16%);      /* #282828 - Dialogs, inputs */
    --color-surface:        hsl(0, 0%, 20%);      /* #333333 - Hover backgrounds */
    
    /* Branding Colors */
    --color-gold:           hsl(43, 80%, 46%);    /* #d4a017 - Principal gold accent */
    --color-gold-light:     hsl(43, 85%, 58%);    /* Gold hover accent */
    --color-gold-glow:      rgba(212, 160, 23, 0.15);
    
    --color-fire:           hsl(27, 85%, 48%);    /* #e8740c - Fire orange accent */
    --color-fire-light:     hsl(27, 90%, 56%);    /* Orange hover accent */
    --color-fire-glow:      rgba(232, 116, 12, 0.15);

    /* UI State Colors */
    --color-success:        hsl(150, 65%, 38%);   /* Emerald positive states */
    --color-success-bg:     rgba(20, 160, 90, 0.12);
    --color-warning:        hsl(38, 92%, 50%);    /* Amber states */
    --color-warning-bg:     rgba(240, 170, 10, 0.12);
    --color-danger:         hsl(0, 75%, 50%);     /* Crimson red negative states */
    --color-danger-bg:      rgba(230, 40, 40, 0.12);
    --color-info:           hsl(205, 75%, 50%);    /* Blue informative states */
    --color-info-bg:        rgba(30, 140, 230, 0.12);

    /* Text Colors */
    --color-text-primary:   hsl(0, 0%, 93%);      /* Off-white */
    --color-text-secondary: hsl(0, 0%, 65%);      /* Muted gray */
    --color-text-muted:     hsl(0, 0%, 45%);      /* Dimmed label gray */
    
    /* Borders and Dividers */
    --color-border:         hsl(0, 0%, 18%);      /* Subtle borders */
    --color-border-hover:   hsl(0, 0%, 26%);      /* Focus state borders */

    /* Typography */
    --font-headings:        'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body:            'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Spacing */
    --space-xs:             0.25rem;
    --space-sm:             0.5rem;
    --space-md:             1rem;
    --space-lg:             1.5rem;
    --space-xl:             2rem;

    /* Borders & Shadow */
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            12px;
    --radius-pill:          50px;
    
    --shadow-sm:            0 2px 4px rgba(0,0,0,0.2);
    --shadow-md:            0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg:            0 8px 24px rgba(0,0,0,0.4);
    
    /* Transitions */
    --transition-fast:      0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
}