/* base.css — shared styles across all rad.typo templates */

:root {
    --bg-color: #fff;
    --text-color: #000;
    --link-color: #0000FF;
    --secondary-color: #666;
}

body {
    font-family: monospace;
    max-width: 800px;
    margin: 48px auto;
    padding: 24px;
    line-height: 1.6;
    background-color: var(--bg-color);
    color: var(--text-color);
}

h1, h2 { margin: 0; padding: 0; }
h1 { font-size: 24px; margin-bottom: 24px; }

a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }

.header { margin-bottom: 30px; position: relative; }
.back { position: absolute; top: 0; right: 0; font-size: 14px; }
.site-title { color: inherit; text-decoration: none; }
.site-title:hover { text-decoration: none; }

.status { color: var(--secondary-color); font-size: 14px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.breathing-dots::after {
    content: '';
    animation: breathe 4s infinite;
}
@keyframes breathe {
    0%, 100% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

.kp-circle {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--kp-color, #2ecc71);
    transition: background 0.5s ease;
    display: inline-block;
}

.footer {
    margin-top: 60px; padding-top: 20px;
    border-top: 1px solid var(--secondary-color);
    font-size: 14px; color: var(--secondary-color);
}
.footer a { color: var(--secondary-color); }

@media (max-width: 600px) {
    body { margin: 20px auto; padding: 15px; }
}