slidev-theme-entaina 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Entaina
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# slidev-theme-entaina
+
+Tema de marca Entaina para [Slidev](https://sli.dev): look dirigido por tokens (mapeados del design system oficial), chrome de navegación propio y las tres variantes de pilar. Light-only por diseño.
+
+## Uso
+
+```bash
+npm i -D slidev-theme-entaina
+# o, mientras no esté publicado en npm:
+npm i -D github:Entaina/slidev-theme-entaina
+```
+
+```yaml
+---
+theme: slidev-theme-entaina
+---
+```
+
+Las fuentes (Lato, Comfortaa, JetBrains Mono, pesos 300–700) llegan como defaults del tema; el deck no necesita bloque `fonts:`.
+
+## Qué incluye
+
+- **`styles/tokens.css`** — la paleta Entaina como defaults en `:root`, más las variantes de pilar: `htmlAttrs: { data-theme: technology | innovation | people }` en el headmatter del deck.
+- **`styles/base.css`** — el look, 100% sobre tokens: atmósfera por layout, escala display, kickers `.eyebrow`/`.cover-kicker`, cover/section/quote estilizados, splits a sangre con `.panel .panel-before/.panel-after`, tablas, la portada oscura `layout: cover` + `class: bleed` (con `.bleed-note`), y el reveal de entrada escalonado (respeta `prefers-reduced-motion` y print).
+- **`global-top.vue`** — chrome de navegación: barra de progreso, bolitas laterales que se expanden al hover mostrando títulos, flechas anterior/siguiente y contador `n / total · %`. Se oculta en export y en modo presentador. Teclado, transiciones, overview (`o`) y export siguen siendo de Slidev.
+- **Componentes** (clases sobre HTML plano en las slides):
+  - KPI dashboard: `<div class="kpi-grid"><div class="kpi"><b>247</b><span>etiqueta</span></div>…</div>` — cifras display con rotación de colores de pilar, etiquetas mono; valores hero breves (≤6 caracteres).
+  - Código: los bloques fenced van en caja navy de marca con tokens oscuros (`setup/shiki.ts`, one-dark-pro en ambos esquemas) y soportan el resaltado de líneas de Slidev (` ```ts {2-3} `). Chip de fichero flotante: `<div class="code-file">worker.ts</div>` justo antes del fence.
+  - Kickers semánticos opt-in: `.eyebrow.success` / `.danger` / `.warning` — solo cuando el contenido afirma un estado.
+
+## Personalización
+
+El contrato son 27 tokens CSS (ver `styles/tokens.css` y `test/contract.test.mjs`). Para otra paleta, redefine los tokens en el `style.css` del proyecto — las variables cascadan, no hay que tocar el tema:
+
+```css
+/* style.css del deck: ejemplo de paleta alternativa */
+:root {
+  --bg: #ffffff;
+  --accent: #2563eb;
+  /* …resto del contrato… */
+}
+```
+
+Reglas propias del deck: en su `style.css`, en rem ajustado al lienzo 980×552 de Slidev (nunca vw/vh — el lienzo escala con un transform y las unidades de viewport se escalan doble).
+
+### Qué pilar usar
+
+- **Technology** (default): contenido técnico u operativo — sistemas, código, datos. En caso de duda, este.
+- **Innovation** (`data-theme: innovation`): lo nuevo — estrategia, propuestas, visión, roadmaps.
+- **People** (`data-theme: people`): personas en el centro — formación, talento, cultura, onboarding.
+
+Un pilar por deck (los tres colores de pilar siguen disponibles como acentos en todas las variantes), y los colores semánticos (`--green/--red/--orange`) siguen significando estado, no pilar.
+
+## Notas
+
+- Dos internals de Slidev ya resueltos por el CSS: `layout: two-cols` renderiza la clase `.two-columns` (slots en `.col-left`/`.col-right`) y `layout: cover` envuelve el contenido en un `div.my-auto`.
+- Las bolitas toman los títulos del primer heading de cada slide; si el heading va dentro de HTML crudo, añade `title:` al frontmatter de esa slide.
+- Export: el reveal de entrada anima al montar; si `slidev export` captura a medias, añade `--wait 1000`.
+
+## Desarrollo
+
+```bash
+npm install
+npm run dev     # example.md con theme: ./
+npm test        # contrato de tokens (node --test, sin dependencias)
+```

package/example.md

@@ -0,0 +1,149 @@
+---
+theme: ./
+title: Entaina · Slidev theme
+mdc: true
+---
+
+<div class="cover-kicker">SLIDEV-THEME-ENTAINA</div>
+
+# El tema Entaina<br>para Slidev
+
+<div class="cover-line">Look dirigido por tokens, chrome de navegación y las tres variantes de pilar.</div>
+
+<div class="cover-orbit" aria-hidden="true"><span>tokens</span><i></i><span>layouts</span><i></i><b>chrome</b></div>
+
+<!--
+Duración estimada: 30 s.
+Portada: kicker mono, display Comfortaa, órbita decorativa.
+-->
+
+---
+layout: section
+---
+
+# Todo sale<br>de los tokens
+
+Cambiar de paleta es redefinir variables — nada más.
+
+<!--
+Duración estimada: 20 s.
+Divisoria con barra de acento.
+-->
+
+---
+layout: two-cols
+layoutClass: gap-0
+title: Split a sangre
+---
+
+<div class="panel panel-before">
+  <div class="eyebrow">Antes</div>
+  <h1>Estilos<br>por deck</h1>
+  <p>Cada presentación reinventaba su look y su navegación.</p>
+</div>
+
+::right::
+
+<div class="panel panel-after">
+  <div class="eyebrow success">Ahora</div>
+  <h1>Un theme<br>versionado</h1>
+  <p>Un paquete lo aporta todo; el deck solo trae contenido.</p>
+</div>
+
+<!--
+Duración estimada: 40 s.
+Split edge-to-edge con .panel; el eyebrow del panel derecho va en verde.
+-->
+
+---
+title: Tabla y eyebrow
+---
+
+<div class="eyebrow">Contrato</div>
+
+# Qué aporta el theme
+
+| Pieza | Dónde vive |
+|---|---|
+| Paleta + variantes de pilar | `styles/tokens.css` |
+| Look base (layouts, tablas, bleed) | `styles/base.css` |
+| Chrome de navegación | `global-top.vue` |
+| Fuentes por defecto | `package.json` → `slidev.defaults` |
+
+<!--
+Duración estimada: 40 s.
+Tabla estilizada por el theme: cabecera acento, zebra.
+-->
+
+---
+title: Dashboard KPI
+---
+
+<div class="eyebrow">Dashboard</div>
+
+# Los valores hero, breves
+
+<div class="kpi-grid">
+  <div class="kpi"><b>6</b><span>KPIs máximo</span></div>
+  <div class="kpi"><b>≤6</b><span>caracteres hero</span></div>
+  <div class="kpi"><b>3</b><span>colores de pilar</span></div>
+  <div class="kpi"><b>scan</b><span>no lectura lineal</span></div>
+  <div class="kpi"><b>1</b><span>heading</span></div>
+  <div class="kpi"><b>100%</b><span>desde tokens</span></div>
+</div>
+
+<!--
+Duración estimada: 30 s.
+Dashboard: cifras display con rotación de pilares, etiquetas mono.
+-->
+
+---
+title: Snippet de código
+---
+
+<div class="eyebrow">Code</div>
+
+# Un punto de código, con foco
+
+<div class="code-file">slide.ts</div>
+
+```ts {2-3}
+export function slide(content: Content): Slide {
+  const focal = content.mainIdea()      // una sola idea
+  return compose(focal, content.supports.slice(0, 6))
+}
+```
+
+<!--
+Duración estimada: 30 s.
+Caja navy de marca con chip de fichero flotante; tokens Shiki oscuros del theme.
+-->
+
+---
+layout: quote
+---
+
+# El deck trae el contenido; el theme, todo lo demás.
+
+Principio del tema
+
+<!--
+Duración estimada: 20 s.
+Cita con comilla gigante; sin comillas literales en el texto.
+-->
+
+---
+layout: cover
+class: bleed
+---
+
+<div class="cover-kicker">Cierre</div>
+
+# Un activo de marca,<br>con ciclo de versión propio
+
+<div class="bleed-note">npm i -D slidev-theme-entaina · <strong>theme: slidev-theme-entaina</strong></div>
+
+<!--
+Duración estimada: 30 s.
+Full-bleed oscuro con rejilla en perspectiva y nota mono.
+-->

package/global-top.vue

@@ -0,0 +1,157 @@
+<!--
+  slidev-theme-entaina — deck navigation chrome: top progress bar, right-hand
+  slide dots that expand on hover to show slide titles, prev/next arrows
+  (bottom left) and a counter with reading percent (bottom right). Hidden in
+  print/export and presenter mode. Styled through the theme tokens.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useNav } from '@slidev/client'
+
+const nav = useNav()
+const current = computed(() => nav.currentPage.value)
+const total = computed(() => nav.total.value)
+const pct = computed(() => Math.round((current.value / total.value) * 100))
+const hidden = computed(() => nav.isPrintMode.value || (nav as any).isPresenter?.value)
+const titles = computed(() =>
+  nav.slides.value.map((s: any, i: number) => {
+    const raw = s?.meta?.slide?.title || `Diapositiva ${i + 1}`
+    const clean = raw.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim()
+    return clean.length > 46 ? `${clean.slice(0, 45)}…` : clean
+  }),
+)
+</script>
+
+<template>
+  <div v-if="!hidden" class="deck-chrome">
+    <div class="deck-progress" :style="{ width: pct + '%' }" />
+    <nav class="deck-dots" aria-label="Navegación por diapositivas">
+      <button
+        v-for="(t, i) in titles"
+        :key="i"
+        type="button"
+        class="deck-dot"
+        :aria-current="current === i + 1 ? 'true' : 'false'"
+        :aria-label="`Ir a ${t}`"
+        @click="nav.go(i + 1)"
+      >
+        <span class="deck-dot-label">{{ t }}</span>
+      </button>
+    </nav>
+    <div class="deck-arrows">
+      <button type="button" class="deck-arrow" :disabled="current <= 1" aria-label="Anterior" @click="nav.prev()">←</button>
+      <button type="button" class="deck-arrow" :disabled="current >= total" aria-label="Siguiente" @click="nav.next()">→</button>
+    </div>
+    <div class="deck-counter">{{ current }} / {{ total }} · {{ pct }}%</div>
+  </div>
+</template>
+
+<style scoped>
+.deck-chrome {
+  font-family: var(--font-mono);
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: 60;
+}
+.deck-progress {
+  background: var(--accent);
+  height: 4px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transition: width 0.3s ease;
+}
+.deck-dots {
+  backdrop-filter: blur(5px);
+  background: color-mix(in srgb, var(--bg) 70%, transparent);
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  max-height: 70dvh;
+  overflow: hidden auto;
+  padding: 7px;
+  pointer-events: auto;
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: width 0.2s;
+  width: 34px;
+}
+.deck-dots:hover,
+.deck-dots:focus-within {
+  border-radius: 16px;
+  width: min(240px, 40vw);
+}
+.deck-dot {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 15px;
+  color: var(--text-dim);
+  cursor: pointer;
+  display: grid;
+  font: 500 11px var(--font-mono);
+  gap: 0;
+  grid-template-columns: 8px minmax(0, 1fr);
+  min-height: 24px;
+  padding: 6px;
+  text-align: left;
+}
+.deck-dot::before {
+  background: currentColor;
+  border-radius: 50%;
+  content: '';
+  height: 8px;
+  width: 8px;
+}
+.deck-dot-label {
+  max-width: 0;
+  opacity: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.deck-dots:hover .deck-dot,
+.deck-dots:focus-within .deck-dot { gap: 9px; }
+.deck-dots:hover .deck-dot-label,
+.deck-dots:focus-within .deck-dot-label { max-width: 200px; opacity: 1; }
+.deck-dot[aria-current='true'] { background: var(--accent-dim); color: var(--accent); }
+.deck-dot:focus-visible,
+.deck-arrow:focus-visible { outline: 3px solid var(--node-b); outline-offset: 2px; }
+
+.deck-arrows {
+  bottom: 12px;
+  display: flex;
+  gap: 6px;
+  left: 20px;
+  pointer-events: auto;
+  position: absolute;
+}
+.deck-arrow {
+  background: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
+  border: 1px solid var(--border-bright);
+  border-radius: 50%;
+  color: var(--accent-dark, var(--accent));
+  cursor: pointer;
+  display: grid;
+  font-size: 14px;
+  height: 30px;
+  place-items: center;
+  width: 30px;
+}
+.deck-arrow:hover:not(:disabled) { background: var(--accent-dim); }
+.deck-arrow:disabled { cursor: default; opacity: 0.35; }
+
+.deck-counter {
+  bottom: 16px;
+  color: var(--text-dim);
+  font-size: 11px;
+  font-weight: 500;
+  position: absolute;
+  right: 20px;
+  text-shadow: 0 1px 3px color-mix(in srgb, var(--bg) 60%, transparent);
+}
+</style>

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "slidev-theme-entaina",
+  "version": "0.1.0",
+  "private": false,
+  "packageManager": "npm@11.19.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Entaina brand theme for Slidev: token-driven look, deck navigation chrome, and the three pillar variants (technology, innovation, people).",
+  "keywords": [
+    "slidev-theme",
+    "slidev",
+    "entaina"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Entaina/slidev-theme-entaina.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Entaina/slidev-theme-entaina/issues"
+  },
+  "homepage": "https://github.com/Entaina/slidev-theme-entaina#readme",
+  "files": [
+    "styles",
+    "setup",
+    "global-top.vue",
+    "example.md",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18.0.0",
+    "slidev": ">=0.48.0"
+  },
+  "slidev": {
+    "defaults": {
+      "fonts": {
+        "sans": "Lato",
+        "serif": "Comfortaa",
+        "mono": "JetBrains Mono",
+        "weights": "300,400,500,600,700"
+      }
+    },
+    "colorSchema": "light"
+  },
+  "scripts": {
+    "dev": "slidev example.md --open",
+    "build": "slidev build example.md",
+    "export": "slidev export example.md",
+    "test": "node --test test/"
+  },
+  "devDependencies": {
+    "@slidev/cli": "latest"
+  }
+}

package/setup/shiki.ts

@@ -0,0 +1,10 @@
+import { defineShikiSetup } from '@slidev/types'
+
+// Dark token theme on both schemes: code sits in the brand navy box
+// (--code-bg) whatever the deck's color scheme, per the Entaina look.
+export default defineShikiSetup(() => ({
+  themes: {
+    dark: 'one-dark-pro',
+    light: 'one-dark-pro',
+  },
+}))

package/styles/base.css

@@ -0,0 +1,379 @@
+/*
+ * slidev-theme-entaina — base look. Theme-agnostic: styles only through the
+ * token contract defined in ./tokens.css (see README). Sizing is in rem tuned
+ * to Slidev's 980×552 canvas — vw/vh double-scale under Slidev's transform.
+ * Slidev internals accounted for: `layout: two-cols` renders as .two-columns
+ * (slots in .col-left/.col-right); `layout: cover` wraps content in div.my-auto.
+ */
+
+/* Layout ground — this is a standalone theme with no slidev-theme-default
+   underneath, so the base sizing/padding every layout assumes lives here. */
+.slidev-layout {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-body);
+  box-sizing: border-box;
+  height: 100%;
+  padding: 2.5rem 3.5rem;
+}
+
+.slidev-layout h1,
+.slidev-layout h2,
+.slidev-layout h3 {
+  font-family: var(--font-display);
+  color: var(--text);
+  text-wrap: balance;
+}
+
+.slidev-layout code,
+.slidev-layout pre {
+  font-family: var(--font-mono);
+}
+
+.slidev-layout a { color: var(--accent); }
+.slidev-layout strong { color: var(--accent-dark, var(--accent)); }
+.slidev-layout blockquote {
+  border-left: 3px solid var(--accent);
+  background: var(--accent-dim);
+  color: var(--text-dim);
+}
+
+/* ---------- Atmosphere & typography ---------- */
+.slidev-layout {
+  background-image: radial-gradient(ellipse at 12% 88%, var(--accent-dim), transparent 42%);
+  overflow: hidden;
+  position: relative;
+}
+.slidev-layout.two-columns,
+.slidev-layout.quote {
+  background-image: radial-gradient(ellipse at 88% 18%, var(--node-b-dim), transparent 38%);
+}
+.slidev-layout.default {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.slidev-layout h1 { font-size: 2.55rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
+.slidev-layout p { color: var(--text-dim); font-size: 1.02rem; line-height: 1.5; }
+.slidev-layout small { font-family: var(--font-mono); }
+
+.cover-kicker,
+.eyebrow {
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  margin-bottom: 0.9rem;
+  text-transform: uppercase;
+}
+.eyebrow + h1 { margin-top: 0; }
+.figure-caption { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.66rem; margin-top: 0.9rem; }
+
+/* ---------- Cover (title) ---------- */
+.slidev-layout.cover {
+  align-items: center;
+  background-image:
+    radial-gradient(circle at 50% 38%, var(--node-a-dim), transparent 35%),
+    radial-gradient(var(--border) 1px, transparent 1px);
+  background-size: auto, 26px 26px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+.slidev-layout.cover h1 {
+  font-size: 3.8rem;
+  letter-spacing: -0.045em;
+  line-height: 1.02;
+  margin: 0.4rem auto 0;
+  max-width: 20ch;
+  text-wrap: balance;
+}
+.cover-line {
+  color: var(--text-dim);
+  font-size: 1.15rem;
+  line-height: 1.55;
+  margin: 1.5rem auto 0;
+  max-width: 44ch;
+}
+.cover-orbit {
+  align-items: center;
+  color: var(--text-dim);
+  display: flex;
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  font-weight: 600;
+  gap: 0.7rem;
+  justify-content: center;
+  letter-spacing: 0.1em;
+  margin-top: 2.4rem;
+  text-transform: uppercase;
+}
+.cover-orbit i { border-top: 2px dashed var(--accent); opacity: 0.7; width: 2.2rem; }
+.cover-orbit span {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  box-shadow: 0 0 0 5px var(--accent-dim);
+  padding: 0.35rem 0.7rem;
+}
+.cover-orbit b { background: var(--accent); border-radius: 999px; color: var(--bg); padding: 0.4rem 0.8rem; }
+
+/* ---------- Section divider ---------- */
+.slidev-layout.section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.slidev-layout.section h1 {
+  font-size: 3.3rem;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
+  text-align: left;
+}
+.slidev-layout.section h1::before {
+  background: var(--accent);
+  border-radius: 999px;
+  content: '';
+  display: block;
+  height: 5px;
+  margin-bottom: 1.4rem;
+  width: 3.2rem;
+}
+.slidev-layout.section p { font-size: 1.15rem; margin-left: 0; margin-top: 1.1rem; max-width: 40ch; padding-left: 0; text-align: left; }
+
+/* ---------- Quote ---------- */
+.slidev-layout.quote {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-inline: 4.5rem;
+  text-align: center;
+}
+.slidev-layout.quote h1::before {
+  color: var(--accent);
+  content: '\201C';
+  display: block;
+  font-family: Georgia, serif;
+  font-size: 6.5rem;
+  font-style: normal;
+  line-height: 0.55;
+  margin-bottom: 1.2rem;
+  opacity: 0.18;
+}
+.slidev-layout.quote h1 {
+  font-family: var(--font-display);
+  font-size: 1.85rem;
+  font-style: italic;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  line-height: 1.35;
+  max-width: 36ch;
+  text-wrap: balance;
+}
+.slidev-layout.quote p {
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 0.66rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  margin-top: 1.6rem;
+  text-transform: uppercase;
+}
+
+/* ---------- Two-cols: centered columns; `.panel` children go edge to edge ---------- */
+.slidev-layout.two-columns > .col-left,
+.slidev-layout.two-columns > .col-right {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+.slidev-layout.two-columns:has(.panel) {
+  background-image: none;
+  column-gap: 0;
+  padding: 0;
+}
+.slidev-layout.two-columns:has(.panel) > div { height: 100%; }
+.panel {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  padding: 2.6rem 3rem;
+}
+.panel h1 { font-size: 2.45rem; line-height: 1.1; margin: 0.55rem 0 0.9rem; }
+.panel p { font-size: 1rem; line-height: 1.45; max-width: 24ch; }
+.panel-before { background: var(--surface); }
+.panel-after { background: var(--surface2); }
+.panel-before .eyebrow { color: var(--text-dim); }
+/* Semantic kicker colors are opt-in: structure never implies a verdict. */
+.eyebrow.success { color: var(--green); }
+.eyebrow.danger { color: var(--red); }
+.eyebrow.warning { color: var(--orange); }
+
+/* ---------- Tables ---------- */
+.slidev-layout table { border-collapse: collapse; font-size: 0.8rem; margin-top: 0.9rem; width: 100%; }
+.slidev-layout th {
+  background: var(--accent);
+  color: var(--bg);
+  font-family: var(--font-mono);
+  font-size: 0.56rem;
+  letter-spacing: 0.07em;
+  padding: 0.6rem 0.75rem;
+  text-align: left;
+  text-transform: uppercase;
+}
+.slidev-layout td { border-bottom: 1px solid var(--border); color: var(--text-dim); padding: 0.55rem 0.75rem; }
+.slidev-layout tr:nth-child(even) td { background: var(--surface-elevated); }
+
+/* ---------- Full-bleed cover variant: `layout: cover` + `class: bleed` ---------- */
+.slidev-layout.cover.bleed {
+  align-items: flex-start;
+  background:
+    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--node-b) 55%, transparent), transparent 30%),
+    radial-gradient(circle at 22% 28%, color-mix(in srgb, var(--node-a) 70%, transparent), transparent 38%),
+    linear-gradient(135deg, var(--code-bg), var(--accent-dark, var(--accent)));
+  color: #fff;
+  justify-content: flex-end;
+  padding: 3rem 3.5rem;
+  text-align: left;
+}
+.slidev-layout.cover.bleed::before {
+  background-image:
+    linear-gradient(90deg, transparent 49.3%, rgba(255, 255, 255, 0.6) 49.3%, rgba(255, 255, 255, 0.6) 50.7%, transparent 50.7%),
+    linear-gradient(0deg, transparent 49.3%, rgba(255, 255, 255, 0.6) 49.3%, rgba(255, 255, 255, 0.6) 50.7%, transparent 50.7%);
+  background-size: 110px 110px;
+  content: '';
+  inset: 0;
+  opacity: 0.34;
+  pointer-events: none;
+  position: absolute;
+  transform: perspective(500px) rotateX(52deg) scale(1.7);
+  transform-origin: bottom;
+  z-index: 0;
+}
+.slidev-layout.cover.bleed > * { position: relative; z-index: 1; }
+.slidev-layout.cover.bleed > div { margin-bottom: 0; margin-top: auto; }
+.slidev-layout.cover.bleed h1 {
+  color: #fff;
+  font-size: 2.9rem;
+  letter-spacing: -0.04em;
+  margin: 0.4rem 0 0;
+  max-width: none;
+  text-align: left;
+}
+.slidev-layout.cover.bleed p { color: rgba(255, 255, 255, 0.8); }
+.slidev-layout.cover.bleed .cover-kicker,
+.slidev-layout.cover.bleed .eyebrow { color: rgba(255, 255, 255, 0.78); }
+.bleed-note {
+  background: rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.45);
+  border-radius: 0.6rem;
+  color: rgba(255, 255, 255, 0.88);
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 0.92rem;
+  line-height: 1.5;
+  margin-top: 1.5rem;
+  padding: 0.8rem 1.05rem;
+}
+.bleed-note strong { color: #fff; }
+
+/* ---------- Components ---------- */
+/* KPI dashboard: <div class="kpi-grid"> <div class="kpi"><b>247</b><span>label</span></div> … </div>
+   Hero values short (≤6 chars); pillar colors rotate per card. */
+.kpi-grid {
+  display: grid;
+  gap: 1.1rem;
+  grid-template-columns: repeat(3, 1fr);
+  margin-top: 1.6rem;
+}
+.kpi {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 0.9rem;
+  min-width: 0;
+  padding: 1.2rem 1.1rem;
+}
+.kpi b {
+  color: var(--accent-dark, var(--accent));
+  display: block;
+  font-family: var(--font-display);
+  font-size: 3rem;
+  font-weight: 700;
+  letter-spacing: -0.07em;
+  line-height: 1;
+}
+.kpi:nth-child(3n+2) b { color: var(--node-b); }
+.kpi:nth-child(3n) b { color: var(--node-c); }
+.kpi span {
+  color: var(--text-dim);
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  margin-top: 0.6rem;
+  text-transform: uppercase;
+}
+
+/* Code blocks: Shiki tokens come from setup/shiki.ts (dark, brand-adjacent);
+   the box itself is the Entaina navy. background needs !important because
+   Shiki inlines its theme's background on the <pre>. */
+.slidev-layout .slidev-code,
+.slidev-layout pre.shiki {
+  background: var(--code-bg) !important;
+  border-radius: 1rem;
+  box-shadow: 0 12px 32px color-mix(in srgb, var(--code-bg) 18%, transparent);
+  font-size: 0.92rem;
+  line-height: 1.6;
+  padding: 1.4rem 1.6rem;
+}
+/* Floating filename chip — place immediately before the fence:
+   <div class="code-file">worker.ts</div> */
+.code-file {
+  background: var(--accent);
+  border-radius: 0.35rem;
+  color: var(--bg);
+  display: block;
+  font: 600 0.68rem var(--font-mono);
+  margin-bottom: -0.85rem;
+  margin-left: 1.2rem;
+  padding: 0.3rem 0.65rem;
+  position: relative;
+  width: fit-content;
+  z-index: 1;
+}
+
+/* ---------- Staggered reveal on slide entry ---------- */
+@media (prefers-reduced-motion: no-preference) {
+  .slidev-layout > *,
+  .slidev-layout > .my-auto > * { animation: ve-reveal 0.5s ease both; }
+  .slidev-layout > .my-auto { animation: none; }
+  .slidev-layout > *:nth-child(2),
+  .slidev-layout > .my-auto > *:nth-child(2) { animation-delay: 0.1s; }
+  .slidev-layout > *:nth-child(3),
+  .slidev-layout > .my-auto > *:nth-child(3) { animation-delay: 0.2s; }
+  .slidev-layout > *:nth-child(4),
+  .slidev-layout > .my-auto > *:nth-child(4) { animation-delay: 0.3s; }
+  .slidev-layout > *:nth-child(5),
+  .slidev-layout > .my-auto > *:nth-child(5) { animation-delay: 0.4s; }
+}
+@keyframes ve-reveal {
+  from { opacity: 0; transform: translateY(16px); }
+}
+@media print {
+  .slidev-layout > *,
+  .slidev-layout > .my-auto > * { animation: none !important; }
+}
+
+/* ---------- Short-viewport adjustments ---------- */
+@media (max-height: 600px) {
+  .cover-orbit { margin-top: 1.2rem; }
+  .panel { padding: 1.6rem 2.2rem; }
+}

package/styles/index.ts

@@ -0,0 +1,2 @@
+import './tokens.css'
+import './base.css'

package/styles/tokens.css

@@ -0,0 +1,80 @@
+/*
+ * Entaina — default theme.
+ * Mapped from the official tokens at https://design-system.entaina.ai/ (Style Dictionary).
+ * Light-only by design: treating single-theme as deliberate is correct for this theme.
+ * Do not wrap these values in prefers-color-scheme media queries.
+ *
+ * Fonts (Google Fonts):
+ * <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+ * Comfortaa is the display face (headings, labels); Lato is the body face.
+ * Entaina does not define a mono face; JetBrains Mono is this theme.s choice.
+ */
+
+:root {
+  --font-display: 'Comfortaa', sans-serif;
+  --font-body: 'Lato', sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
+
+  /* Ground — Technology pillar (hoki) is the default */
+  --bg: #f1f6fa;                             /* hoki-50 */
+  --surface: #f5f5f5;                        /* chicago-50 */
+  --surface2: #e8e8e8;                       /* chicago-100 (surface-alt) */
+  --surface-elevated: #ffffff;
+  --border: #d4d4d4;                         /* chicago-200 */
+  --border-bright: #bababa;                  /* chicago-300 */
+  --text: #353535;                           /* chicago-900 */
+  --text-dim: #717171;                       /* chicago-600; chicago-500 #898989 fails small-text contrast on light surfaces */
+
+  /* Accent — primary pillar color */
+  --accent: #6b859f;                         /* hoki-500 */
+  --accent-dark: #4d6073;                    /* hoki-700 */
+  --accent-dim: rgba(107, 133, 159, 0.12);
+
+  /* Diagram node colors — the three Entaina pillars, always present */
+  --node-a: #6b859f;                         /* Technology (hoki-500) */
+  --node-a-dim: rgba(107, 133, 159, 0.12);
+  --node-b: #de865c;                         /* Innovation (copperfield-400) */
+  --node-b-dim: rgba(222, 134, 92, 0.14);
+  --node-c: #bd9947;                         /* People (golden-tainoi-400; the 200 base is too pale for strokes on light) */
+  --node-c-dim: rgba(248, 207, 115, 0.20);
+
+  /* Semantic status */
+  --green: #008d3d;                          /* success */
+  --green-dim: rgba(0, 141, 61, 0.10);
+  --red: #e7000b;                            /* danger-600; the base #fb2c36 is for fills, not small text */
+  --red-dim: rgba(251, 44, 54, 0.10);
+  --orange: #ca3500;                         /* warning-dark for text; base warning is #ff8904 */
+  --orange-dim: rgba(255, 137, 4, 0.14);
+  --info: #585eca;                           /* blue-600 */
+  --info-dim: rgba(88, 94, 202, 0.10);
+
+  /* Code blocks */
+  --code-bg: #2f324a;                        /* blue-900 */
+  --code-text: #e0e5ff;                      /* blue-100 */
+}
+
+/* Innovation pillar variant — copperfield leads */
+[data-theme="innovation"] {
+  --bg: #fff1e8;                             /* copperfield-50 */
+  --accent: #c37149;                         /* copperfield-500; the official primary #de865c stays for fills via --node-b */
+  --accent-dark: #834e35;                    /* copperfield-700 */
+  --accent-dim: rgba(222, 134, 92, 0.14);
+  --node-a: #de865c;
+  --node-a-dim: rgba(222, 134, 92, 0.14);
+  --node-b: #6b859f;
+  --node-b-dim: rgba(107, 133, 159, 0.12);
+}
+
+/* People pillar variant — golden tainoi leads */
+[data-theme="people"] {
+  --bg: #fff4d0;                             /* golden-tainoi-50 */
+  --accent: #a3853f;                         /* golden-tainoi-500 for readable accents */
+  --accent-dark: #6d5b35;                    /* golden-tainoi-700 */
+  --accent-dim: rgba(248, 207, 115, 0.24);
+  --node-a: #bd9947;
+  --node-a-dim: rgba(248, 207, 115, 0.20);
+  --node-b: #de865c;
+  --node-b-dim: rgba(222, 134, 92, 0.14);
+  --node-c: #6b859f;
+  --node-c-dim: rgba(107, 133, 159, 0.12);
+}