@commonpub/layer 0.4.0 → 0.4.2

package/components/SiteLogo.vue

@@ -1,7 +1,30 @@
+<script setup lang="ts">
+const { themeId } = useTheme();
+const isAgora = computed(() => themeId.value === 'agora' || themeId.value === 'agora-dark');
+</script>
+
 <template>
   <span class="cpub-site-logo">
-    <span class="cpub-logo-bracket">[</span>C<span class="cpub-logo-bracket">]</span>
-    <span class="cpub-logo-name">CommonPub</span>
+    <template v-if="isAgora">
+      <!-- Town Square mark: 4 blocks + green center -->
+      <svg class="cpub-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="22" height="22" aria-hidden="true">
+        <rect x="18" y="18" width="72" height="72" fill="none" stroke="currentColor" stroke-width="7" stroke-linejoin="round"/>
+        <rect x="110" y="18" width="72" height="72" fill="none" stroke="currentColor" stroke-width="7" stroke-linejoin="round"/>
+        <rect x="18" y="110" width="72" height="72" fill="none" stroke="currentColor" stroke-width="7" stroke-linejoin="round"/>
+        <rect x="110" y="110" width="72" height="72" fill="none" stroke="currentColor" stroke-width="7" stroke-linejoin="round"/>
+        <rect x="88" y="88" width="24" height="24" fill="var(--accent, #3d8b5e)"/>
+        <!-- Content lines: 1 green accent per block -->
+        <line x1="34" y1="54" x2="72" y2="54" stroke="var(--accent, #3d8b5e)" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
+        <line x1="128" y1="46" x2="166" y2="46" stroke="var(--accent, #3d8b5e)" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
+        <line x1="34" y1="148" x2="68" y2="148" stroke="var(--accent, #3d8b5e)" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
+        <line x1="128" y1="142" x2="162" y2="142" stroke="var(--accent, #3d8b5e)" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
+      </svg>
+      <span class="cpub-logo-name cpub-logo-name--agora">Common<span class="cpub-logo-pub">Pub</span></span>
+    </template>
+    <template v-else>
+      <span class="cpub-logo-bracket">[</span>C<span class="cpub-logo-bracket">]</span>
+      <span class="cpub-logo-name">CommonPub</span>
+    </template>
   </span>
 </template>
 
@@ -18,4 +41,20 @@
 }
 .cpub-logo-bracket { color: var(--accent); font-size: 15px; }
 .cpub-logo-name { margin-left: 2px; }
