/* ============================================
   DEADLOCK Theme
   Color Palette:
   #1F3240 - Dark blue-gray (secondary dark)
   #357B61 - Forest green (accent)
   #59CC6D - Bright green (accent highlight)
   #FFF1DE - Cream/beige (light text/background)
   ============================================ */

:root {
    /* Deadlock Colors */
    --color-accent: #59CC6D;
    --color-accent-hover: #357B61;
    --color-accent-glow: rgba(89, 204, 109, 0.5);
    --color-accent-subtle: rgba(89, 204, 109, 0.1);
    --color-accent-border: rgba(89, 204, 109, 0.4);
    
    /* Deadlock Dark Colors */
    --color-deadlock-dark: #1F1D1E;
    --color-deadlock-dark-secondary: #1F3240;
    --color-deadlock-green: #357B61;
    --color-deadlock-green-bright: #59CC6D;
    --color-deadlock-cream: #FFF1DE;
    
    /* Text Colors */
    --color-text-primary: #FFF1DE;
    --color-text-secondary: rgba(255, 241, 222, 0.7);
}

/* ============================================
   Deadlock Header with Banner Image
   ============================================ */
.header {
    background-image: 
        linear-gradient(to top, var(--color-bg-container) 0%, rgba(0, 0, 0, 0) 100%),
        url('/deadlock/images/header-banner-deadlock.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Deadlock specific background gradient */
body {
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(89, 204, 109, 0.08) 0%, transparent 121vh);
    background-attachment: fixed;
}

/* ============================================
   Card Hover Effects with Deadlock Colors
   ============================================ */
.card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 20px var(--color-accent-glow);
}

/* ============================================
   Link Colors
   ============================================ */
a {
    color: var(--color-accent);
}

a:hover {
    color: var(--color-accent-hover);
}

/* ============================================
   Button Styles
   ============================================ */
button,
.btn,
.button {
    background: var(--color-accent);
    color: var(--color-deadlock-dark);
    border: 1px solid var(--color-accent);
}

button:hover,
.btn:hover,
.button:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-deadlock-cream);
}

/* ============================================
   Section Titles
   ============================================ */
.section-title {
    color: var(--color-accent);
    border-bottom: 2px solid var(--color-accent-border);
}

/* ============================================
   News Article Styles
   ============================================ */
.article-read-more {
    color: var(--color-accent);
}

.article-read-more:hover {
    color: var(--color-accent-hover);
}

.article-image-overlay {
    background: linear-gradient(to top, rgba(31, 29, 30, 0.9) 0%, rgba(31, 29, 30, 0) 100%);
}

/* ============================================
   Form Elements
   ============================================ */
input[type="text"],
input[type="search"],
input[type="number"],
select,
textarea {
    border-color: var(--color-accent-border);
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

/* ============================================
   Badge and Tag Styles
   ============================================ */
.badge,
.tag {
    background: var(--color-accent-subtle);
    border: 1px solid var(--color-accent-border);
    color: var(--color-accent);
}

/* ============================================
   Table Styles
   ============================================ */
table th {
    background: var(--color-deadlock-dark-secondary);
    color: var(--color-accent);
    border-bottom: 2px solid var(--color-accent-border);
}

table tr:hover {
    background: var(--color-accent-subtle);
}

/* ============================================
   Scrollbar Styles
   ============================================ */
::-webkit-scrollbar-thumb {
    background: var(--color-accent);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-hover);
}

/* ============================================
   Selection Styles
   ============================================ */
::selection {
    background: var(--color-accent);
    color: var(--color-deadlock-dark);
}

::-moz-selection {
    background: var(--color-accent);
    color: var(--color-deadlock-dark);
}