/**
 * ===================================================
 * BIRI Dark Theme Override (v1)
 * Purpose: Dark mode variant that maintains brand identity
 * Usage: Load after biri-base.css to override light theme
 * ===================================================
 */

:root {
    /* ===== Dark Background Palette ===== */
    --background-body: #000000;                    /* Pure black main background */
    --background-alt: #1a1a1a;                     /* Slightly lighter black for contrast */
    --background-content: #111111;                 /* Content area background */

    
    /* ===== Header Backgrounds - All Black ===== */
    --background-header-top-bar: #000000;          /* Black top bar */
    --background-header-main-bar: #000000;         /* Black main bar */
    
    /* ===== Footer Backgrounds - All Black ===== */
    --background-footer-top: #000000;              /* Black footer top */
    --background-footer-bottom: #000000;           /* Black footer bottom */
    
    /* ===== Card Section Backgrounds - Progressive Black Shades ===== */
    --background-featured-section: #000000;        /* Pure black for featured */
    --background-gateways-section: #0d0d0d;        /* Slightly lighter for gateways */
    --background-meta-section: #1a1a1a;            /* Even lighter for meta */
    
    /* ===== Card Backgrounds - Subtle Dark Variations ===== */
    --background-card-light: #1f1f1f;              /* Card backgrounds - lighter than sections */
    --meta-grid-bg: #0d0d0d;                       /* Meta grid background */
    
    /* ===== Text Colors - Light on Dark ===== */
    --text-color: #ffffff;                         /* White body text */
    --heading-color: #ffffff;                      /* White headings */

    
    /* ===== Header Text Colors - White on Black ===== */
    --header-top-bar-text-color: #ffffff;
    --header-top-bar-link-color: #ffffff;
    --header-top-bar-link-hover-color: var(--secondary); /* Red on hover */
    
    --header-main-bar-text-color: #ffffff;
    --header-main-bar-link-color: #ffffff;
    --header-main-bar-link-hover-color: var(--secondary); /* Red on hover */
    
    --site-title-color: #ffffff;
    --site-title-hover-color: var(--secondary);   /* Red on hover */
    
    /* ===== Navigation Colors - White with Red Accents ===== */
    --nav-text-color: #ffffff;
    --nav-indicator-color: var(--secondary);      /* Red indicators */
    --nav-hover-color: var(--secondary);          /* Red on hover */
    --nav-hover-indicator-color: var(--secondary);
    
    /* ===== Footer Text Colors - White on Black ===== */
    --background-footer-top-text-color: #ffffff;
    --background-footer-bottom-text-color: #ffffff;
    
    /* ===== Links - Keep Brand Colors for Pop ===== */
    --link-color: var(--secondary);               /* Red links */
    --link-hover-color: var(--highlight-color);   /* Stone on hover */
    
    /* ===== Borders & Accents - Use Secondary Color for Pop ===== */
    --border-color: var(--secondary);             /* Red borders instead of gray */
    --border-accent: var(--secondary);            /* Red accent borders */
    
    /* ===== Card Hover States - Keep Existing for Pop Effect ===== */
    /* Don't override these - they already provide good contrast: */
    --featured-hover-bg: var(--primary);
    --featured-hover-border: var(--primary);
    --realm-hover-bg: var(--accent-1);
    --realm-hover-border: var(--accent-1);
    --meta-hover-bg: white;
    --meta-hover-border: var(--accent-1);

    /* ===== Form Elements - Dark with Red Accents ===== */
    --input-background: #1f1f1f;
    --input-border: var(--secondary);             /* Red borders */
    --input-text: #ffffff;
    --input-focus-border: var(--highlight-color); /* Stone on focus */
    
    /* ===== Shadows - Lighter for Dark Theme ===== */
    --shadow-color: rgba(204, 71, 46, 0.2);      /* Red-tinted shadows */
    --card-shadow: 0px 2px 8px var(--shadow-color);
}

/* ===== Specific Element Overrides ===== */

/* HR elements - Make them pop with secondary color */
hr,
hr.alignfull,
.section-divider {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    opacity: 0.8;
}

/* Form inputs - Dark styling */
input[type="text"],
input[type="email"], 
input[type="search"],
textarea,
select {
    background-color: var(--input-background);
    border-color: var(--input-border);
    color: var(--input-text);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 4px rgba(184, 150, 115, 0.3); /* Stone glow */
}

/* Ensure search form button is visible */
.main-header__search-form button {
    color: var(--secondary) !important;
}

.main-header__search-form button:hover {
    background-color: var(--secondary) !important;
    color: #ffffff !important;
}

/* Blockquotes - Use secondary color for left border */
blockquote {
    border-left-color: var(--secondary);
    background-color: var(--background-alt);
    color: #ffffff;
}

/* Hamburger menu toggle - Ensure visibility */
.main-navigation__toggle span {
    background-color: #ffffff;
}

/* Menu drawer - Dark styling */
.menu-drawer {
    background-color: var(--background-content);
}

/* Card content text - Ensure readability (but not meta cards which are white) */
.featured-card .card-title,
.featured-card .card-text,
.realm-card .card-title,
.realm-card .card-text {
  color: #ffffff;
}

/* Meta cards keep dark text since they have white backgrounds */
.meta-card .card-title,
.meta-card .card-text {
  color: #333333;
}

/* Metadata styling */
dl.property dt {
    color: var(--secondary); /* Red for property names */
}

.property dd .value-content {
    color: #ffffff;
}

/* Action cards - Dark styling */
.action-card {
    background-color: var(--background-card-light);
    color: #ffffff;
    border-color: var(--secondary);
}

.action-card:hover {
    border-color: var(--highlight-color);
}

.action-card-icon {
    color: var(--secondary); /* Red icons */
}