+
+/* Agora wordmark */
+.cpub-logo-mark {
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+.cpub-logo-name--agora {
+  font-family: var(--font-display, var(--font-heading));
+  font-weight: 700;
+  font-size: 16px;
+  letter-spacing: -0.02em;
+  margin-left: 0;
+}
+.cpub-logo-pub {
+  color: var(--accent);
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,15 +50,15 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/config": "0.8.0",
     "@commonpub/auth": "0.5.0",
-    "@commonpub/editor": "0.5.0",
+    "@commonpub/config": "0.8.0",
     "@commonpub/docs": "0.5.2",
-    "@commonpub/learning": "0.5.0",
-    "@commonpub/ui": "0.8.0",
+    "@commonpub/protocol": "0.9.5",
+    "@commonpub/editor": "0.5.0",
     "@commonpub/server": "2.22.0",
     "@commonpub/schema": "0.8.13",
-    "@commonpub/protocol": "0.9.5"
+    "@commonpub/ui": "0.8.2",
+    "@commonpub/learning": "0.5.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/theme/agora-dark.css

@@ -2,7 +2,11 @@
 /* ===========================================
    CommonPub Agora Theme — Dark (Grove)
    Warm dark surfaces with green-tinted blacks,
-   green accent, serif display font.
+   commons green accent, serif display font,
+   paper texture, snappy easing.
+
+   Complete design system override — mirrors
+   all agora.css component overrides.
    =========================================== */
 
 [data-theme="agora-dark"] {
@@ -34,9 +38,9 @@
   --color-on-primary: #ffffff;
   --color-primary-hover: #4aa06e;
 
-  /* === BORDERS (grove-tinted) === */
-  --border: #3a4f40;
-  --border2: #2a3a2f;
+  /* === 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);
@@ -141,17 +145,215 @@
   --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: var(--shadow-accent);
+  --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)
+   ═══════════════════════════════════════════ */
 
-/* === CONTENT TYPE BADGE COLORS (Agora dark palette) === */
 [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); }
-}

package/theme/agora.css

@@ -1,9 +1,16 @@
 @layer commonpub {
 /* ===========================================
    CommonPub Agora Theme — Light
+   "Where makers gather, build, and share."
+
    Warm institutional aesthetic: parchment
-   backgrounds, green accent, serif display
-   font, offset shadows.
+   backgrounds, commons green accent, Fraunces
+   serif display, Work Sans body, soft rgba
+   borders, paper texture, snappy easing.
+
+   This is a COMPLETE design system, not just
+   a color swap. It overrides tokens AND
+   component styles.
    =========================================== */
 
 [data-theme="agora"] {
@@ -32,9 +39,9 @@
   --color-text-muted: var(--text-faint);
   --color-text-inverse: #f7f4ed;
 
-  /* === BORDERS (warm) === */
-  --border: #1a1a1a;
-  --border2: #d4cfc4;
+  /* === BORDERS (soft, warm) === */
+  --border: rgba(26, 26, 26, 0.25);
+  --border2: rgba(26, 26, 26, 0.12);
 
   --color-border: var(--border2);
   --color-border-strong: var(--border);
@@ -98,8 +105,8 @@
   --color-badge-overlay: rgba(26, 26, 26, 0.75);
 
   /* === INTERACTIVE === */
-  --color-link: var(--accent);
-  --color-link-hover: #2a6342;
+  --color-link: #2a6342;
+  --color-link-hover: #1e4f32;
 
   /* === TYPOGRAPHY (warm, distinctive) === */
   --font-sans: 'Work Sans', system-ui, -apple-system, sans-serif;
@@ -128,7 +135,7 @@
   --leading-normal: 1.7;
   --leading-relaxed: 1.9;
 
-  /* Letter Spacing */
+  /* Letter Spacing (wider for Agora's institutional feel) */
   --tracking-tight: -0.02em;
   --tracking-normal: 0;
   --tracking-wide: 0.06em;
@@ -136,21 +143,320 @@
   --tracking-widest: 0.16em;
 
   /* === SHADOWS (offset, warm ink) === */
-  --shadow-sm: 2px 2px 0 var(--border);
-  --shadow-md: 4px 4px 0 var(--border);
-  --shadow-lg: 6px 6px 0 var(--border);
-  --shadow-xl: 8px 8px 0 var(--border);
+  --shadow-sm: 2px 2px 0 rgba(26, 26, 26, 0.25);
+  --shadow-md: 4px 4px 0 rgba(26, 26, 26, 0.25);
+  --shadow-lg: 6px 6px 0 rgba(26, 26, 26, 0.25);
+  --shadow-xl: 8px 8px 0 rgba(26, 26, 26, 0.25);
   --shadow-accent: 4px 4px 0 var(--accent);
 
-  /* === FOCUS === */
-  --focus-ring: var(--shadow-accent);
+  /* === 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 (glow instead of outline) === */
+  --focus-ring: 0 0 0 3px rgba(61, 139, 94, 0.2);
+}
+} /* end @layer commonpub — token overrides only */
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT OVERRIDES (outside @layer so they
+   beat Vue scoped styles)
+   ═══════════════════════════════════════════ */
+
+
+/* ═══════════════════════════════════════════
+   PAPER TEXTURE OVERLAY
+   Subtle noise that gives everything a
+   tactile, printed-on-paper feel.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.02;
+  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 OVERRIDES
+   Fraunces for display/headings, Work Sans
+   for body, wider tracking on labels.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] h1,
+[data-theme="agora"] h2,
+[data-theme="agora"] h3 {
+  font-family: var(--font-display);
+}
+
+/* Focus: glow instead of outline */
+[data-theme="agora"] :focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: TOPBAR / NAVIGATION
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-topbar {
+  background: var(--surface);
+  border-bottom-color: var(--border);
+}
+
+/* Agora wordmark in topbar */
+[data-theme="agora"] .cpub-site-logo .cpub-logo-name {
+  font-family: var(--font-display);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+[data-theme="agora"] .cpub-site-logo .cpub-logo-bracket {
+  color: var(--accent);
+}
+
+[data-theme="agora"] .cpub-topbar-link.router-link-active {
+  color: var(--accent);
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: BUTTONS
+   Snappy easing, green primary, softer borders.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-btn {
+  border-color: var(--border);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
+}
+
+[data-theme="agora"] .cpub-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+[data-theme="agora"] .cpub-btn:active {
+  transform: translateY(0);
+  box-shadow: none;
+}
+
+[data-theme="agora"] .cpub-btn-primary {
+  background: var(--accent);
+  border-color: #2a6342;
+  box-shadow: var(--shadow-md);
+}
+
+[data-theme="agora"] .cpub-btn-primary:hover {
+  background: #348050;
+  box-shadow: var(--shadow-accent);
+  transform: translateY(-1px);
+}
+
+[data-theme="agora"] .cpub-btn-ghost {
+  color: var(--accent);
+  border-color: transparent;
+}
+
+[data-theme="agora"] .cpub-btn-ghost:hover {
+  color: #2a6342;
+  background: var(--accent-bg);
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: CARDS
+   Linen backgrounds, soft borders, accent
+   left-border treatment on hover.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-sb-card,
+[data-theme="agora"] .cpub-stat-card {
+  background: var(--bg);
+  border-color: var(--border);
+  box-shadow: var(--shadow-sm);
+}
+
+[data-theme="agora"] .cpub-sb-card:hover,
+[data-theme="agora"] .cpub-stat-card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+/* Content cards get accent left border on hover */
+[data-theme="agora"] .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"] .cpub-content-card:hover {
+  border-left-color: var(--accent);
+  border-left-width: 4px;
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+/* Card headers use display font */
+[data-theme="agora"] .cpub-content-card h3,
+[data-theme="agora"] .cpub-content-card .cpub-card-title {
+  font-family: var(--font-display);
+  font-weight: 700;
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: INPUTS & FORMS
+   Soft borders, glow focus ring.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-input,
+[data-theme="agora"] .cpub-textarea,
+[data-theme="agora"] .cpub-select {
+  border-color: var(--border);
+  background: var(--bg);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+[data-theme="agora"] .cpub-input:focus,
+[data-theme="agora"] .cpub-textarea:focus,
+[data-theme="agora"] .cpub-select:focus {
+  border-color: var(--accent);
+  box-shadow: var(--focus-ring);
+  outline: none;
+}
+
+/* Form labels get wider tracking */
+[data-theme="agora"] .cpub-form-label {
+  letter-spacing: var(--tracking-wider);
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: BADGES & TAGS
+   Thinner borders (1px), warmer palette.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-tag {
+  border-width: 1px;
+}
+
+[data-theme="agora"] .cpub-badge-filled {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: SECTION TITLES & HEADINGS
+   Fraunces display, green accent numbers.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-section-title-lg {
+  font-family: var(--font-display);
+  font-weight: 700;
+}
+
+[data-theme="agora"] .cpub-section-title-sm {
+  font-family: var(--font-display);
+  font-weight: 600;
+}
+
+[data-theme="agora"] .admin-page-title {
+  font-family: var(--font-display);
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: LINKS
+   Green links with underline offset.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] a:not(.cpub-btn):not(.cpub-topbar-link):not(.cpub-footer-link):not(.admin-nav-link) {
+  text-decoration-color: rgba(61, 139, 94, 0.3);
+  text-underline-offset: 2px;
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: FOOTER
+   Warm treatment, serif brand name.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-footer {
+  border-top-color: var(--border);
+}
+
+[data-theme="agora"] .cpub-footer-logo .cpub-logo-name {
+  font-family: var(--font-display);
+  font-weight: 700;
+}
+
+[data-theme="agora"] .cpub-footer-col-title {
+  letter-spacing: var(--tracking-widest);
+}
+
+
+/* ═══════════════════════════════════════════
+   PROSE / CONTENT AREA
+   Serif headings, warmer body feel.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-prose h1,
+[data-theme="agora"] .cpub-prose h2,
+[data-theme="agora"] .cpub-prose h3,
+[data-theme="agora"] .cpub-prose h4 {
+  font-family: var(--font-display);
+}
+
+[data-theme="agora"] .cpub-prose blockquote {
+  border-left-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+[data-theme="agora"] .cpub-prose a {
+  color: var(--accent);
+  text-decoration-color: rgba(61, 139, 94, 0.3);
 }
 
-/* === CONTENT TYPE BADGE COLORS (Agora palette) === */
+[data-theme="agora"] .cpub-prose code {
+  background: var(--surface2);
+  border-color: var(--border2);
+}
+
+
+/* ═══════════════════════════════════════════
+   ADMIN LAYOUT
+   Warm sidebar, serif titles.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .admin-brand {
+  font-family: var(--font-display);
+}
+
+[data-theme="agora"] .admin-nav-link.router-link-exact-active {
+  color: var(--accent);
+  background: var(--accent-bg);
+}
+
+[data-theme="agora"] .admin-badge {
+  background: var(--accent);
+}
+
+
+/* ═══════════════════════════════════════════
+   CONTENT TYPE BADGE COLORS (Agora palette)
+   ═══════════════════════════════════════════ */
+
 [data-theme="agora"] [data-content-type="article"] { --badge-color: #4a7fb8; --badge-bg: rgba(74, 127, 184, 0.08); }
 [data-theme="agora"] [data-content-type="blog"] { --badge-color: #3d8b5e; --badge-bg: rgba(61, 139, 94, 0.08); }
 [data-theme="agora"] [data-content-type="project"] { --badge-color: #7b5ea7; --badge-bg: rgba(123, 94, 167, 0.08); }
 [data-theme="agora"] [data-content-type="explainer"] { --badge-color: #2a9d8f; --badge-bg: rgba(42, 157, 143, 0.08); }
 [data-theme="agora"] [data-content-type="video"] { --badge-color: #c4443a; --badge-bg: rgba(196, 68, 58, 0.08); }
 [data-theme="agora"] [data-content-type="tutorial"] { --badge-color: #c4882a; --badge-bg: rgba(196, 136, 42, 0.08); }
-}