@layer commonpub {
/* ===========================================
   CommonPub Agora Theme — Light
   "Where makers gather, build, and share."

   Warm institutional aesthetic: parchment
   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"] {
  /* === SURFACES (warm, paper-like) === */
  --bg: #f7f4ed;
  --surface: #faf8f3;
  --surface2: #ece8de;
  --surface3: #e2ddd2;

  --color-surface: var(--surface);
  --color-surface-alt: var(--surface2);
  --color-surface-raised: var(--surface);
  --color-surface-overlay: rgba(26, 26, 26, 0.5);
  --color-surface-overlay-light: rgba(26, 26, 26, 0.4);
  --color-surface-scrim: rgba(247, 244, 237, 0.75);
  --color-surface-hover: var(--surface2);
  --color-bg-subtle: var(--bg);

  /* === TEXT (ink gradations) === */
  --text: #1a1a1a;
  --text-dim: #4a4a44;
  --text-faint: #7a7a72;

  --color-text: var(--text);
  --color-text-secondary: var(--text-dim);
  --color-text-muted: var(--text-faint);
  --color-text-inverse: #f7f4ed;

  /* === 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);
  --color-border-focus: var(--accent);

  /* === ACCENT (commons green) === */
  --accent: #3d8b5e;
  --accent-bg: rgba(61, 139, 94, 0.08);
  --accent-bg-strong: rgba(61, 139, 94, 0.2);
  --accent-bg-heavy: rgba(61, 139, 94, 0.4);
  --accent-bg-solid: rgba(61, 139, 94, 0.6);
  --accent-border: rgba(61, 139, 94, 0.25);
  --accent-focus-ring: 0 0 0 3px rgba(61, 139, 94, 0.12);

  --color-primary: var(--accent);
  --color-primary-hover: #348050;
  /* White on the #3d8b5e fill is 4.16:1, just under AA. Near-black is 4.76:1.
     See base.css; locked by theme-studio's theme-contrast test. */
  --color-primary-text: #0a0a0a;
  --color-on-primary: #0a0a0a;
  --color-accent: var(--accent);
  --color-accent-hover: #348050;
  --color-accent-text: #0a0a0a;
  --color-on-accent: #0a0a0a;
  --color-on-red: #ffffff;  /* 4.96:1 on this theme's --red */
  --color-on-green: #0a0a0a;  /* 4.76:1 on this theme's --green */
  --color-on-yellow: #0a0a0a;  /* 6.51:1 on this theme's --yellow */
  --color-accent-bg: var(--accent-bg);
  --color-accent-border: var(--accent-border);

  /* === SEMANTIC COLORS (warm palette) === */
  --green: #3d8b5e;
  --green-bg: rgba(61, 139, 94, 0.08);
  --green-border: rgba(61, 139, 94, 0.25);

  --yellow: #c4882a;
  --yellow-bg: rgba(196, 136, 42, 0.08);
  --yellow-border: rgba(196, 136, 42, 0.25);

  --red: #c4443a;
  --red-bg: rgba(196, 68, 58, 0.08);
  --red-border: rgba(196, 68, 58, 0.25);

  --purple: #7b5ea7;
  --purple-bg: rgba(123, 94, 167, 0.08);
  --purple-border: rgba(123, 94, 167, 0.25);

  --teal: #2a9d8f;
  --teal-bg: rgba(42, 157, 143, 0.08);
  --teal-border: rgba(42, 157, 143, 0.25);

  --pink: #b85a7a;
  --pink-bg: rgba(184, 90, 122, 0.08);
  --pink-border: rgba(184, 90, 122, 0.25);

  --color-success: var(--green);
  --color-warning: var(--yellow);
  --color-error: var(--red);
  --color-info: #4a7fb8;
  --color-success-bg: var(--green-bg);
  --color-warning-bg: var(--yellow-bg);
  --color-error-bg: var(--red-bg);
  --color-info-bg: rgba(74, 127, 184, 0.08);

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

  /* === INTERACTIVE === */
  --color-link: #2a6342;
  --color-link-hover: #1e4f32;

  /* === 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;   /* 11px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1.0625rem;   /* 17px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 1.875rem;   /* 30px */
  --text-3xl: 2.375rem;   /* 38px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 4rem;       /* 64px */
  --text-label: 0.625rem; /* 10px — monospace UI labels */

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

  /* Letter Spacing (wider for Agora's institutional feel) */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.16em;

  /* === SHADOWS (offset, warm ink) === */
  --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);

  /* === 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);
}

[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); }


/* ═══════════════════════════════════════════
   LOGO SWITCH
   Hide Classic logo, show Agora Town Square
   mark + Fraunces wordmark.
   ═══════════════════════════════════════════ */

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

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