@layer commonpub {
/* ===========================================
   CommonPub Agora Theme — Dark (Grove)
   Warm dark surfaces with green-tinted blacks,
   commons green accent, serif display font,
   paper texture, snappy easing.

   Complete design system override — mirrors
   all agora.css component overrides.
   =========================================== */

[data-theme="agora-dark"] {
  /* === SURFACES (grove-tinted warm darks) === */
  --bg: #0d1a12;
  --surface: #141f17;
  --surface2: #1a261e;
  --surface3: #213028;

  --color-surface: var(--surface);
  --color-surface-alt: var(--surface2);
  --color-surface-raised: var(--surface2);
  --color-surface-overlay: rgba(0, 0, 0, 0.7);
  --color-surface-overlay-light: rgba(0, 0, 0, 0.6);
  --color-surface-scrim: rgba(13, 26, 18, 0.85);
  --color-surface-hover: var(--surface3);
  --color-bg-subtle: var(--bg);

  /* === TEXT (warm light on dark) === */
  --text: #e8e8e2;
  --text-dim: #b0b0a6;
  --text-faint: #7a7a72;

  --color-text: var(--text);
  --color-text-secondary: var(--text-dim);
  --color-text-muted: var(--text-faint);
  --color-text-inverse: #0d1a12;
  /* White on the #4aa06e fill is 3.21:1. This matches --color-text-inverse
     above and lands at 5.58:1. See base.css. */
  --color-on-accent: #0d1a12;
  --color-on-red: #0d1a12;  /* 4.82:1 on this theme's --red */
  --color-on-green: #0d1a12;  /* 5.58:1 on this theme's --green */
  --color-on-yellow: #0d1a12;  /* 7.74:1 on this theme's --yellow */
  --color-on-primary: #0d1a12;
  --color-primary-hover: #4aa06e;

  /* === BORDERS (grove-tinted, soft) === */
  --border: rgba(232, 232, 226, 0.15);
  --border2: rgba(232, 232, 226, 0.08);

  --color-border: var(--border2);
  --color-border-strong: var(--border);
  --color-border-focus: var(--accent);

  /* === ACCENT (commons green, brighter for dark bg) === */
  --accent: #4aa06e;
  --accent-bg: rgba(74, 160, 110, 0.12);
  --accent-bg-strong: rgba(74, 160, 110, 0.25);
  --accent-bg-heavy: rgba(74, 160, 110, 0.45);
  --accent-bg-solid: rgba(74, 160, 110, 0.65);
  --accent-border: rgba(74, 160, 110, 0.3);
  --accent-focus-ring: 0 0 0 3px rgba(74, 160, 110, 0.2);
  --shadow-accent: 4px 4px 0 var(--accent);

  --color-primary: var(--accent);
  --color-accent: var(--accent);
  --color-accent-hover: #5ab87e;
  --color-accent-text: #0d1a12;
  --color-primary-text: #0d1a12;
  --color-accent-bg: var(--accent-bg);
  --color-accent-border: var(--accent-border);

  /* === SEMANTIC COLORS (brighter for dark bg) === */
  --green: #4aa06e;
  --green-bg: rgba(74, 160, 110, 0.12);
  --green-border: rgba(74, 160, 110, 0.3);

  --yellow: #daa040;
  --yellow-bg: rgba(218, 160, 64, 0.12);
  --yellow-border: rgba(218, 160, 64, 0.3);

  --red: #d85e55;
  --red-bg: rgba(216, 94, 85, 0.12);
  --red-border: rgba(216, 94, 85, 0.3);

  --purple: #9a7ec4;
  --purple-bg: rgba(154, 126, 196, 0.12);
  --purple-border: rgba(154, 126, 196, 0.3);

  --teal: #3dbcab;
  --teal-bg: rgba(61, 188, 171, 0.12);
  --teal-border: rgba(61, 188, 171, 0.3);

  --pink: #d07090;
  --pink-bg: rgba(208, 112, 144, 0.12);
  --pink-border: rgba(208, 112, 144, 0.3);

  --color-success: var(--green);
  --color-warning: var(--yellow);
  --color-error: var(--red);
  --color-info: #6a9fd0;
  --color-success-bg: var(--green-bg);
  --color-warning-bg: var(--yellow-bg);
  --color-error-bg: var(--red-bg);
  --color-info-bg: rgba(106, 159, 208, 0.12);

  /* === OVERLAYS === */
  --color-badge-overlay: rgba(0, 0, 0, 0.75);

  /* === INTERACTIVE === */
  --color-link: var(--accent);
  --color-link-hover: #5ab87e;

  /* === TYPOGRAPHY (warm, distinctive) === */
  --font-sans: 'Work Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  --font-heading: var(--font-display);
  --font-body: var(--font-sans);

  /* Font Sizes (Agora scale) */
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.375rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  --text-label: 0.625rem;

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.7;
  --leading-relaxed: 1.9;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.16em;

  /* === SHADOWS (softer for dark mode) === */
  --shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 4px 4px 0 rgba(0, 0, 0, 0.4);
  --shadow-lg: 6px 6px 0 rgba(0, 0, 0, 0.4);
  --shadow-xl: 8px 8px 0 rgba(0, 0, 0, 0.4);

  /* === TRANSITIONS (snappy) === */
  --transition-fast: 120ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-default: 250ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* === FOCUS === */
  --focus-ring: 0 0 0 3px rgba(74, 160, 110, 0.25);

  color-scheme: dark;
}
} /* end @layer commonpub — token overrides only */


