@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Google Fonts ────────────────────────────────────────────── */


/* ── CSS Variables (Vigil Design Tokens) ────────────────────── */
:root {
  --vigil-accent: #ff6b00;
  --vigil-accent2: #ffd60a;
  --vigil-bg: #0a0a0b;
  --vigil-card: #141415;
  --vigil-txt: #e0e0e0;
  --vigil-muted: rgba(255,255,255,0.45);
  --vigil-dim: rgba(255,255,255,0.25);
  --vigil-border: rgba(255,255,255,0.07);
  --vigil-border-hi: rgba(255,255,255,0.14);
  --vigil-c60: rgba(255,255,255,0.04);
  --vigil-c70: rgba(255,255,255,0.055);
  --font-heading: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --radius: 10px;

  /* shadcn compatible */
  --background: 0 0% 4%;
  --foreground: 0 0% 88%;
  --card: 240 3% 8%;
  --card-foreground: 0 0% 88%;
  --popover: 240 3% 8%;
  --popover-foreground: 0 0% 88%;
  --primary: 24 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 3% 10%;
  --secondary-foreground: 0 0% 88%;
  --muted: 240 3% 12%;
  --muted-foreground: 0 0% 45%;
  --accent: 24 100% 50%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 3% 12%;
  --input: 240 3% 12%;
  --ring: 24 100% 50%;
  --radius: 0.625rem;
}

/* ── Base Resets ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--vigil-bg);
  color: var(--vigil-txt);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }

/* ── Typography ──────────────────────────────────────────────── */
.font-heading { font-family: var(--font-heading); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

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

/* ── Vigil utility classes ───────────────────────────────────── */
.vigil-card {
  background: var(--vigil-card);
  border: 1px solid var(--vigil-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.vigil-card-head {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--vigil-border);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vigil-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vigil-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.38rem 0.9rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.vigil-btn-primary {
  background: var(--vigil-accent);
  color: #fff;
}
.vigil-btn-primary:hover {
  background: color-mix(in srgb, var(--vigil-accent) 85%, #000);
  text-decoration: none;
}

.vigil-btn-ghost {
  background: transparent;
  color: var(--vigil-muted);
  border: 1px solid var(--vigil-border);
}
.vigil-btn-ghost:hover {
  background: var(--vigil-c70);
  color: var(--vigil-txt);
  text-decoration: none;
}

/* ── Accent glow effects ─────────────────────────────────────── */
.accent-glow {
  box-shadow: 0 0 20px color-mix(in srgb, var(--vigil-accent) 30%, transparent);
}

/* ── Input styles ────────────────────────────────────────────── */
.vigil-input {
  width: 100%;
  background: var(--vigil-c70);
  border: 1px solid var(--vigil-border);
  border-radius: 6px;
  color: var(--vigil-txt);
  padding: 0.48rem 0.75rem;
  font-size: 0.9rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.15s;
}
.vigil-input:focus { border-color: var(--vigil-accent); }
.vigil-input::placeholder { color: var(--vigil-dim); }

/* ── Post / Entry body rendering ────────────────────────────── */
.post-body {
  font-size: 0.95rem;
  line-height: 1.7;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.post-body p { margin-bottom: 0.75em; }
.post-body p:last-child { margin-bottom: 0; }
.post-body a { color: var(--vigil-accent); }
.post-body strong { color: #fff; }
.post-body blockquote {
  border-left: 3px solid var(--vigil-accent);
  padding-left: 0.85rem;
  color: var(--vigil-muted);
  margin: 0.75rem 0;
  font-style: italic;
}
.post-body code {
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font-size: 0.85em;
}
.post-body pre {
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  margin: 0.75rem 0;
}
.post-body pre code { background: none; padding: 0; }

/* ── Skeleton loader ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--vigil-c60) 25%,
    var(--vigil-c70) 50%,
    var(--vigil-c60) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Alert / flash ───────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-radius: 6px;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}
.alert-error {
  background: rgba(255,45,85,0.12);
  border: 1px solid rgba(255,45,85,0.3);
  color: #ff4d6d;
}
.alert-success {
  background: rgba(0,230,118,0.1);
  border: 1px solid rgba(0,230,118,0.25);
  color: #00e676;
}
.alert-info {
  background: rgba(96,180,255,0.1);
  border: 1px solid rgba(96,180,255,0.25);
  color: #60b4ff;
}

/* ── Name effects ────────────────────────────────────────────── */
.name-glow { text-shadow: 0 0 8px currentColor; }
.name-gradient { background: linear-gradient(90deg, var(--vigil-accent), var(--vigil-accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.name-rainbow { background: linear-gradient(90deg, #ff6b00, #ffd60a, #00e676, #60b4ff, #c77dff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.name-pulse { animation: namePulse 2s ease-in-out infinite; }
@keyframes namePulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* ── Mobile bottom nav spacing ───────────────────────────────── */
@media (max-width: 768px) {
  .has-mobile-nav { padding-bottom: 64px; }
}