/* ============================================================
   MOLEHOLE — VoltAgent Design System
   Source: VoltAgent/awesome-design-md DESIGN.md
   ============================================================ */

:root {
  /* Canvas */
  --canvas:        #101010;
  --canvas-soft:   #1a1a1a;

  /* Accent — primary CTAs + active status ONLY */
  --accent:        #00d992;
  --accent-soft:   #2fd6a1;
  --accent-deep:   #10b981;
  --on-accent:     #101010;
  --accent-dim:    rgba(0, 217, 146, 0.08);
  --accent-border: rgba(0, 217, 146, 0.20);

  /* Text */
  --ink:           #f2f2f2;
  --ink-strong:    #ffffff;
  --body:          #bdbdbd;
  --mute:          #8b949e;

  /* Structure */
  --hairline:      #3d3a39;
  --hairline-soft: #5a5654;

  /* Spacing (4px base) */
  --space-xxs: 2px;  --space-xs: 4px;   --space-sm: 8px;
  --space-md: 12px;  --space-lg: 16px;  --space-xl: 20px;
  --space-2xl: 24px; --space-3xl: 32px; --space-4xl: 40px;
  --space-5xl: 48px; --space-6xl: 64px;

  /* Radius */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
  --radius-lg: 12px; --radius-pill: 9999px;

  /* Layout */
  --header-height: 56px;
  --container-max: 1100px;
  --transition: 0.15s ease;

  /* Fonts */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* ---- Back-compat aliases (so un-migrated scoped styles stay coherent) ---- */
  --text-1: var(--ink);            --text-2: var(--body);        --text-3: var(--mute);
  --text-primary: var(--ink);      --text-secondary: var(--body);--text-muted: var(--mute);
  --bg-base: var(--canvas);        --bg-body: var(--canvas);     --bg-surface: var(--canvas-soft);
  --bg-elevated: var(--canvas-soft);--bg-card: var(--canvas-soft);--bg-secondary: var(--canvas-soft);
  --bg-sidebar: var(--canvas);
  --border: var(--hairline);       --border-raw: var(--hairline);--border-strong: var(--hairline-soft);
  --brand-primary: var(--accent);  --brand-secondary: var(--accent-soft);
  --btn-primary: var(--accent);    --btn-primary-hover: var(--accent-soft);
  --btn-secondary: transparent;    --primary: var(--accent);     --primary-hover: var(--accent-soft);
  --accent-2: var(--accent);       --accent-hover: var(--accent-soft);
  --accent-glow: transparent;      --accent-2-glow: transparent;
  --glass-bg: var(--canvas-soft);  --glass-border: var(--hairline);
  --glass-shadow: none;            --glass-inner: none;
  --font-display: var(--font-body);--font-main: var(--font-body);
  --success: #4ade80; --warning: #fbbf24; --danger: #f87171;
  --radius-md-legacy: 14px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--body);
  font-size: 1rem;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-soft); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }

/* --- Typography --- */
h1, h2, h3, h4 { color: var(--ink-strong); }
h1 { font-size: clamp(2.5rem, 1.5rem + 2.5vw, 3.75rem); font-weight: 400; letter-spacing: -0.65px; line-height: 1.0; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); font-weight: 400; letter-spacing: -0.9px; line-height: 1.11; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); font-weight: 700; letter-spacing: -0.6px; line-height: 1.33; }
h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
p  { color: var(--body); line-height: 1.75; }
p + p { margin-top: var(--space-md); }
ul, ol { padding-left: 1.4rem; color: var(--body); line-height: 1.75; }
li + li { margin-top: var(--space-xs); }

/* --- Accessibility --- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Layout --- */
.app-container { display: flex; flex-direction: column; min-height: 100vh; }
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-lg); }
@media (width >= 768px) { .container { padding-inline: var(--space-2xl); } }

.main-wrapper {
  width: 100%; max-width: var(--container-max);
  margin: var(--header-height) auto 0;
  display: flex;
}
.content { flex: 1; min-width: 0; padding: var(--space-2xl) var(--space-lg) var(--space-6xl); }
@media (width >= 768px) { .content { padding-inline: var(--space-2xl); } }