/* ═══════════════════════════════════════════
   COMPONENT OVERRIDES (outside @layer so they
   beat Vue scoped styles)
   ═══════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   PAPER TEXTURE — darker, grove-tinted
   ═══════════════════════════════════════════ */

[data-theme="agora-dark"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ═══════════════════════════════════════════
   TYPOGRAPHY — Serif headings
   ═══════════════════════════════════════════ */

[data-theme="agora-dark"] h1,
[data-theme="agora-dark"] h2,
[data-theme="agora-dark"] h3 {
  font-family: var(--font-display);
}

[data-theme="agora-dark"] :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* ═══════════════════════════════════════════
   COMPONENT OVERRIDES — mirrors agora.css
   ═══════════════════════════════════════════ */

/* Topbar */
[data-theme="agora-dark"] .cpub-topbar {
  background: var(--surface);
  border-bottom-color: var(--border);
}

[data-theme="agora-dark"] .cpub-site-logo .cpub-logo-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

[data-theme="agora-dark"] .cpub-site-logo .cpub-logo-bracket {
  color: var(--accent);
}

/* Buttons */
[data-theme="agora-dark"] .cpub-btn {
  border-color: var(--border);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

[data-theme="agora-dark"] .cpub-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

[data-theme="agora-dark"] .cpub-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

[data-theme="agora-dark"] .cpub-btn-primary {
  background: var(--accent);
  border-color: #2a6342;
  box-shadow: var(--shadow-md);
}

[data-theme="agora-dark"] .cpub-btn-primary:hover {
  background: #5ab87e;
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}

[data-theme="agora-dark"] .cpub-btn-ghost {
  color: var(--accent);
  border-color: transparent;
}

[data-theme="agora-dark"] .cpub-btn-ghost:hover {
  color: #5ab87e;
  background: var(--accent-bg);
}

/* Cards */
[data-theme="agora-dark"] .cpub-sb-card,
[data-theme="agora-dark"] .cpub-stat-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

[data-theme="agora-dark"] .cpub-content-card {
  border-color: var(--border);
  background: var(--surface);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

[data-theme="agora-dark"] .cpub-content-card:hover {
  border-left-color: var(--accent);
  border-left-width: 4px;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

[data-theme="agora-dark"] .cpub-content-card h3,
[data-theme="agora-dark"] .cpub-content-card .cpub-card-title {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Inputs */
[data-theme="agora-dark"] .cpub-input,
[data-theme="agora-dark"] .cpub-textarea,
[data-theme="agora-dark"] .cpub-select {
  border-color: var(--border);
  background: var(--surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

[data-theme="agora-dark"] .cpub-input:focus,
[data-theme="agora-dark"] .cpub-textarea:focus,
[data-theme="agora-dark"] .cpub-select:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Tags */
[data-theme="agora-dark"] .cpub-tag {
  border-width: 1px;
}

/* Section titles */
[data-theme="agora-dark"] .cpub-section-title-lg,
[data-theme="agora-dark"] .cpub-section-title-sm {
  font-family: var(--font-display);
}

/* Prose */
[data-theme="agora-dark"] .cpub-prose h1,
[data-theme="agora-dark"] .cpub-prose h2,
[data-theme="agora-dark"] .cpub-prose h3,
[data-theme="agora-dark"] .cpub-prose h4 {
  font-family: var(--font-display);
}

[data-theme="agora-dark"] .cpub-prose blockquote {
  border-left-color: var(--accent);
  background: var(--accent-bg);
}

[data-theme="agora-dark"] .cpub-prose a {
  color: var(--accent);
  text-decoration-color: rgba(74, 160, 110, 0.3);
}

/* Admin */
[data-theme="agora-dark"] .admin-brand {
  font-family: var(--font-display);
}

[data-theme="agora-dark"] .admin-nav-link.router-link-exact-active {
  color: var(--accent);
  background: var(--accent-bg);
}

[data-theme="agora-dark"] .admin-badge {
  background: var(--accent);
}

/* Footer */
[data-theme="agora-dark"] .cpub-footer-logo .cpub-logo-name {
  font-family: var(--font-display);
  font-weight: 700;
}


/* ═══════════════════════════════════════════
   CONTENT TYPE BADGE COLORS (Agora dark)
   ═══════════════════════════════════════════ */

[data-theme="agora-dark"] [data-content-type="article"] { --badge-color: #6a9fd0; --badge-bg: rgba(106, 159, 208, 0.12); }
[data-theme="agora-dark"] [data-content-type="blog"] { --badge-color: #4aa06e; --badge-bg: rgba(74, 160, 110, 0.12); }
[data-theme="agora-dark"] [data-content-type="project"] { --badge-color: #9a7ec4; --badge-bg: rgba(154, 126, 196, 0.12); }
[data-theme="agora-dark"] [data-content-type="explainer"] { --badge-color: #3dbcab; --badge-bg: rgba(61, 188, 171, 0.12); }
[data-theme="agora-dark"] [data-content-type="video"] { --badge-color: #d85e55; --badge-bg: rgba(216, 94, 85, 0.12); }
[data-theme="agora-dark"] [data-content-type="tutorial"] { --badge-color: #daa040; --badge-bg: rgba(218, 160, 64, 0.12); }

/* Logo switch */
[data-theme="agora-dark"] .cpub-logo-classic { display: none !important; }
[data-theme="agora-dark"] .cpub-logo-agora { display: flex !important; }

/* Show Town Square logo in hero section */
[data-theme="agora-dark"] .cpub-hero-logo-aside { display: flex !important; align-items: center; justify-content: center; }