/* ==========================================================================
   Libkyn — Design Tokens
   Shared across index (marketing/login), app (feed), and admin dashboard.
   ========================================================================== */

:root {
  /* ---- Brand core ---- */
  --plum-950: #1a0d18;
  --plum-900: #241220;
  --plum-800: #2f1a2b;
  --plum-700: #3f2438;
  --plum-600: #55304c;
  --plum-500: #6f4064;

  --gold-300: #f3ddb0;
  --gold-400: #ecc98c;
  --gold-500: #d9a769;
  --gold-600: #c68f4f;

  --berry-400: #cf7a95;
  --berry-500: #b85c7a;
  --berry-600: #9c4665;

  --off-white: #f6efe8;
  --paper: #fbf7f3;
  --cream-100: #f3ece4;
  --cream-200: #ece2d7;

  /* ---- Neutrals (warm-tinted, not pure gray) ---- */
  --ink-900: #241220;
  --ink-700: #4a3f47;
  --ink-500: #7a6d74;
  --ink-300: #b3a6ac;
  --ink-200: #ddd2d6;
  --ink-100: #ece4e7;

  /* ---- Gradients ---- */
  --grad-brand: linear-gradient(160deg, var(--plum-900), var(--plum-700));
  --grad-accent: linear-gradient(135deg, var(--gold-400), var(--berry-500));

  /* ---- Status (fixed — never themed, per brand data-viz standard) ---- */
  --status-good: #0ca30c;
  --status-good-bg: #e8f6e8;
  --status-warning: #c98500;
  --status-warning-bg: #fbf0da;
  --status-serious: #ec835a;
  --status-serious-bg: #fce9e0;
  --status-critical: #d03b3b;
  --status-critical-bg: #fbe6e6;

  /* ---- Chart chrome (light surface, per dataviz skill) ---- */
  --chart-surface: #fcfcfb;
  --chart-grid: #e1e0d9;
  --chart-axis: #c3c2b7;
  --chart-muted: #898781;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(36,18,32,0.06), 0 1px 1px rgba(36,18,32,0.04);
  --shadow-md: 0 2px 8px rgba(36,18,32,0.08), 0 1px 2px rgba(36,18,32,0.06);
  --shadow-lg: 0 12px 32px rgba(36,18,32,0.14), 0 2px 6px rgba(36,18,32,0.08);
  --shadow-gold: 0 8px 24px rgba(201,143,79,0.25);

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  /* ---- Type ---- */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--cream-100);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* ---- Reusable primitives ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--grad-accent);
  color: var(--plum-950);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover { box-shadow: 0 10px 28px rgba(201,143,79,0.35); }

.btn-ghost {
  background: transparent;
  color: var(--off-white);
  border: 1.5px solid rgba(246,239,232,0.35);
}
.btn-ghost:hover { border-color: rgba(246,239,232,0.6); }

.btn-outline {
  background: #fff;
  color: var(--plum-900);
  border: 1.5px solid var(--ink-200);
}
.btn-outline:hover { border-color: var(--plum-500); }

.btn-sm { padding: 8px 16px; font-size: 13px; }

.card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(36,18,32,0.05);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-display);
}
.pill-good { background: var(--status-good-bg); color: var(--status-good); }
.pill-warning { background: var(--status-warning-bg); color: var(--status-warning); }
.pill-serious { background: var(--status-serious-bg); color: var(--status-serious); }
.pill-critical { background: var(--status-critical-bg); color: var(--status-critical); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.avatar {
  border-radius: 50%;
  background: var(--grad-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--plum-950);
  flex-shrink: 0;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* ---- Brand mark (inline, reused via <use>) ---- */
.brand-row { display: flex; align-items: center; gap: 10px; }
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.01em;
}