@omega.js/web 0.1.0

package/themes/neobrutalism/_layouts/frontend/pages/index.html

@@ -0,0 +1,275 @@
+---
+layout: frontend/core/base
+
+#### THEME CONFIG ####
+# Hero Section
+hero:
+  tagline: "Introducing {{ resolved.config.brand.name }}"
+  headline: "The #1 platform for business"
+  headline_accent: "success"
+  description: "AI automation for modern businesses made simple"
+  primary_button:
+    text: "Get started free"
+    icon: "rocket"
+    href: "/dashboard"
+  secondary_button:
+    text: "See pricing"
+    icon: "book-open"
+    href: "/pricing"
+
+# Trusted By Section (base marketing/trusted-by, restyled)
+trusted_by:
+  headline: "Trusted by the best"
+  logos:
+    - name: "Amazon"
+      logo: "amazon"
+    - name: "Google"
+      logo: "google"
+    - name: "HubSpot"
+      logo: "hubspot"
+    - name: "PayPal"
+      logo: "paypal"
+    - name: "Slack"
+      logo: "slack"
+    - name: "Shopify"
+      logo: "shopify"
+    - name: "Stripe"
+      logo: "stripe"
+
+# Showcase Section
+showcase:
+  superheadline:
+    text: "Showcase"
+  headline: "What makes {{ resolved.config.brand.name }}"
+  headline_accent: "different"
+  subheadline: "Powerful features designed to accelerate your success"
+  items:
+    - title: "Seamless integration"
+      description: "Connect with your existing tools and platforms effortlessly. Our system automatically syncs data and streamlines your workflow for maximum efficiency."
+    - title: "Data-driven insights"
+      description: "Make informed decisions with real-time analytics and actionable insights that help you understand what matters most to your business."
+    - title: "Smart automation"
+      description: "Focus on what matters while our intelligent platform handles routine tasks automatically, working 24/7 to keep your business running smoothly."
+
+# Highlights Section — named `highlights`, not `features`: `features` is a
+# CONFIG section now (the feature catalog, #647) and a page key may not shadow one
+highlights:
+  superheadline:
+    text: "How it works"
+  headline: "Design made"
+  headline_accent: "simple"
+  subheadline: "Get unlimited design requests delivered fast with our streamlined process."
+  cta_button:
+    text: "Get started"
+    icon: "rocket"
+    href: "/dashboard"
+  items:
+    - title: "Subscribe"
+      description: "Choose your plan and submit unlimited design requests."
+      icon: "rotate"
+    - title: "Receive"
+      description: "Get your designs delivered in as fast as two business days."
+      icon: "bolt"
+    - title: "Revise"
+      description: "Request unlimited revisions until it's perfect."
+      icon: "thumbs-up"
+
+# Testimonials Section
+testimonials:
+  superheadline:
+    text: "Testimonials"
+  items:
+    - quote: "This platform transformed my business. The support is incredible!"
+      author: "Sarah Johnson"
+      role: "CEO"
+      company: "TechStart Inc"
+      initial: "S"
+    - quote: "Best investment I've made. Achieved more here than with any consultant."
+      author: "Michael Chen"
+      role: "Founder"
+      company: "DataFlow"
+      initial: "M"
+    - quote: "The community support made all the difference in our growth journey."
+      author: "Emily Davis"
+      role: "Director"
+      company: "Creative Studio"
+      initial: "E"
+
+# Stats Section (base marketing/stats, restyled as color blocks)
+stats:
+  - number: "50,000+"
+    label: "Active users"
+    sublabel: "From 120+ countries"
+  - number: "200+"
+    label: "Solutions"
+    sublabel: "Industry-leading"
+  - number: "4.9"
+    label: "Average rating"
+  - number: "98%"
+    label: "Success rate"
+    sublabel: "Business growth"
+
+# CTA Section (base marketing/cta, restyled as the ink panel)
+cta:
+  superheadline:
+    text: "Launch"
+  headline: "Ready to transform your"
+  headline_accent: "business?"
+  subheadline: "Join thousands of successful companies who have already accelerated their growth with {{ resolved.config.brand.name }}"
+  primary_button:
+    text: "Start today"
+    href: "/dashboard"
+  secondary_button:
+    text: "Talk to an expert"
+    href: "/contact"
+config:
+  theme:
+    main:
+      class: "pt-0"
+---
+
+{% comment %}
+  NEOBRUTALISM HOMEPAGE (identity fork, #177)
+  Same resolved.* data contract as the base homepage, different STRUCTURE
+  where the neobrutalist design demands it: an asymmetric split hero,
+  alternating offset showcase blocks, and big numbered step cards. Those
+  bands are hand-built here and wear neo-* BEM classes. Everything with a
+  base-section counterpart of the same content shape delegates instead:
+  trusted-by (the omega-marquee logo wall, framed by this theme's scss),
+  stats (omega-stat cells painted as color blocks), testimonials, and the
+  cta band (omega-cta ink panel). Convention: docs/web/sections.md
+  "Markup convention: base, skin, fork".
+{% endcomment %}
+
+<!-- ============================================ -->
+<!-- HERO: asymmetric split: oversized headline | offset action stack -->
+<!-- ============================================ -->
+<section class="neo-hero text-bg-warning">
+  <div class="container">
+    <div class="row align-items-center g-5">
+      <!-- Left: kicker + giant headline + description -->
+      <div class="col-lg-7">
+        <p class="neo-kicker neo-kicker--ink text-uppercase mb-4">{{ resolved.hero.tagline }}</p>
+        <h1 class="neo-hero__title mb-4">
+          {{ resolved.hero.headline }}
+          <span class="neo-accent">{{ resolved.hero.headline_accent }}</span>
+        </h1>
+        <p class="fs-3 fw-medium mb-0" style="max-width: 36ch;">
+          {{ resolved.hero.description }}
+        </p>
+      </div>
+
+      <!-- Right: stacked, full-width CTA buttons (d-grid = full-width children) -->
+      <div class="col-lg-5">
+        <div class="d-grid gap-3 neo-hero__actions">
+          <a href="{{ resolved.hero.primary_button.href }}" class="btn btn-dark btn-lg">
+            <i class="fa-solid fa-{{ resolved.hero.primary_button.icon }} me-2"></i>{{ resolved.hero.primary_button.text }}
+          </a>
+          <a href="{{ resolved.hero.secondary_button.href }}" class="btn btn-light btn-lg">
+            <i class="fa-solid fa-{{ resolved.hero.secondary_button.icon }} me-2"></i>{{ resolved.hero.secondary_button.text }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============================================ -->
+<!-- TRUSTED BY: base marquee wall, ink-framed by the theme scss -->
+<!-- ============================================ -->
+{% section "marketing/trusted-by", data: resolved.trusted_by %}
+
+<!-- ============================================ -->
+<!-- SHOWCASE: alternating offset blocks that break the grid -->
+<!-- ============================================ -->
+<section class="neo-showcase">
+  <div class="container">
+    <header class="neo-section-head mb-5">
+      {% iftruthy resolved.showcase.superheadline.text %}
+        <span class="neo-kicker mb-3">
+          {{ resolved.showcase.superheadline.text }}
+        </span>
+      {% endiftruthy %}
+      <h2 class="neo-section-head__title">
+        {{ resolved.showcase.headline }}
+        <span class="neo-accent">{{ resolved.showcase.headline_accent }}</span>
+      </h2>
+    </header>
+
+    {% assign showcase_bgs = "text-bg-primary,text-bg-secondary,text-bg-success,text-bg-info,text-bg-warning" | split: "," %}
+    <div class="neo-showcase__list">
+      {% for item in resolved.showcase.items %}
+        {% assign bg = showcase_bgs[forloop.index0] | default: "text-bg-primary" %}
+        {% comment %} Liquid can't use a filter inside `if`, so compute the parity first {% endcomment %}
+        {% assign row_parity = forloop.index0 | modulo: 2 %}
+        <article class="neo-showcase__row {% if row_parity == 1 %}neo-showcase__row--flip{% endif %}">
+          <div class="neo-showcase__num {{ bg }}">
+            {{ forloop.index | prepend: '0' | slice: -2, 2 }}
+          </div>
+          <div class="neo-showcase__body">
+            <h3 class="neo-showcase__title">{{ item.title }}</h3>
+            <p class="neo-showcase__desc">{{ item.description }}</p>
+          </div>
+        </article>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+<!-- ============================================ -->
+<!-- FEATURES: big numbered step cards -->
+<!-- ============================================ -->
+<section class="neo-steps bg-body-tertiary">
+  <div class="container">
+    <header class="neo-section-head mb-5">
+      {% iftruthy resolved.highlights.superheadline.text %}
+        <span class="neo-kicker mb-3">
+          {{ resolved.highlights.superheadline.text }}
+        </span>
+      {% endiftruthy %}
+      <h2 class="neo-section-head__title">
+        {{ resolved.highlights.headline }}
+        <span class="neo-accent">{{ resolved.highlights.headline_accent }}</span>
+      </h2>
+    </header>
+
+    <div class="row g-4">
+      {% for feature in resolved.highlights.items %}
+        <div class="col-md-4">
+          <div class="card neo-step-card h-100">
+            <div class="card-body">
+              <div class="neo-step-card__top">
+                <span class="neo-step-card__num">{{ forloop.index }}</span>
+                <span class="neo-step-card__icon"><i class="fa-solid fa-{{ feature.icon }}"></i></span>
+              </div>
+              <h3 class="neo-step-card__title">{{ feature.title }}</h3>
+              <p class="neo-step-card__desc">{{ feature.description }}</p>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+
+    {% iftruthy resolved.highlights.cta_button %}
+      <div class="text-center mt-5">
+        <a href="{{ resolved.highlights.cta_button.href }}" class="btn btn-warning btn-lg">
+          <i class="fa-solid fa-{{ resolved.highlights.cta_button.icon }} me-2"></i>{{ resolved.highlights.cta_button.text }}
+        </a>
+      </div>
+    {% endiftruthy %}
+  </div>
+</section>
+
+<!-- ============================================ -->
+<!-- STATS: base stats band, painted as oversized color blocks -->
+<!-- ============================================ -->
+{% section "marketing/stats", items: resolved.stats %}
+
+{% section "marketing/testimonials", data: resolved.testimonials %}
+
+<!-- ============================================ -->
+<!-- CTA: base cta band, painted as the full-bleed ink block -->
+<!-- ============================================ -->
+{% section "marketing/cta", data: resolved.cta %}
+
+{{ content | omega_content_format }}

package/themes/neobrutalism/_theme.js

@@ -0,0 +1,24 @@
+// Neobrutalism Theme — JS entry point
+// Loaded at runtime via webpack's __theme__ alias (import('__theme__/_theme.js')).
+// Exposes Bootstrap globally and wires up theme behaviors on DOM ready.
+import bootstrap from '__main_assets__/themes/bootstrap/js/index.umd.js';
+import { ready as domReady } from '@omega.js/client/modules/dom.js';
+
+// Make Bootstrap available globally (used by omega utilities + components)
+window.bootstrap = bootstrap;
+
+/* @dev-only:start */
+{
+  console.log('Neobrutalism theme loaded successfully (assets/themes/neobrutalism/_theme.js)');
+}
+/* @dev-only:end */
+
+// Theme behaviors (navbar scroll state rides the shared motion engine's
+// data-omega-scroll-watch on the base nav include; no theme JS)
+import initializeTooltips from '__main_assets__/js/libs/initialize-tooltips.js';
+
+// Initialize when DOM is ready
+domReady().then(() => {
+  // Generic Bootstrap initializations
+  initializeTooltips();
+});

package/themes/neobrutalism/_theme.scss

@@ -0,0 +1,61 @@
+// Neobrutalism Theme — SCSS entry point
+// Forwards config (so consuming projects can override vars), loads Bootstrap via
+// config, then layers the neobrutalist system on top. Import order matters:
+// config → mixins → root vars → base → layout → components → bootstrap overrides.
+
+// Forward theme configuration (allows consuming project to override)
+@forward 'config';
+@use 'config' as *;
+
+// Mixins must be available to every partial below.
+// @import (not @use) so the mixins land in the global scope the @imports share.
+@import 'css/base/mixins';
+
+// CSS custom properties (light/dark bridge)
+@import 'css/base/root';
+
+// ── The classy FLOOR (cp190, widened for #177 phase 3) ──────────────────────
+// Fall-through surfaces render BASE markup (omega-* classes), and the
+// structural css for that vocabulary lives in classy's partials, which are
+// deliberately TOKEN-PURE, so a full sibling theme imports them directly
+// and they paint through THIS theme's token re-values (ink/paper/accents).
+// Phase 3 widened the floor beyond app/auth to the marketing vocabulary
+// (omega-cta, omega-stats, omega-price-card, omega-band, omega-compare, and
+// the rest) because neobrutalism now renders the base pricing page and the
+// base marketing sections unforked.
+// Imported EARLY on purpose: the floor sits UNDER the theme's own voice, so
+// later neobrutalist rules win every collision.
+// NOT imported: classy's typography (its element rules would beat the
+// Archivo headings this theme sets), layout/general (fixed-nav clearance
+// rhythm; the flush ink bar needs none), and layout/nav (fixed glassy bar;
+// _navigation.scss re-skins .omega-nav below).
+// Contract: docs/shared/theming.md § "CSS fall-through".
+@import '../classy/css/layout/shell';
+@import '../classy/css/layout/footer';
+@import '../classy/css/app/panels';
+@import '../classy/css/pages/auth';
+@import '../classy/css/components/receipt';
+@import '../classy/css/components/badges';
+@import '../classy/css/base/utilities';
+@import '../classy/css/marketing/hero';
+@import '../classy/css/marketing/content';
+@import '../classy/css/marketing/sections';
+
+// Base styles
+@import 'css/base/typography';
+@import 'css/base/utilities';
+
+// Layout styles
+@import 'css/layout/general';
+@import 'css/layout/navigation';
+
+// Component styles
+@import 'css/components/buttons';
+@import 'css/components/cards';
+@import 'css/components/forms';
+@import 'css/components/marketing';
+@import 'css/components/billing-toggle';
+
+// Universal Bootstrap overrides (shared across all omega themes).
+// Must come AFTER Bootstrap is loaded via config to use @extend.
+@import '../bootstrap/overrides';

package/themes/neobrutalism/css/base/_mixins.scss

@@ -0,0 +1,46 @@
+// Neobrutalism Theme — Mixins
+// The shared building blocks of the neobrutalist look. Components @include these
+// so the border/shadow/press system lives in ONE place (SSOT) rather than being
+// copy-pasted across buttons, cards, inputs, etc.
+
+// Hard border in the current ink color.
+@mixin nb-border($width: var(--nb-border-width)) {
+  border: $width solid var(--nb-border-color);
+}
+
+// Hard offset shadow (no blur). $size: sm | md | lg.
+@mixin nb-shadow($size: md) {
+  @if $size == sm {
+    box-shadow: var(--nb-shadow-sm);
+  } @else if $size == lg {
+    box-shadow: var(--nb-shadow-lg);
+  } @else {
+    box-shadow: var(--nb-shadow);
+  }
+}
+
+// The signature interaction: the element sits on a hard offset shadow, then
+// "presses" toward the page on hover/active. THE INVARIANT: the element's
+// translate distance + the shrunk shadow offset must always equal the RESTING
+// shadow offset, so the bottom-right edge stays perfectly pinned (the face and
+// shadow line up exactly when the press completes — no drift).
+//
+// $rest = the element's resting shadow offset. Pass the SAME size you gave
+// nb-shadow() (default 5px = md; pass $nb-shadow-offset-lg for lg-shadow elements).
+@mixin nb-press($rest: $nb-shadow-offset) {
+  transition: $nb-transition;
+
+  // Hover: press ~40% of the way in. shadow = rest - translate (stays pinned).
+  &:hover {
+    $hover-move: round($rest * 0.4);
+    $hover-shadow: $rest - $hover-move;
+    transform: translate($hover-move, $hover-move);
+    box-shadow: #{$hover-shadow} #{$hover-shadow} 0 var(--nb-shadow-color);
+  }
+
+  // Active: press fully in. translate == rest, shadow collapses to 0 → flush.
+  &:active {
+    transform: translate($rest, $rest);
+    box-shadow: 0 0 0 var(--nb-shadow-color);
+  }
+}

package/themes/neobrutalism/css/base/_root.scss

@@ -0,0 +1,169 @@
+// Neobrutalism Theme — CSS Custom Properties
+// Bridges SCSS config into runtime CSS variables so light/dark mode switching
+// works without recompilation. Components read these var(--nb-*) tokens, never
+// the raw SCSS values, so dark mode is a single block of overrides.
+
+// ============================================
+// Light Mode (default)
+// ============================================
+:root,
+[data-bs-theme="light"] {
+  // Structural tokens
+  --nb-ink: #{$nb-ink};
+  --nb-paper: #{$nb-paper};
+  --nb-surface: #{$nb-surface};
+  --nb-surface-alt: #{$nb-surface-alt};
+
+  // Border + shadow color follow the ink
+  --nb-border-color: var(--nb-ink);
+  --nb-shadow-color: var(--nb-ink);
+
+  // Border + shadow recipes (used by components)
+  --nb-border-width: #{$nb-border-width};
+  --nb-border: #{$nb-border-width} solid var(--nb-border-color);
+  --nb-shadow-sm: #{$nb-shadow-offset-sm} #{$nb-shadow-offset-sm} 0 var(--nb-shadow-color);
+  --nb-shadow: #{$nb-shadow-offset} #{$nb-shadow-offset} 0 var(--nb-shadow-color);
+  --nb-shadow-lg: #{$nb-shadow-offset-lg} #{$nb-shadow-offset-lg} 0 var(--nb-shadow-color);
+
+  // Accent palette (for color-block sections)
+  --nb-accent-blue: #{$nb-accent-blue};
+  --nb-accent-pink: #{$nb-accent-pink};
+  --nb-accent-yellow: #{$nb-accent-yellow};
+  --nb-accent-green: #{$nb-accent-green};
+  --nb-accent-purple: #{$nb-accent-purple};
+  --nb-accent-orange: #{$nb-accent-orange};
+
+  // INTERACTIVE accent — the single token every hover/active fill points at
+  // (nav links, footer links, dropdown items, body links, mobile toggler). It
+  // tracks the rendered primary blue (--bs-primary), NOT the yellow signature
+  // accent. Retune all interactive states from this one line. Yellow stays
+  // reserved for static signature blocks (kicker, highlight, hero, badges).
+  --nb-accent-interactive: var(--bs-primary);
+  --nb-accent-interactive-ink: #ffffff; // readable text on the interactive fill
+
+  // Map onto Bootstrap surfaces
+  --bs-body-bg: #{$nb-paper};
+  --bs-body-bg-rgb: #{red($nb-paper)}, #{green($nb-paper)}, #{blue($nb-paper)};
+  --bs-body-color: #{$nb-ink};
+  --bs-secondary-bg: #{$nb-surface};
+  --bs-tertiary-bg: #{$nb-surface-alt};
+  --bs-border-color: var(--nb-ink);
+  --bs-card-bg: #{$nb-surface};
+  --bs-emphasis-color: #{$nb-ink};
+
+  // Status (#13) — one green/amber/red site-wide. Declared once: the tokens
+  // themselves flip with the scheme (core/css/tokens), so this needs no
+  // dark-mode twin below.
+  --bs-success: var(--omega-ok);
+  --bs-success-rgb: var(--omega-ok-rgb);
+  --bs-warning: var(--omega-warn);
+  --bs-warning-rgb: var(--omega-warn-rgb);
+  --bs-danger: var(--omega-danger);
+  --bs-danger-rgb: var(--omega-danger-rgb);
+}
+
+// ============================================
+// The --omega-* token re-value (#177 phase 3)
+// ============================================
+// The classy floor partials and core chrome paint through the shared
+// --omega-* contract (core/css/tokens/_index.scss). Restamp the same NAMES
+// with the neobrutalist sheet so fall-through surfaces (pricing, marketing
+// sections, app panels) read ink/paper/hard-shadow instead of the core
+// placeholders. Plumbing mirrors the core sheet exactly (three stamps: OS
+// preference via media query, appearance.js's data-bs-theme attribute beats
+// it both ways). Genuinely neobrutalist extras keep the --nb-* namespace.
+@mixin nb-omega-light-tokens {
+  --omega-ground: #{$nb-paper};
+  --omega-surface: #{$nb-surface};
+  --omega-surface-2: #{$nb-surface-alt};
+  --omega-ink: #{$nb-ink};
+  --omega-ink-muted: #{mix($nb-ink, $nb-paper, 72%)};
+  --omega-ink-faint: #{mix($nb-ink, $nb-paper, 48%)};
+  --omega-line: #{$nb-ink}; // hard ink rules ARE the identity, no soft dividers
+  --omega-line-strong: #{$nb-ink};
+  --omega-accent: #{$primary}; // placeholder; brand.color wins at build
+  --omega-accent-hover: #{mix(black, $primary, 12%)};
+  --omega-accent-active: #{mix(black, $primary, 18%)};
+  --omega-accent-subtle: #{rgba($primary, 0.12)};
+  --omega-accent-ink: #ffffff;
+  --omega-accent-ring: #{rgba($primary, 0.35)};
+  --omega-shadow-1: #{$nb-shadow-offset-sm} #{$nb-shadow-offset-sm} 0 #{$nb-ink};
+  --omega-shadow-2: #{$nb-shadow-offset} #{$nb-shadow-offset} 0 #{$nb-ink};
+}
+
+@mixin nb-omega-dark-tokens {
+  --omega-ground: #{$nb-paper-dark};
+  --omega-surface: #{$nb-surface-dark};
+  --omega-surface-2: #{$nb-surface-alt-dark};
+  --omega-ink: #{$nb-ink-dark};
+  --omega-ink-muted: #{mix($nb-ink-dark, $nb-paper-dark, 72%)};
+  --omega-ink-faint: #{mix($nb-ink-dark, $nb-paper-dark, 48%)};
+  --omega-line: #{$nb-ink-dark};
+  --omega-line-strong: #{$nb-ink-dark};
+  --omega-accent: #{$primary}; // the flat saturated blue holds in both modes
+  --omega-accent-hover: #{mix(white, $primary, 12%)};
+  --omega-accent-active: #{mix(white, $primary, 18%)};
+  --omega-accent-subtle: #{rgba($primary, 0.16)};
+  --omega-accent-ink: #ffffff;
+  --omega-accent-ring: #{rgba($primary, 0.35)};
+  --omega-shadow-1: #{$nb-shadow-offset-sm} #{$nb-shadow-offset-sm} 0 #{$nb-ink-dark};
+  --omega-shadow-2: #{$nb-shadow-offset} #{$nb-shadow-offset} 0 #{$nb-ink-dark};
+}
+
+:root {
+  @include nb-omega-light-tokens;
+
+  // Shape: zero radius everywhere the contract offers one (the signature).
+  // The pill slot keeps its value so rounded-circle avatars and the shared
+  // segmented thumb stay intact.
+  --omega-radius-xs: 0;
+  --omega-radius-s: 0;
+  --omega-radius-m: 0;
+  --omega-radius-l: 0;
+  --omega-radius-xl: 0;
+
+  // Type: chunky grotesk display, clean grotesk body, mono accents
+  --omega-font-ui: #{$font-family-sans-serif};
+  --omega-font-mono: #{$nb-font-mono};
+  --omega-font-marketing: #{$nb-font-display};
+  --omega-font-display: #{$nb-font-display};
+}
+
+// OS preference carries when no explicit choice is stamped…
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include nb-omega-dark-tokens;
+  }
+}
+
+// …and the appearance.js stamp beats the OS in BOTH directions.
+:root[data-bs-theme='dark'] {
+  @include nb-omega-dark-tokens;
+}
+
+:root[data-bs-theme='light'] {
+  @include nb-omega-light-tokens;
+}
+
+// ============================================
+// Dark Mode
+// ============================================
+// Ink flips to near-white: borders and hard shadows become light on dark paper.
+[data-bs-theme="dark"] {
+  --nb-ink: #{$nb-ink-dark};
+  --nb-paper: #{$nb-paper-dark};
+  --nb-surface: #{$nb-surface-dark};
+  --nb-surface-alt: #{$nb-surface-alt-dark};
+
+  --nb-border-color: var(--nb-ink);
+  --nb-shadow-color: var(--nb-ink);
+
+  --bs-body-bg: #{$nb-paper-dark};
+  --bs-body-bg-rgb: #{red($nb-paper-dark)}, #{green($nb-paper-dark)}, #{blue($nb-paper-dark)};
+  --bs-body-color: #{$nb-ink-dark};
+  --bs-secondary-bg: #{$nb-surface-dark};
+  --bs-tertiary-bg: #{$nb-surface-alt-dark};
+  --bs-border-color: var(--nb-ink);
+  --bs-card-bg: #{$nb-surface-dark};
+  --bs-emphasis-color: #{$nb-ink-dark};
+}

package/themes/neobrutalism/css/base/_typography.scss

@@ -0,0 +1,61 @@
+// Neobrutalism Theme — Typography
+// Chunky, confident, tightly-tracked headings; clean grotesk body.
+// Fonts are loaded via the theme's `head` block in base.html (Google Fonts),
+// NOT @import-ed here, to avoid render-blocking duplicate loads.
+
+body {
+  font-family: $font-family-sans-serif;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-family: $nb-font-display;
+  font-weight: $headings-font-weight;
+  letter-spacing: $nb-heading-letter-spacing;
+  line-height: 1.05;
+  text-wrap: balance;
+}
+
+// Display headings get extra weight + tighter tracking
+.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  letter-spacing: -0.03em;
+  line-height: 0.98;
+}
+
+// Monospace accents (kickers, labels, code-ish tags)
+.font-mono,
+code, kbd, samp, pre {
+  font-family: $nb-font-mono;
+}
+
+// Marker-style background swipe on emphasized inline text (mark is the
+// element markdown/content emits; the fork vocabulary uses .neo-accent).
+mark {
+  background: var(--nb-accent-yellow);
+  color: #111111;
+  padding: 0 0.15em;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+// Links: bold, underlined, no fade — they look clickable and stay readable in both
+// modes. Hover shifts to the interactive accent (blue), matching every other hover
+// in the theme. Buttons/nav/dropdown/footer links opt out of this generic rule via
+// their own higher-specificity hover, so this only catches plain in-content links.
+a {
+  font-weight: 600;
+  text-underline-offset: 0.15em;
+  text-decoration-thickness: 2px;
+
+  &:hover { color: var(--nb-accent-interactive); }
+}
+
+// Buttons are <a> too, but set their text via --bs-btn-color. A direct `color` on
+// `a:hover` would beat that var and turn button labels blue — exclude them so the
+// button keeps its own (frozen) text color. Nav/dropdown/footer links already win
+// on specificity with their explicit white hover, so they need no guard here.
+a.btn:hover { color: var(--bs-btn-color); }