@inixiative/config 0.5.183 → 0.5.185

package/theme/domains.css

@@ -0,0 +1,137 @@
+/*
+ * @inixiative/config/theme/domains.css — one structure, four palettes (Aron, 2026-11-02).
+ *
+ * Load after theme/public.css. A palette is the four --app-* slots (primary, secondary, tertiary,
+ * quaternary, each with its foreground) plus --ring, set on any element with `data-domain`:
+ *   agentic          Kingdom, Foundry, Archive, Oracle: lime = yours, blue = shared, pink = Signet (public.css's own values)
+ *   building-blocks  the primitives (json-rules, permissions, transitions, …): amber, teal, brick
+ *   governance       the whitepaper and proposals: violet, jade, rose
+ *   inixiative       the org: neutral ink; secondary/tertiary/quaternary are the three domain primaries
+ * Why an attribute and not one file per palette: palettes nest. The hub is `inixiative` and each door
+ * inside it wears its own domain (`<a data-domain="governance">`); a file per palette can't do that.
+ * Why raw tokens per mode and plain mappings: the `[data-domain]` rules hold no colour, so they work in
+ * light and dark alike and at any depth. Read slots directly (hsl(var(--app-primary))): template's
+ * --primary is resolved once on :root and does not follow a nested data-domain.
+ * Every primary, tertiary and quaternary is AA (4.5:1) as text on its mode's background and card;
+ * the ratios are in the README.
+ */
+
+:root {
+  --agentic-primary: 84 69% 24%;
+  --agentic-primary-foreground: 70 25% 97%;
+  --agentic-secondary: 80 14% 91%;
+  --agentic-secondary-foreground: 206 29% 10%;
+  --agentic-tertiary: 211 72% 42%;
+  --agentic-tertiary-foreground: 0 0% 100%;
+  --agentic-quaternary: 318 45% 44%;
+  --agentic-quaternary-foreground: 0 0% 100%;
+  --agentic-ring: 84 69% 30%;
+
+  --building-blocks-primary: 32 95% 30%;
+  --building-blocks-primary-foreground: 70 25% 97%;
+  --building-blocks-secondary: 36 20% 91%;
+  --building-blocks-secondary-foreground: 206 29% 10%;
+  --building-blocks-tertiary: 181 80% 24%;
+  --building-blocks-tertiary-foreground: 0 0% 100%;
+  --building-blocks-quaternary: 10 62% 42%;
+  --building-blocks-quaternary-foreground: 0 0% 100%;
+  --building-blocks-ring: 32 95% 30%;
+
+  --governance-primary: 258 52% 48%;
+  --governance-primary-foreground: 0 0% 100%;
+  --governance-secondary: 255 18% 92%;
+  --governance-secondary-foreground: 206 29% 10%;
+  --governance-tertiary: 162 70% 24%;
+  --governance-tertiary-foreground: 0 0% 100%;
+  --governance-quaternary: 350 58% 42%;
+  --governance-quaternary-foreground: 0 0% 100%;
+  --governance-ring: 258 52% 48%;
+
+  --inixiative-primary: 206 29% 7%;
+  --inixiative-primary-foreground: 70 25% 97%;
+  --inixiative-ring: 206 29% 7%;
+}
+
+.dark {
+  --agentic-primary: 83 88% 73%;
+  --agentic-primary-foreground: 206 29% 6%;
+  --agentic-secondary: 204 25% 12%;
+  --agentic-secondary-foreground: 96 17% 94%;
+  --agentic-tertiary: 211 100% 79%;
+  --agentic-tertiary-foreground: 206 29% 6%;
+  --agentic-quaternary: 315 67% 83%;
+  --agentic-quaternary-foreground: 206 29% 6%;
+  --agentic-ring: 83 88% 73%;
+
+  --building-blocks-primary: 38 95% 64%;
+  --building-blocks-primary-foreground: 206 29% 6%;
+  --building-blocks-secondary: 30 16% 12%;
+  --building-blocks-secondary-foreground: 96 17% 94%;
+  --building-blocks-tertiary: 176 62% 58%;
+  --building-blocks-tertiary-foreground: 206 29% 6%;
+  --building-blocks-quaternary: 12 90% 76%;
+  --building-blocks-quaternary-foreground: 206 29% 6%;
+  --building-blocks-ring: 38 95% 64%;
+
+  --governance-primary: 258 92% 82%;
+  --governance-primary-foreground: 206 29% 6%;
+  --governance-secondary: 250 18% 13%;
+  --governance-secondary-foreground: 96 17% 94%;
+  --governance-tertiary: 158 58% 62%;
+  --governance-tertiary-foreground: 206 29% 6%;
+  --governance-quaternary: 348 92% 82%;
+  --governance-quaternary-foreground: 206 29% 6%;
+  --governance-ring: 258 92% 82%;
+
+  --inixiative-primary: 96 17% 94%;
+  --inixiative-primary-foreground: 206 29% 6%;
+  --inixiative-ring: 96 17% 94%;
+}
+
+[data-domain="agentic"] {
+  --app-primary: var(--agentic-primary);
+  --app-primary-foreground: var(--agentic-primary-foreground);
+  --app-secondary: var(--agentic-secondary);
+  --app-secondary-foreground: var(--agentic-secondary-foreground);
+  --app-tertiary: var(--agentic-tertiary);
+  --app-tertiary-foreground: var(--agentic-tertiary-foreground);
+  --app-quaternary: var(--agentic-quaternary);
+  --app-quaternary-foreground: var(--agentic-quaternary-foreground);
+  --ring: var(--agentic-ring);
+}
+
+[data-domain="building-blocks"] {
+  --app-primary: var(--building-blocks-primary);
+  --app-primary-foreground: var(--building-blocks-primary-foreground);
+  --app-secondary: var(--building-blocks-secondary);
+  --app-secondary-foreground: var(--building-blocks-secondary-foreground);
+  --app-tertiary: var(--building-blocks-tertiary);
+  --app-tertiary-foreground: var(--building-blocks-tertiary-foreground);
+  --app-quaternary: var(--building-blocks-quaternary);
+  --app-quaternary-foreground: var(--building-blocks-quaternary-foreground);
+  --ring: var(--building-blocks-ring);
+}
+
+[data-domain="governance"] {
+  --app-primary: var(--governance-primary);
+  --app-primary-foreground: var(--governance-primary-foreground);
+  --app-secondary: var(--governance-secondary);
+  --app-secondary-foreground: var(--governance-secondary-foreground);
+  --app-tertiary: var(--governance-tertiary);
+  --app-tertiary-foreground: var(--governance-tertiary-foreground);
+  --app-quaternary: var(--governance-quaternary);
+  --app-quaternary-foreground: var(--governance-quaternary-foreground);
+  --ring: var(--governance-ring);
+}
+
+[data-domain="inixiative"] {
+  --app-primary: var(--inixiative-primary);
+  --app-primary-foreground: var(--inixiative-primary-foreground);
+  --app-secondary: var(--agentic-primary);
+  --app-secondary-foreground: var(--agentic-primary-foreground);
+  --app-tertiary: var(--building-blocks-primary);
+  --app-tertiary-foreground: var(--building-blocks-primary-foreground);
+  --app-quaternary: var(--governance-primary);
+  --app-quaternary-foreground: var(--governance-primary-foreground);
+  --ring: var(--inixiative-ring);
+}

