/* ─── Terre Atelier — Design Tokens ─── */

:root {
  /* Surfaces */
  --bg-page: #1e231e;
  --bg-surface: #141914;
  --bg-elevated: #202520;
  --bg-overlay: #252a25;
  --border: #4c4d4766;
  --border-subtle: #4c4d4744;
  --border-focused: #77b5e1cc;

  /* Text */
  --text-primary: #cecdc6;
  --text-secondary: #a09e94;
  --text-muted: #908f87;

  /* Accents */
  --accent-sky: #77b5e1;
  --accent-amber: #df9c6f;
  --accent-stone: #918f81;
  --accent-sage: #7ab486;
  --accent-teal: #68b3b3;
  --accent-plum: #bf96c9;
  --accent-gold: #d7b15f;
  --accent-rose: #c488b0;

  /* Semantic */
  --color-error: #df605b;
  --color-warning: #e2ad4a;
  --color-success: #68b082;
  --color-info: #6fa5cb;

  /* Tag chip active states — dark */
  --tag-sky-bg: #77b5e11a;
  --tag-sky-border: #77b5e166;
  --tag-sky-text: #77b5e1;
  --tag-sage-bg: #7ab4861a;
  --tag-sage-border: #7ab48666;
  --tag-sage-text: #7ab486;
  --tag-amber-bg: #df9c6f1a;
  --tag-amber-border: #df9c6f66;
  --tag-amber-text: #df9c6f;
  --tag-teal-bg: #68b3b31a;
  --tag-teal-border: #68b3b366;
  --tag-teal-text: #68b3b3;
  --tag-plum-bg: #bf96c91a;
  --tag-plum-border: #bf96c966;
  --tag-plum-text: #bf96c9;
  --tag-gold-bg: #d7b15f1a;
  --tag-gold-border: #d7b15f66;
  --tag-gold-text: #d7b15f;
  --tag-rose-bg: #c488b01a;
  --tag-rose-border: #c488b066;
  --tag-rose-text: #c488b0;

  /* Typography */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  /* Layout */
  --max-width: 700px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --page-gutter: 1rem;
  --transition-fast: 150ms;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-page: #dbdfd7;
    --bg-surface: #ecefea;
    --bg-elevated: #dee2da;
    --bg-overlay: #d5d8d2;
    --border: #a5a49d66;
    --border-subtle: #a5a49d44;
    --border-focused: #2b628ccc;

    --text-primary: #3e3931;
    --text-secondary: #635c51;
    --text-muted: #5e5a52;

    --accent-sky: #2b628c;
    --accent-amber: #8e5124;
    --accent-stone: #747264;
    --accent-sage: #22633e;
    --accent-teal: #00676c;
    --accent-plum: #6b4374;
    --accent-gold: #7e5d00;
    --accent-rose: #713860;

    --color-error: #a4292a;
    --color-warning: #7a5600;
    --color-success: #226d43;
    --color-info: #2d6386;

    --tag-sky-bg: #2b628c1a;
    --tag-sky-border: #2b628c66;
    --tag-sky-text: #2b628c;
    --tag-sage-bg: #22633e1a;
    --tag-sage-border: #22633e66;
    --tag-sage-text: #22633e;
    --tag-amber-bg: #8e51241a;
    --tag-amber-border: #8e512466;
    --tag-amber-text: #8e5124;
    --tag-teal-bg: #00676c1a;
    --tag-teal-border: #00676c66;
    --tag-teal-text: #00676c;
    --tag-plum-bg: #6b43741a;
    --tag-plum-border: #6b437466;
    --tag-plum-text: #6b4374;
    --tag-gold-bg: #7e5d001a;
    --tag-gold-border: #7e5d0066;
    --tag-gold-text: #7e5d00;
    --tag-rose-bg: #7138601a;
    --tag-rose-border: #71386066;
    --tag-rose-text: #713860;
  }
}

/* ─── Reset & Base ─── */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-surface);
}

a {
  color: var(--accent-sky);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  text-decoration: underline;
}

/* ─── Layout ─── */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--page-gutter);
}

/* ─── Header: Terminal Prompt ─── */

header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.term-line {
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.term-prompt {
  color: var(--accent-sage);
}

.term-cmd {
  color: var(--text-primary);
}

.term-title {
  color: var(--accent-sky);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.3;
  margin-bottom: var(--space-1);
}

.term-output {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.term-links {
  font-size: var(--fs-sm);
}

.term-links a {
  color: var(--accent-teal);
}

.term-cursor {
  display: inline-block;
  width: 0.5em;
  height: 1.1em;
  background: var(--accent-amber);
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ─── Filters ─── */

.filters {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

#tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag-chip {
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  user-select: none;
}

.tag-chip:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

/* Tag chip active states — per accent */
.tag-chip.active { background: var(--tag-sky-bg); border-color: var(--tag-sky-border); color: var(--tag-sky-text); }
.tag-chip.active[data-accent="sage"] { background: var(--tag-sage-bg); border-color: var(--tag-sage-border); color: var(--tag-sage-text); }
.tag-chip.active[data-accent="amber"] { background: var(--tag-amber-bg); border-color: var(--tag-amber-border); color: var(--tag-amber-text); }
.tag-chip.active[data-accent="teal"] { background: var(--tag-teal-bg); border-color: var(--tag-teal-border); color: var(--tag-teal-text); }
.tag-chip.active[data-accent="plum"] { background: var(--tag-plum-bg); border-color: var(--tag-plum-border); color: var(--tag-plum-text); }
.tag-chip.active[data-accent="gold"] { background: var(--tag-gold-bg); border-color: var(--tag-gold-border); color: var(--tag-gold-text); }
.tag-chip.active[data-accent="rose"] { background: var(--tag-rose-bg); border-color: var(--tag-rose-border); color: var(--tag-rose-text); }

#keyword-search {
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  color: var(--text-primary);
  outline: none;
  flex: 1;
  min-width: 180px;
  transition: border-color var(--transition-fast);
}

#keyword-search::placeholder {
  color: var(--text-muted);
}

#keyword-search:focus {
  border-color: var(--border-focused);
}

/* ─── Articles ─── */

.article {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.article:last-child {
  border-bottom: none;
}

.article-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--space-2);
}

.article-title a {
  color: var(--accent-sky);
  text-decoration: none;
}

.article-title a:hover {
  text-decoration: underline;
}

.article-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: var(--space-2);
}

.article-meta .source {
  color: var(--text-secondary);
}

.article-meta .tag {
  color: var(--accent-gold);
}

.article-abstract {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Load More ─── */

.load-more-wrapper {
  padding: var(--space-5) 0;
}

#load-more {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

#load-more:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

/* ─── Footer ─── */

footer {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  padding-top: var(--space-3);
}