/**
* Topic Preview - Silver and Black Theme
*
* Color schema:
* Light mode:
* backgrounds: #ffffff (white for clean look)
* borders:     #a5acaf (silver)
* box shadows: #00000033 (black with opacity for subtlety)
* font colors: #000000 (black)
* 
* Dark mode:
* backgrounds: #1a1a1a (dark gray for contrast)
* borders:     #a5acaf (silver)
* box shadows: #00000066 (darker shadow)
* font colors: #ffffff (white for readability)
*/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
@import url("light.css");

.topic_preview_container {
    font-family: 'Lato', Verdana, Helvetica, Arial, sans-serif;
    background: #ffffff; /* Light mode background */
    border: 1px solid #a5acaf; /* Silver border */
    box-shadow: 0 4px 8px #00000033; /* Subtle black shadow */
    color: #000000; /* Black text */
    transition: background 0.3s, color 0.3s; /* Smooth transition for mode switch */
}

/* Dark mode styles */
html.darkmode .topic_preview_container {
    background: #1a1a1a; /* Dark background */
    color: #ffffff; /* White text for contrast */
    box-shadow: 0 4px 8px #00000066; /* Darker shadow */
}

.topic_preview_container:before {
    /* Upper Triangle */
    background: #ffffff; /* Matches light mode */
    border-top: 1px solid #a5acaf; /* Silver */
    border-right: 1px solid #a5acaf;
}

html.darkmode .topic_preview_container:before {
    background: #1a1a1a; /* Matches dark mode */
}

.topic_preview_container.invert:after {
    /* Lower Triangle */
    background: #ffffff; /* Matches light mode */
    border-bottom: 1px solid #a5acaf; /* Silver */
    border-left: 1px solid #a5acaf;
}

html.darkmode .topic_preview_container.invert:after {
    background: #1a1a1a; /* Matches dark mode */
}

.topic_preview_avatar img {
    border: solid 1px #a5acaf; /* Silver border */
}