package/theme/marketing.css

@@ -0,0 +1,513 @@
+/*
+ * @inixiative/config/theme/marketing.css — the marketing grammar: scales and the shared page classes.
+ *
+ * Load after theme/public.css and theme/domains.css. Lifted from Kingdom's landing (apps/web/app/components/landing),
+ * so the hub, Kingdom's landing and every product page share one type scale, rhythm and set of parts.
+ * Colour comes only from public.css and domains.css tokens; this file holds none of its own.
+ * Classes apply inside `.marketing` (put it on the page root, with a `data-domain`). They sit in
+ * `@layer components` behind :where(), so Tailwind's utilities (a later layer) and any unlayered page CSS win.
+ * Rules the grammar carries: the domain primary is the one accent (CTA, eyebrow, wordmark stop); tertiary
+ * and quaternary only appear where they mean something (agentic: shared, Signet). Motion means live: only
+ * `.status-dot[data-live]` animates, and nothing moves under prefers-reduced-motion. Long-form reading
+ * (`.prose`) is set for the light theme: give that page no `.dark`.
+ */
+
+:root {
+  /* Type: fluid steps, 640px → 1440px viewport */
+  --text-display-1: clamp(2.25rem, 1.05rem + 3vw, 3.75rem);
+  --text-display-2: clamp(2rem, 1.2rem + 2vw, 3rem);
+  --text-display-3: clamp(1.75rem, 1.05rem + 1.75vw, 2.625rem);
+  --text-heading-1: clamp(1.625rem, 1.125rem + 1.25vw, 2.25rem);
+  --text-heading-2: clamp(1.25rem, 0.95rem + 0.75vw, 1.625rem);
+  --text-heading-3: clamp(1.1875rem, 1.0375rem + 0.375vw, 1.375rem);
+  --text-lede: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
+  --text-body: 1rem;
+  --text-small: 0.9375rem;
+  --text-caption: 0.8125rem;
+  --text-eyebrow: 0.75rem;
+  --text-micro: 0.6875rem;
+
+  --leading-display: 1.04;
+  --leading-heading: 1.12;
+  --leading-body: 1.6;
+  --leading-prose: 1.72;
+
+  --tracking-display: -0.03em;
+  --tracking-heading: -0.02em;
+  --tracking-eyebrow: 0.14em;
+  --tracking-label: 0.1em;
+
+  --weight-display: 750;
+  --weight-heading: 650;
+  --weight-strong: 600;
+
+  /* Spacing: 4px base */
+  --gap-1: 0.25rem;
+  --gap-2: 0.5rem;
+  --gap-3: 0.75rem;
+  --gap-4: 1rem;
+  --gap-5: 1.25rem;
+  --gap-6: 1.5rem;
+  --gap-7: 2rem;
+  --gap-8: 3rem;
+  --gap-9: 4rem;
+  --gap-10: 6rem;
+
+  /* Section rhythm and containers */
+  --section-padding: clamp(4rem, 2rem + 5vw, 6.5rem);
+  --section-padding-compact: 2.25rem;
+  --section-gap: var(--gap-8);
+  --container-max: 82.5rem;
+  --container-heading: 42.5rem;
+  --measure: 68ch;
+  --gutter: clamp(1rem, -0.5rem + 4vw, 3rem);
+  --nav-height: clamp(4.5rem, 3.5rem + 2vw, 5.5rem);
+
+  /* Radius (numbered, so Tailwind's --radius-sm/md/lg stay Tailwind's) */
+  --radius-1: 0.375rem;
+  --radius-2: 0.5rem;
+  --radius-3: 0.75rem;
+  --radius-4: 1rem;
+  --radius-5: 1.25rem;
+  --radius-pill: 999px;
+
+  /* Motion */
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 250ms;
+  --duration-scene: 500ms;
+  --duration-live: 2.4s;
+  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --ease-move: cubic-bezier(0.5, 0, 0.2, 1);
+  --lift: -1px;
+
+  /* Elevation (paper cards staged as objects) */
+  --elevation-1: 0 18px 40px -24px hsl(var(--shadow) / 0.45);
+  --elevation-2: 0 30px 60px -30px hsl(var(--shadow) / 0.6);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --duration-slow: 0ms;
+    --duration-scene: 0ms;
+    --lift: 0px;
+  }
+  :where(.marketing) .status-dot[data-live] {
+    animation: none;
+  }
+}
+
+@layer components {
+  :where(.marketing) {
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+    font-size: var(--text-body);
+    line-height: var(--leading-body);
+    -webkit-font-smoothing: antialiased;
+    color-scheme: light;
+  }
+  :where(.dark .marketing, .marketing.dark) {
+    color-scheme: dark;
+  }
+  :where(.marketing) *,
+  :where(.marketing) *::before,
+  :where(.marketing) *::after {
+    box-sizing: border-box;
+  }
+  :where(.marketing) a {
+    color: inherit;
+    text-decoration: none;
+  }
+  :where(.marketing) :focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 4px;
+    border-radius: var(--radius-1);
+  }
+  :where(.marketing) :is(h1, h2, h3, h4),
+  :where(.marketing) :is(.display-1, .display-2, .display-3, .heading-1, .heading-2, .heading-3) {
+    margin: 0;
+    font-family: var(--font-display);
+    font-weight: var(--weight-display);
+    letter-spacing: var(--tracking-display);
+    line-height: var(--leading-heading);
+    text-wrap: balance;
+  }
+
+  :where(.marketing) .display-1 {
+    font-size: var(--text-display-1);
+    line-height: var(--leading-display);
+  }
+  :where(.marketing) .display-2 {
+    font-size: var(--text-display-2);
+    line-height: var(--leading-display);
+  }
+  :where(.marketing) .display-3 {
+    font-size: var(--text-display-3);
+    line-height: var(--leading-display);
+  }
+  :where(.marketing) .heading-1 {
+    font-size: var(--text-heading-1);
+  }
+  :where(.marketing) .heading-2 {
+    font-size: var(--text-heading-2);
+    font-weight: var(--weight-heading);
+    letter-spacing: var(--tracking-heading);
+  }
+  :where(.marketing) .heading-3 {
+    font-size: var(--text-heading-3);
+    font-weight: var(--weight-heading);
+    letter-spacing: var(--tracking-heading);
+  }
+  :where(.marketing) .lede {
+    margin: 0;
+    font-size: var(--text-lede);
+    line-height: var(--leading-body);
+    color: hsl(var(--muted-foreground));
+  }
+  :where(.marketing) .accent {
+    color: hsl(var(--app-primary));
+  }
+
+  :where(.marketing) .skip {
+    position: absolute;
+    left: var(--gap-4);
+    top: -4rem;
+    z-index: 10;
+    padding: var(--gap-2) var(--gap-4);
+    border-radius: var(--radius-2);
+    background: hsl(var(--app-primary));
+    color: hsl(var(--app-primary-foreground));
+  }
+  :where(.marketing) .skip:focus {
+    top: var(--gap-4);
+  }
+
+  :where(.marketing) .shell {
+    width: 100%;
+    max-width: var(--container-max);
+    margin: 0 auto;
+    padding: 0 var(--gutter);
+  }
+
+  :where(.marketing) .eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap-3);
+    font-family: var(--font-mono);
+    font-size: var(--text-eyebrow);
+    font-weight: 500;
+    letter-spacing: var(--tracking-eyebrow);
+    line-height: 1.2;
+    text-transform: uppercase;
+    color: hsl(var(--app-primary));
+  }
+  :where(.marketing) .eyebrow[data-quiet] {
+    color: hsl(var(--muted-foreground));
+  }
+  :where(.marketing) .status-dot {
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: hsl(var(--app-primary));
+    box-shadow: 0 0 12px hsl(var(--app-primary));
+  }
+  :where(.marketing) .status-dot[data-live] {
+    animation: marketing-live var(--duration-live) var(--ease-move) infinite;
+  }
+  @keyframes marketing-live {
+    50% {
+      box-shadow: 0 0 2px hsl(var(--app-primary));
+      opacity: 0.55;
+    }
+  }
+
+  :where(.marketing) .nav {
+    height: var(--nav-height);
+    display: flex;
+    align-items: center;
+    gap: var(--gap-7);
+    border-bottom: 1px solid hsl(var(--border));
+  }
+  :where(.marketing) .nav-links {
+    display: flex;
+    gap: var(--gap-7);
+    margin: 0 0 0 auto;
+    padding: 0;
+    list-style: none;
+  }
+  :where(.marketing) .nav-links a {
+    font-size: var(--text-small);
+    color: hsl(var(--muted-foreground));
+    transition: color var(--duration-base) var(--ease-standard);
+  }
+  :where(.marketing) .nav-links a:hover,
+  :where(.marketing) .nav-links a[aria-current="page"] {
+    color: hsl(var(--foreground));
+  }
+  :where(.marketing) .brand {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap-3);
+    font-family: var(--font-display);
+    font-size: var(--text-heading-2);
+    font-weight: var(--weight-display);
+    letter-spacing: var(--tracking-display);
+  }
+  :where(.marketing) .brand svg {
+    width: 1em;
+    height: 1.15em;
+    color: hsl(var(--app-primary));
+  }
+  :where(.marketing) .brand-period {
+    color: hsl(var(--app-primary));
+  }
+
+  :where(.marketing) .actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--gap-5);
+  }
+  :where(.marketing) .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap-3);
+    height: 52px;
+    padding: 0 var(--gap-6);
+    border: 0;
+    border-radius: var(--radius-3);
+    font: inherit;
+    font-size: var(--text-body);
+    font-weight: var(--weight-strong);
+    background: hsl(var(--app-primary));
+    color: hsl(var(--app-primary-foreground));
+    cursor: pointer;
+    transition:
+      transform var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-base) var(--ease-standard);
+  }
+  :where(.marketing) .button:hover {
+    transform: translateY(var(--lift));
+    box-shadow: 0 10px 30px -10px hsl(var(--app-primary) / 0.6);
+  }
+  :where(.marketing) .button-secondary {
+    background: transparent;
+    color: hsl(var(--foreground));
+    box-shadow: inset 0 0 0 1px hsl(var(--input));
+  }
+  :where(.marketing) .button-secondary:hover {
+    transform: none;
+    box-shadow: inset 0 0 0 1px hsl(var(--app-primary));
+  }
+  :where(.marketing) .button[data-size="small"] {
+    height: 42px;
+    padding: 0 var(--gap-5);
+    border-radius: var(--radius-3);
+    font-size: var(--text-small);
+  }
+  :where(.marketing) .text-link {
+    font-weight: 500;
+    color: hsl(var(--foreground));
+    border-bottom: 1px solid hsl(var(--input));
+    padding-bottom: 2px;
+    transition: border-color var(--duration-base) var(--ease-standard);
+  }
+  :where(.marketing) .text-link:hover {
+    border-color: hsl(var(--app-primary));
+  }
+
+  :where(.marketing) .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--section-gap);
+    padding: var(--section-padding) 0;
+  }
+  :where(.marketing) .section[data-compact] {
+    gap: var(--gap-5);
+    padding: var(--section-padding-compact) 0;
+  }
+  :where(.marketing) .section + .section,
+  :where(.marketing) .section[data-rule] {
+    border-top: 1px solid hsl(var(--border));
+  }
+  :where(.marketing) .section-heading {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-4);
+    max-width: var(--container-heading);
+  }
+  :where(.marketing) .section-heading h2 {
+    font-size: var(--text-display-2);
+  }
+
+  :where(.marketing) .card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-3);
+    padding: var(--gap-7);
+    border-radius: var(--radius-5);
+    overflow: hidden;
+    color: hsl(var(--card-foreground));
+    background:
+      radial-gradient(120% 80% at 0% 0%, hsl(var(--app-primary) / 0.12), transparent 60%),
+      hsl(var(--card));
+    box-shadow: inset 0 0 0 1px hsl(var(--border));
+    transition:
+      transform var(--duration-slow) var(--ease-standard),
+      box-shadow var(--duration-slow) var(--ease-standard);
+  }
+  :where(.marketing) .card[data-plain] {
+    background: hsl(var(--card));
+  }
+  :where(.marketing) .card[data-raised] {
+    box-shadow:
+      inset 0 0 0 1px hsl(var(--border)),
+      var(--elevation-2);
+  }
+  :where(.marketing) :is(a.card, .card[data-interactive]):hover {
+    transform: translateY(calc(var(--lift) * 3));
+    box-shadow:
+      inset 0 0 0 1px hsl(var(--app-primary) / 0.55),
+      0 24px 50px -28px hsl(var(--app-primary) / 0.6);
+  }
+  :where(.marketing) .card h3 {
+    font-size: var(--text-heading-3);
+    font-weight: var(--weight-heading);
+    letter-spacing: var(--tracking-heading);
+  }
+  :where(.marketing) .card p {
+    margin: 0;
+    color: hsl(var(--muted-foreground));
+  }
+  :where(.marketing) .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+    gap: var(--gap-5);
+  }
+
+  :where(.marketing) .footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap-6);
+    padding: var(--gap-7) 0 var(--gap-8);
+    border-top: 1px solid hsl(var(--border));
+    font-size: var(--text-small);
+    color: hsl(var(--muted-foreground));
+  }
+  :where(.marketing) .footer .brand {
+    font-size: var(--text-heading-3);
+    color: hsl(var(--foreground));
+  }
+  :where(.marketing) .footer-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-3) var(--gap-6);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  :where(.marketing) .footer-links a:hover {
+    color: hsl(var(--foreground));
+  }
+
+  :where(.marketing) .prose {
+    max-width: var(--measure);
+    font-size: 1.0625rem;
+    line-height: var(--leading-prose);
+    color: hsl(var(--foreground));
+  }
+  :where(.marketing) .prose > * + * {
+    margin-top: 1.1em;
+  }
+  :where(.marketing) .prose :is(h2, h3) {
+    margin-top: 2.2em;
+  }
+  :where(.marketing) .prose h2 {
+    font-size: var(--text-heading-1);
+  }
+  :where(.marketing) .prose h3 {
+    font-size: var(--text-heading-2);
+    font-weight: var(--weight-heading);
+    letter-spacing: var(--tracking-heading);
+  }
+  :where(.marketing) .prose :is(h2, h3) + * {
+    margin-top: 0.6em;
+  }
+  :where(.marketing) .prose p,
+  :where(.marketing) .prose :is(ul, ol) {
+    margin-bottom: 0;
+  }
+  :where(.marketing) .prose :is(ul, ol) {
+    padding-left: 1.4em;
+  }
+  :where(.marketing) .prose li + li {
+    margin-top: 0.4em;
+  }
+  :where(.marketing) .prose li::marker {
+    color: hsl(var(--app-primary));
+  }
+  :where(.marketing) .prose a {
+    color: hsl(var(--app-primary));
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.18em;
+  }
+  :where(.marketing) .prose strong {
+    font-weight: var(--weight-strong);
+  }
+  :where(.marketing) .prose blockquote {
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: var(--gap-5);
+    border-left: 3px solid hsl(var(--app-primary));
+    color: hsl(var(--muted-foreground));
+  }
+  :where(.marketing) .prose :not(pre) > code {
+    padding: 0.1em 0.35em;
+    border-radius: var(--radius-1);
+    font-family: var(--font-mono);
+    font-size: 0.88em;
+    background: hsl(var(--muted));
+  }
+  :where(.marketing) .prose pre {
+    overflow-x: auto;
+    padding: var(--gap-5);
+    border-radius: var(--radius-3);
+    font-family: var(--font-mono);
+    font-size: var(--text-caption);
+    line-height: 1.6;
+    background: hsl(var(--muted));
+  }
+  :where(.marketing) .prose hr {
+    border: 0;
+    border-top: 1px solid hsl(var(--border));
+    margin: 2.4em 0;
+  }
+  :where(.marketing) .prose figcaption,
+  :where(.marketing) .prose .aside {
+    font-size: var(--text-small);
+    color: hsl(var(--muted-foreground));
+  }
+  :where(.marketing) .prose .aside {
+    padding: var(--gap-5) var(--gap-6);
+    border-radius: var(--radius-4);
+    background: hsl(var(--muted));
+  }
+
+  @media (max-width: 760px) {
+    :where(.marketing) .nav-links {
+      display: none;
+    }
+    :where(.marketing) .nav > :last-child {
+      margin-left: auto;
+    }
+  }
+}

