/* Theme Color System using CSS Custom Properties */
/* This file enables dynamic color scheme switching */

:root {
    /* Default theme colors (Red) */
    --theme-primary: #cc0000;
    --theme-primary-light: #ee0000;
    --theme-primary-dark: #aa0000;
    --theme-primary-hover: #dd0000;
    --theme-primary-bg: #bb0000;

    /* Day mode colors (default) */
    --bg-primary: #fefeee;
    --bg-secondary: #ffffff;
    --bg-tertiary: rgba(255, 255, 255, 0.85);
    --bg-input: #ffffff;
    --bg-button: #efefde;
    --bg-body: #000000;
    --bg-footer: #222222;
    --text-primary: #000000;
    --text-secondary: #666666;
    --text-footer: #ffffff;
    --border-light: #ccc;
    --text-stroke: #000000;
}

/* Night mode colors */
[data-theme="night"] {
    --bg-primary: #1e1e1e;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: rgba(35, 35, 35, 0.95);
    --bg-input: #3d3d3d;
    --bg-button: #3d3d3d;
    --bg-body: #121212;
    --bg-footer: #1a1a1a;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-footer: #cccccc;
    --border-light: #555;
    --text-stroke: #ffffff;
}

/* Apply theme colors to existing elements */

/* ==========================================
   SITE TITLE AND HEADERS
   ========================================== */

/* Main site title */
#title,
#title a {
    -webkit-text-fill-color: var(--theme-primary-light) !important;
}

/* Subtitle */
#subtitle {
    color: var(--text-footer, white);
}

/* Page titles */
.page-title {
    color: var(--theme-primary) !important;
    -webkit-text-fill-color: var(--theme-primary-light) !important;
}

/* Navigation menu items */
.nav-menu .menu-item {
    -webkit-text-fill-color: var(--theme-primary-light) !important;
}

#header-menu a {
    -webkit-text-fill-color: var(--theme-primary-light) !important;
}

/* Entry titles (blog) */
.entry-title {
    color: var(--theme-primary-light) !important;
    -webkit-text-fill-color: var(--theme-primary-light) !important;
}

/* Widget titles */
.widget-title {
    color: var(--theme-primary) !important;
}

/* Contact form labels */
#contact-form p {
    color: var(--theme-primary) !important;
}

/* ==========================================
   BORDERS
   ========================================== */

.button-group button,
.checkbox-wrapper,
.d-line,
.line-result,
#add-line,
#clear-log,
#dice-table,
#expand-all,
#log-list,
p button,
.red-border,
.settings-section,
.radio-wrapper {
    border-color: var(--theme-primary) !important;
}

header {
    border-bottom-color: var(--theme-primary) !important;
}

#dice-table th {
    border-bottom-color: var(--theme-primary) !important;
}

#dice-table tr {
    border-color: var(--theme-primary);
}

#dice-table caption {
    border-bottom-color: var(--theme-primary) !important;
}

/* ==========================================
   TEXT COLORS
   ========================================== */

.red,
.line-result,
#roll-dice,
#dice-roll-log {
    color: var(--theme-primary) !important;
}

/* Webkit text fill for headers and titles */
#roll-dice,
#dice-roll-log,
#dice-table th,
.button-group button:first-child {
    -webkit-text-fill-color: var(--theme-primary-light) !important;
}

/* ==========================================
   ROLL BUTTONS (Primary action buttons)
   ========================================== */

.roll,
#roll-all {
    background-color: var(--theme-primary-bg) !important;
}

.roll:hover,
#roll-all:hover {
    background-color: var(--theme-primary-hover) !important;
}

.roll:active,
#roll-all:active {
    background-color: var(--theme-primary-dark) !important;
}

/* ==========================================
   FOOTER LINKS
   ========================================== */

footer a:link,
footer a:visited {
    color: var(--theme-primary) !important;
}

/* ==========================================
   MISC THEMED ELEMENTS
   ========================================== */

/* Log styling */
.log-line-total b {
    color: var(--theme-primary) !important;
    text-shadow: 
        -1px -1px 0 var(--text-stroke),
        1px -1px 0 var(--text-stroke),
        -1px 1px 0 var(--text-stroke),
        1px 1px 0 var(--text-stroke);
}

/* Shadow disabled */
[data-shadow="off"] .log-line-total b {
    text-shadow: none;
}

/* Division lines in log */
.division-line {
    border-top: 1px solid var(--theme-primary);
}

/* Strikethrough colors for dropped/rerolled dice */
#log-list span[style*="line-through"] {
    color: var(--theme-primary) !important;
}

/* Drag and drop placeholder */
#dice-roller li.drag-over::before,
#dice-list.drag-over-end::after {
    border-color: var(--theme-primary) !important;
    background-color: rgba(var(--theme-primary-rgb, 204, 0, 0), 0.1) !important;
}

/* ==========================================
   NIGHT MODE SPECIFIC OVERRIDES
   ========================================== */

/* Expand icons - white in night mode */
[data-theme="night"] .expand-icon {
    filter: brightness(0) invert(1);
}

/* Input/select hover backgrounds - grey in night mode */
[data-theme="night"] input:hover,
[data-theme="night"] select:hover,
[data-theme="night"] .d-line select:hover,
[data-theme="night"] .d-line input:hover {
    background-color: #555555 !important;
}

/* Line title (.label) hover - grey in night mode */
[data-theme="night"] .label:hover {
    background-color: #555555 !important;
}