/* design.css — shared tokens and base components for homelab-apps */

/* -- Tokens -- */
:root {
  --bg: #161618;
  --card-bg: #1e1e20;
  --card-border: #2a2a2c;
  --text: #ebebec;
  --text-muted: #9a9a9c;
  --text-dim: #6a6a6c;
  --accent: #7b97aa;
  --accent-dark: #284b63;
  --success: #34d399;
  --danger: #ef4444;
  --warning: #f59e0b;
  --purple: #a78bfa;
  --font-mono: "SF Mono", "IBM Plex Mono", "Fira Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 10px;
  --radius-sm: 6px;
  /* Compatibility aliases — older apps use these names */
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --surface: var(--card-bg);
  --border: var(--card-border);
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

/* -- Reset -- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-mono); font-size: 14px; line-height: 1.5;
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* -- Header -- */
.header { padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md); border-bottom: 1px solid var(--card-border); }
.header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.header .subtitle { margin-top: var(--spacing-xs); font-size: 0.82rem; color: var(--text-muted); font-weight: 400; }

/* -- Card -- */
.card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: var(--spacing-md); }
.card-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: 0.6rem; }
.card-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
.card-title { font-size: 0.78rem; font-weight: 600; color: #ccc; }
.card-body { font-size: 0.78rem; color: var(--text-muted); line-height: 1.55; }
.card-body strong { color: #ccc; font-weight: 600; }

/* -- Button -- */
.btn {
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600;
  padding: 0.65rem 1.25rem; border-radius: var(--radius-sm);
  border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text);
  cursor: pointer; transition: background 0.15s, transform 0.1s; white-space: nowrap;
}
.btn:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--text); }
.btn-primary:hover { background: #3a6b8a; }

/* -- Input -- */
.input {
  width: 100%; padding: 0.65rem 0.85rem;
  font-family: var(--font-mono); font-size: 0.85rem;
  background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text);
  border-radius: var(--radius-sm); outline: none; transition: border-color 0.15s;
}
.input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--text-dim); }

/* -- Error Toast -- */
.error-toast {
  position: fixed; bottom: var(--spacing-lg); left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #2a1215; border: 1px solid var(--danger); color: #f87171;
  padding: 0.6rem 1.2rem; border-radius: var(--radius-sm);
  font-size: 0.75rem; font-family: var(--font-mono);
  z-index: 100; transition: transform 0.3s ease; max-width: 500px;
}
.error-toast.visible { transform: translateX(-50%) translateY(0); }

/* -- Footer -- */
.footer {
  text-align: center; padding: var(--spacing-md);
  font-size: 0.68rem; color: var(--text-dim);
  margin-top: auto; border-top: 1px solid var(--card-border);
}

/* -- Utilities -- */
.visible { display: block; }
.full-width { grid-column: 1 / -1; }

/* ---- Area tags (vault area color coding) ---- */
.area-tag {
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  border: 1px solid;
  opacity: 0.85;
}

.area-genai, .area-resources { color: var(--purple); border-color: #a78bfa40; background: #a78bfa10; }
.area-career, .area-work { color: var(--warning); border-color: #f59e0b40; background: #f59e0b10; }
.area-pe-vc, .area-projects { color: var(--success); border-color: #34d39940; background: #34d39910; }
.area-areas, .area-knowledge { color: #60a5fa; border-color: #60a5fa40; background: #60a5fa10; }
.area-personal, .area-people, .area-life { color: #f472b6; border-color: #f472b640; background: #f472b610; }
.area-archive { color: var(--text-muted); border-color: #9a9a9c40; background: #9a9a9c10; }
.area-daily { color: #fbbf24; border-color: #fbbf2440; background: #fbbf2410; }
.area-snipd { color: #2dd4bf; border-color: #2dd4bf40; background: #2dd4bf10; }
.area-inbox, .area-0-inbox { color: #fb923c; border-color: #fb923c40; background: #fb923c10; }
.area-root, .area-docs, .area-specs, .area-artifacts, .area-notes, .area-planning, .area-output, .area-scripts {
  color: #94a3b8; border-color: #94a3b840; background: #94a3b810;
}

/* -- Responsive -- */
@media (max-width: 700px) {
  .header { padding: var(--spacing-md) var(--spacing-md) 0.75rem; }
  .footer { padding: 0.75rem var(--spacing-md); }
}