/* Dark Gallery Theme - Variables */
:root {
    /* Color Scheme - Dark theme with bright accents */
    --color-danger: #ff4757;
    --color-home: #a4b0be;
    --color-ok: #2ed573;
    --color-neutral: #898fff;
    --font-color-text: #e1e8ed; /* Light gray text on dark background */
    --font-color-highlight: #c7d2fe; /* Lighter blue-gray for highlights */
    --font-color-accent: #a7f3d0; /* Accent for better dark theme contrast */
    --font-color-accent-transparent: rgba(167, 243, 208, 0.2); /* Semi-transparent version for focus effects */
    
    /* Background Colors - Dark theme */
    --background-primary: #1a202c; /* Dark blue-gray background */
    --background-primary-transparent: rgba(26, 32, 44, 0.95);
    --background-highlight: #2d3748; /* Darker blue-gray for highlights */
    --background-highlight-transparent: rgba(45, 55, 72, 0.9);
    --background-table-transparent: rgba(226, 232, 240, 0.1); /* Light overlay for tables */
    
    /* Header Decorative Elements - Dark theme gradients */
    --header-line-gradient: radial-gradient(transparent 10%, var(--font-color-text) 21%, var(--font-color-highlight) 68%, var(--font-color-accent) 77%, transparent);
    --header-pattern-background: repeating-radial-gradient(circle at bottom right, 
        transparent 0, 
        transparent 47.2vw, 
        var(--background-highlight-transparent) 47.2vw,
        var(--background-primary-transparent) 47.4vw,
        transparent 47.4vw);
    
    /* Layout & Sizing Parameters */
    --cards-image-ratio: 37.5%; /* in percent, please! */
    --gallery-item-min-width: 11rem;
    --gallery-gap: 1em;
    --content-max-width: 93em;
    --content-max-width-cards: 110rem;
    
    /* Typography */
    --font-size-body: 1.1rem;
    --font-family-text: 'expletussans_regular', sans-serif;
    --font-family-mono: 'azaret_mono', monospace;
    --font-family-display: 'museo_moderno', sans-serif;
    
    /* Spacing & Layout */
    --padding-cards: 1rem .5rem 1rem 1rem;
    --titleline-top: 2.72rem; /* Adjusted to account for title height and to fit in between navemenu buttons neatly */
    --titleline-btm: calc(100% - (var(--titleline-top) + 0.15em)); /* Adjusted to account for title height */
    
    /* Effects & Animations */
    --hoverscale: 104%;
    --growtime: .07s;
    --color-gradient-brand: linear-gradient(90deg, transparent, var(--font-color-highlight) 10%, var(--font-color-accent) 87%, transparent);
    
    /* Header Decorative Line Positioning */
    --background-linewidth-multiplier: 1.25;
    --background-transparent-gap: 51vw;
}