:root {
--bg: #000000;
--surface: #0b0b0b;
--text: #ffffff;
--muted: #b3b3b3;

/* Accent colors */
--accent-blue: #2f7cff;
--accent-yellow: #ffd84d;

/* Derived tokens */
--border: color-mix(in oklch, var(--text) 15%, transparent);
--focus: var(--accent-blue);

/* Layout spacing */
--padding: 2rem;
--radius: 1rem;
--space: clamp(1rem, 4vw, 2rem);
}


* { box-sizing: border-box; }

body {
margin: 0;
padding: var(--padding);
background: var(--bg);
color: var(--text);
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
}

img { max-width: 100%; }

main {
max-width: 900px;
margin: auto;
padding: var(--space);
container-type: inline-size;
}

header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 2rem;
}

header h1 { margin: 0; }


.composer {
background: var(--surface);
padding: var(--space);
border-radius: var(--radius);
margin-bottom: 2rem;
box-shadow: 0 10px 30px oklch(0% 0 0 / 0.05);
}

.composer input,
.composer textarea {
width: 100%;
padding: .75rem;
margin-bottom: .75rem;
font: inherit;
border-radius: .5rem;
border: 1px solid oklch(80% 0.02 260);
}

.composer button {
background: var(--accent-blue);
color: white;
border: none;
padding: .6rem 1rem;
border-radius: 999px;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}

.composer button:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px color-mix(in oklch, var(--accent-blue) 30%, transparent);
}

.composer button:active {
transform: translateY(0);
}


.posts {
display: grid;
gap: 1.5rem;
}

article {
background: var(--surface);
border-radius: var(--radius);
padding: var(--space);
animation: fade-in .3s ease both;
}

article header {
display: block;
margin-bottom: .5rem;
}

article h2 { margin: 0 0 .25rem 0; color: var(--accent-yellow); }

article time {
font-size: .85rem;
color: color-mix(in oklch, var(--accent-yellow) 60%, var(--muted));
}

article p { margin-top: 1rem; }


.comments {
margin-top: 1.5rem;
border-top: 1px dashed color-mix(in oklch, var(--accent-yellow) 40%, transparent);
padding-top: 1rem;
}

.comments ul {
list-style: none;
padding: 0;
display: grid;
gap: .5rem;
}

.comments li {
background: color-mix(in oklch, var(--accent-yellow) 8%, var(--surface));
padding: .5rem .75rem;
border-radius: .5rem;
font-size: .9rem;
}

article:not(:has(.comments li)) .comments {
opacity: .6;
}


@keyframes fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}

/*
Container Queries
*/
@container (max-width: 600px) {
header {
flex-direction: column;
gap: .5rem;
}
}