:root {
    --bg: #d6d4e0;
    --text: #333;
    --h1-bg: #622569;
    --h1-text: #b8a9c9;
    --accent-teal: #5b9aa0;
    --accent-purple: #622569;
    --date-label: #666;
    --button-bg: #622569;
    --button-text: #b8a9c9;
    --button-disabled-bg: #b7b3c4;
    --button-disabled-text: #e4e2ea;
    --disclaimer: #8a87a0;
    --archive-border: #c3c0d2;
}
:root[data-theme="dark"] {
    --bg: #1e1b26;
    --text: #e6e1f0;
    --h1-bg: #b8a9c9;
    --h1-text: #2a1930;
    --accent-teal: #79c2c8;
    --accent-purple: #c9a8e0;
    --date-label: #a39cb3;
    --button-bg: #8a5fa0;
    --button-text: #f2ecf7;
    --button-disabled-bg: #3a3448;
    --button-disabled-text: #6b647a;
    --disclaimer: #7d7690;
    --archive-border: #3a3448;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 30px 20px;
    box-sizing: border-box;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}
h1 {
    font-size: 5rem;
    color: var(--h1-text);
    margin: 0;
    background-color: var(--h1-bg);
    padding: 30px;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
h2 {
    font-size: 1.8rem;
    color: var(--accent-teal);
    margin: 0 0 20px 0;
    transition: color 0.2s ease;
}
.fade-out {
    animation: fadeOut 4s forwards;
}
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
#clipboard-message {
    font-size: 1rem;
    color: var(--accent-teal);
    margin-top: 20px;
    visibility: hidden;
}
#definition {
    max-width: 32rem;
    margin-top: 24px;
    font-size: 1.1rem;
}
#part-of-speech {
    font-style: italic;
    color: var(--accent-purple);
    margin-right: 6px;
}
#word-number {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--date-label);
}
#day-nav {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
#day-nav button {
    font-size: 1.1rem;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background-color: var(--button-bg);
    color: var(--button-text);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#day-nav button:disabled {
    background-color: var(--button-disabled-bg);
    color: var(--button-disabled-text);
    cursor: default;
}
#tagline {
    font-size: 0.85rem;
    color: var(--accent-teal);
    max-width: 32rem;
    text-align: center;
    margin-top: 28px;
}
#disclaimer {
    font-size: 0.7rem;
    color: var(--disclaimer);
    max-width: 32rem;
    text-align: center;
    margin-top: 14px;
}
.static-nav {
    font-size: 0.8rem;
    margin-top: 14px;
    color: var(--accent-purple);
}
.static-nav a {
    color: var(--accent-purple);
    margin: 0 8px;
}
.archive-list {
    max-width: 36rem;
    margin-top: 20px;
    text-align: left;
}
.archive-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.archive-list li {
    padding: 6px 0;
    border-bottom: 1px solid var(--archive-border);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color 0.2s ease;
}
.archive-list .archive-number {
    color: var(--date-label);
    font-size: 0.85rem;
    white-space: nowrap;
    min-width: 4.5rem;
}
.archive-list a {
    color: var(--accent-purple);
    font-weight: bold;
    text-decoration: none;
    flex: 1;
}
.archive-list a:hover {
    text-decoration: underline;
}
.archive-list .archive-date {
    color: var(--date-label);
    font-size: 0.9rem;
    white-space: nowrap;
}