/* Heyuri Aqua Dark CSS */

:root {
    /* -- Dark Aqua Pool Palette  -- */
    --color-bg-main: #0a2a2f;  /* Very Dark Desaturated Cyan */
    --color-fg-main: #e0f2f7;  /* Very Light Cyan for text */
    --color-fg-link: #26c6da;  /* Bright Cyan for links */
    --color-fg-link-hover: #80deea;  /* Lighter Cyan for hover */
    --color-bg-boardlist: #103a40;  /* Dark Cyan, slightly lighter than main bg */
    --color-fg-boardlist: var(--color-fg-main);
    --color-bg-theading: #004c54;  /* Dark Teal - for prominent headers */
    --color-bg-theading2: #005662; /* Slightly Lighter Dark Teal */
    --color-bg-theading3: #006064; /* Original Deep Teal, now a lighter bg accent */
    --color-bg-postblock: #1c3f4a;  /* Dark Desaturated Cyan/Blue, lighter than main bg */
    --color-fg-title: #b2ebf2;  /* Light Cyan */
    --color-fg-name: #80deea;  /* Lighter Cyan (same as link hover) */
    --color-fg-warning: #ff6b6b;  /* Bright Red for warnings */
    --color-fg-warning-ip: #ff6b6b;
    --color-fg-quote: #4dd0e1;  /* Medium-Light Cyan for quote text */
    --color-fg-quote2: #80deea; /* Light Aqua for quote icon or secondary quote text */
    --color-bg-reply: #0f3038;  /* Dark Cyan, very close to main bg but distinct */
    --color-bg-reply-hl: #1a4a52;  /* Highlighted reply, slightly lighter */
    --color-hi-contrast-border: #267d85;  /* Medium Teal for distinct borders */
    --color-lo-contrast-border: #154046; /* Darker Teal for subtle borders */
    --color-fg-logo: #b2ebf2;
    --color-fg-global-message: #80deea;
    --color-bg-window-item-highlight: #1a4a52;
    --color-bg-postlists-header: #004c54; /* Same as theading */
    --color-fg-postlists-header: #e0f7fa;
    --color-fg-postlists-header-link: #ffffff; /* Pure white for max contrast here */
    --color-bg-postlists-odd: #0f3038; /* Same as reply bg */
    --color-bg-postlists-even: #143f47; /* Slightly lighter for striping */
    --font-family-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-main: 0.875em;
}

/* General body styles for dark theme */
body {
    background-color: var(--color-bg-main);
    color: var(--color-fg-main);
}

a {
    color: var(--color-fg-link);
}
a:hover {
    color: var(--color-fg-link-hover);
}


/* -- Logo -- */
.logo:after {
       content: "";
       font-size: 2.5em;
       animation: change-emoji 14s infinite;
}
/* -- Randomly Cycle through some Emojis for Decoration --*/
@keyframes change-emoji {
    0% { content: ""; }   /* Fish */
    25% { content: ""; }  /* Tropical fish */
    50% { content: ""; }  /* Wave */
    75% { content: "💧"; }  /* Droplet */
    100% { content: "🐡"; } /* Blowfish */
}
/* Make emoji slightly brighter if needed, or add a subtle glow */
.logo:after {
    filter: brightness(1.2); /* Optional: makes emoji pop a bit more */
}


/*Badges for Users*/
.name:before {
    content: " "; /* Keep as is unless specific badge styling is needed */
}


/* -- Content Boxes -- */
.theading, .theading2, .theading3,
.neomenuTopLevel, .detailsbox, .postblock, .reply, .window {
    border: 2px solid var(--color-hi-contrast-border);
    background: var(--color-bg-theading); /* Default background for these, can be overridden */
    /* For dark theme, the inner shadow should be subtle and dark, or a light glow */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0,0,0,0.3);
}

/* Specific backgrounds if different from theading default */
.theading2 { background: var(--color-bg-theading2); }
.theading3 { background: var(--color-bg-theading3); }
.postblock { background: var(--color-bg-postblock); }
.reply { background: var(--color-bg-reply); }


/* -- Buttons -- */
button {
    background: linear-gradient(to bottom, #00838f, #006064); /* Darker teal gradient */
    border: 1px solid var(--color-fg-link-hover); /* Brighter border for pop */
    color: var(--color-fg-main); /* Light text */
    border-radius: 3px;
    padding: 0.25em 1em;
    transition: all 0.2s;
    font-weight: bold;
}

button:hover {
    background: linear-gradient(to bottom, #0097a7, #00838f); /* Slightly lighter on hover */
    border-color: #b2ebf2;
}

/* -- inputs -- */
input[type="text"], input[type="password"], textarea, select {
    background: var(--color-bg-reply); /* Dark background */
    border: 2px solid var(--color-hi-contrast-border);
    color: var(--color-fg-main); /* Light text */
    padding: 0.3em;
    border-radius: 3px;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    border-color: var(--color-fg-link);
    outline: none;
    box-shadow: 0 0 5px rgba(var(--color-fg-link-rgb, 38, 198, 218), 0.5); /* Define --color-fg-link-rgb if you want to use it often */
}

blockquote {
    border-left: 3px solid var(--color-fg-quote);
    padding-left: 10px;
    margin-left: 5px;
    color: var(--color-fg-quote); /* Text inside blockquote */
}

blockquote:before {
    content: "❝";
    color: var(--color-fg-quote2); /* Use a brighter color for the quote mark */
    opacity: 0.7; /* Adjust opacity for visibility */
    font-size: 1.5em;
    margin-right: 5px;
    vertical-align: -0.3em;
    float: left; /* Optional: for better alignment */
    line-height: 1; /* Optional: for better alignment */
}