.section-pad { padding-block: var(--space-6xl); }

/* --- Eyebrow --- */
.eyebrow {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 2.52px;
  text-transform: uppercase; color: var(--mute);
}
.eyebrow::before {
  content: ''; display: inline-block; width: 20px; height: 1px;
  background: var(--accent); flex-shrink: 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.5;
  min-height: 48px; cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-soft); color: var(--on-accent); }
.btn-outline { background: var(--canvas); color: var(--ink); border-color: var(--hairline); }
.btn-outline:hover { border-color: var(--hairline-soft); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--accent-soft); }
.btn-ghost:hover { color: var(--accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }

/* --- Card --- */
.card {
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  transition: border-color var(--transition);
}
.card:hover { border-color: var(--accent-border); }

/* --- Mono chip --- */
.mono-chip {
  font-family: var(--font-mono); font-size: 0.8125rem;
  color: var(--accent-soft); background: var(--accent-dim);
  border: 1px solid var(--accent-border); border-radius: var(--radius-sm);
  padding: var(--space-xxs) var(--space-sm); display: inline-block; word-break: break-all;
}

/* --- Sidebar (guide pages) --- */
.sidebar {
  display: none; width: 220px; flex-shrink: 0;
  position: sticky; top: var(--header-height);
  max-height: calc(100vh - var(--header-height)); overflow-y: auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-2xl) 0;
}
@media (width >= 768px) { .sidebar { display: block; } }
@media (width >= 1024px) { .sidebar { width: 240px; } }
.nav-list { list-style: none; padding: 0; border-left: 1px solid var(--hairline); }
.nav-item { margin: 0; }
.nav-link {
  display: block; padding: var(--space-sm) var(--space-lg);
  margin-left: -1px; font-size: 0.875rem; color: var(--body);
  border-left: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink-strong); border-left-color: var(--accent); font-weight: 500; }

/* --- FAQ (details) --- */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  list-style: none; cursor: pointer; min-height: 48px;
  padding: var(--space-lg) 0; font-weight: 600; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  transition: color var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; color: var(--accent); font-size: 1.4rem; line-height: 1; flex-shrink: 0;
  transition: transform var(--transition);
}
.faq-item[open] summary { color: var(--accent); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 0 var(--space-lg); color: var(--body); line-height: 1.75; }

/* --- Legal / Policy pages --- */
.policy-header { margin-bottom: var(--space-5xl); border-bottom: 1px solid var(--hairline); padding-bottom: var(--space-3xl); }
.policy-title { font-weight: 400; letter-spacing: -0.65px; margin-bottom: var(--space-lg); }
.policy-meta { color: var(--mute); font-size: 0.95rem; display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.badge {
  background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-border);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  font-size: 0.8rem; font-weight: 600;
}
section { margin-bottom: var(--space-6xl); scroll-margin-top: calc(var(--header-height) + var(--space-2xl)); }
.section-title { font-size: 1.5rem; font-weight: 700; color: var(--ink-strong); margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-md); }
.section-number { color: var(--accent); font-variant-numeric: tabular-nums; }
.list-legal { list-style: none; padding-left: 0; }
.list-legal li { position: relative; padding-left: var(--space-xl); }
.list-legal li::before { content: '•'; color: var(--accent); position: absolute; left: 0; font-weight: bold; }
.info-card { background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-2xl); margin-bottom: var(--space-2xl); }
.info-card-title { font-weight: 600; color: var(--ink); margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); }
.contact-link { color: var(--accent-soft); font-weight: 500; word-break: break-all; }
.warning-box { background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.25); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-2xl); color: #fca5a5; margin-top: var(--space-lg); }

/* --- Footer --- */
.footer { margin-top: auto; border-top: 1px solid var(--hairline); padding: var(--space-4xl) var(--space-lg); color: var(--mute); font-size: 0.875rem; background: var(--canvas); }
.footer-content { max-width: var(--container-max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }
.footer-link { color: var(--mute); transition: color var(--transition); }
.footer-link:hover { color: var(--ink); }
.footer-divider { color: var(--hairline-soft); }
.footer-nav { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; justify-content: center; }
.copyright { margin: 0; text-align: center; color: var(--mute); }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}