package/theme/public.css

@@ -6,7 +6,7 @@
  * Values are HSL channels, used as hsl(var(--x)) or hsl(var(--x) / .12).
  * Light is the default (:root); dark is the `.dark` class on <html>, as in template and Kingdom.
  * Colour meaning: lime = yours / live (--app-primary), blue = shared (--app-tertiary), pink = Signet (--app-quaternary).
- * Thread and work status colours are a separate layer: theme/agentic.css.
+ * Thread and work status colours are a separate layer: theme/status.css. Domain palettes: theme/domains.css; marketing grammar: theme/marketing.css.
  */
 
 @font-face {
@@ -67,6 +67,7 @@
   --border: 87 12% 86%;
   --input: 87 12% 82%;
   --ring: 84 69% 30%;
+  --shadow: 206 29% 7%; /* elevation: hsl(var(--shadow) / .3) */
   --radius: 0.75rem;
 
   /* Type */
@@ -109,4 +110,5 @@
   --border: 202 22% 15%;
   --input: 204 22% 19%;
   --ring: 83 88% 73%;
+  --shadow: 206 40% 2%;
 }

package/theme/{agentic.css → status.css}

@@ -1,5 +1,5 @@
 /*
- * @inixiative/config/theme/agentic.css — the status and badge layers for agentic apps (Foundry, Kingdom).
+ * @inixiative/config/theme/status.css — the status and badge layers for apps that show agent work (Foundry, Kingdom).
  *
  * Load after theme/public.css. Light is :root, dark is `.dark`, like public.css.
  *

package/versions.json

@@ -13,7 +13,7 @@
     "@types/bun"
   ],
   "ecosystem": {
-    "@inixiative/config": "0.5.183",
+    "@inixiative/config": "0.5.185",
     "@inixiative/json-rules": "3.16.0",
     "@inixiative/permissions": "0.18.0",
     "@inixiative/transitions": "0.6.0",
@@ -26,7 +26,7 @@
     "@inixiative/signet": "0.12.2",
     "@inixiative/kcp": "0.1.0",
     "@inixiative/archive": "0.33.0",
-    "@inixiative/agent-session": "0.9.0",
+    "@inixiative/agent-session": "0.10.0",
     "@inixiative/foundry-core": "0.5.10",
     "@inixiative/foundry": "0.5.7",
     "@inixiative/foundry-acp": "0.1.2"