/* SnapCrest — Editorial Technical Light/Dark */
:root {
  --bg: #ffffff;
  --bg-2: #f4f4f5;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --border: #e4e4e7;
  --border-2: #d4d4d8;
  --text: #09090b;
  --muted: #71717a;
  --dim: #a1a1aa;
  --faint: #e4e4e7;

  --indigo: #6366f1;
  --violet: #8b5cf6;
  --indigo-dim: #4f46e5;
  --success: #22c55e;
  --amber: #f59e0b;
  --error: #ef4444;

  --grad: linear-gradient(92deg, #6366f1 0%, #8b5cf6 100%);

  --font-display: "Instrument Serif", Georgia, serif;
  --font-sans: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.05),
                 0 12px 32px -12px rgba(99,102,241,0.15);
  --shadow-glow: 0 0 0 1px rgba(99,102,241,0.2),
                 0 0 24px -6px rgba(99,102,241,0.25);
}

.dark {
  --bg: #09090b;
  --bg-2: #0e0e11;
  --surface: #141417;
  --surface-2: #1a1a1f;
  --border: #232329;
  --border-2: #2d2d35;
  --text: #fafafa;
  --muted: #a1a1aa;
  --dim: #71717a;
  --faint: #52525b;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset,
                 0 24px 48px -24px rgba(99,102,241,0.18),
                 0 8px 24px -12px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 1px rgba(99,102,241,0.4),
                 0 0 48px -12px rgba(99,102,241,0.5),
                 0 24px 48px -24px rgba(139,92,246,0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* grain overlay helper */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.04;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* mono label */
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
}

/* utility: gradient text */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* serif display */
.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
.serif-italic { font-family: var(--font-display); font-style: italic; }

/* pill button */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.pill:hover { border-color: var(--border-2); background: var(--surface-2); }
.pill-primary {
  background: var(--grad);
  border: 1px solid rgba(139,92,246,0.5);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(99,102,241,0.3),
              0 8px 32px -8px rgba(99,102,241,0.6),
              inset 0 1px 0 rgba(255,255,255,0.2);
}
.pill-primary:hover {
  box-shadow: 0 0 0 1px rgba(99,102,241,0.5),
              0 8px 40px -4px rgba(99,102,241,0.8),
              inset 0 1px 0 rgba(255,255,255,0.25);
}
.pill-ghost {
  background: transparent;
  border: 1px solid var(--border-2);
}

/* card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  position: relative;
}
.card-glow {
  box-shadow: var(--shadow-card);
}

/* striped placeholder (for screenshot placeholders) */
.stripe-placeholder {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.04) 100%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.02) 0 12px,
      transparent 12px 24px);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* focus ring */
.glow-ring {
  box-shadow: 0 0 0 1px rgba(99,102,241,0.4),
              0 0 40px -8px rgba(99,102,241,0.5);
}

/* scrollbar tidy */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* hover states marker */
[data-hover]:hover {
  outline: 1px dashed rgba(99,102,241,0.5);
  outline-offset: 2px;
}