@troshab/slidev-theme-troshab 0.1.0

package/styles/base.css

@@ -0,0 +1,1053 @@
+/* ============================================
+   slidev-theme-troshab — Typography & Base Styles
+   ============================================
+
+   Dyslexia-friendly defaults based on:
+   - British Dyslexia Association guidelines
+   - WCAG 2.1 accessibility standards
+   - ISO 9241 display ergonomics
+   ============================================ */
+
+/* Import color system */
+@import './colors.css';
+
+/* ============================================
+   1. @font-face — IBM Plex (local)
+   ============================================ */
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('../fonts/IBMPlexSans-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ============================================
+   2. CSS Custom Properties (Typography & Layout)
+   Note: Colors are defined in colors.css
+   ============================================ */
+
+:root {
+  /* --- Fonts --- */
+  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'IBM Plex Mono', 'Consolas', 'Monaco', monospace;
+
+  /* --- Typography Scale (3 main + 1 small) ---
+     h1 = 57px, h2 = 43px (also h3), body = 24px, small = 18px.
+  */
+  --font-size-h1: 3.5625rem;      /* 57px */
+  --font-size-h2: 2.6875rem;      /* 43px */
+  --font-size-base: 1.5rem;       /* 24px — body text */
+  --font-size-small: 1.125rem;    /* 18px — captions, labels, code */
+
+  /* --- Font Weights --- */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* --- Line Heights (role-based) --- */
+  --line-height-heading: 1.15;    /* tight for 1-2 line headings */
+  --line-height-body: 1.35;       /* slides with short text blocks */
+  --line-height-reading: 1.5;     /* longer paragraphs, BDA recommended */
+  --line-height-list: 1.4;
+  --line-height-code: 1.4;
+
+  /* --- Letter & Word Spacing (dyslexia-friendly) ---
+     Zorzi et al. (2012, PNAS): letter-spacing reduces crowding.
+     BDA 2018: word/letter ratio >= 3.5x. Ours: 4.0x (above minimum). */
+  --letter-spacing-body: 0.02em;
+  --word-spacing-body: 0.08em;
+  --letter-spacing-heading: 0.01em;
+
+  /* --- Spacing System (8-point grid) ---
+     Based on 8px base unit for visual rhythm.
+     Fibonacci extras: 13px, 21px for special cases.
+  */
+  --space-xs: 0.5rem;     /* 8px — tight gaps */
+  --space-sm: 1rem;       /* 16px — default gap */
+  --space-md: 1.5rem;     /* 24px — section gaps */
+  --space-lg: 2rem;       /* 32px — large gaps */
+  --space-xl: 3rem;       /* 48px — section padding */
+  --space-2xl: 4rem;      /* 64px — major sections */
+
+  /* Fibonacci extras */
+  --space-fib-sm: 0.8125rem;  /* 13px */
+  --space-fib-md: 1.3125rem;  /* 21px */
+
+  /* Legacy spacing aliases */
+  --paragraph-spacing: 0.75em;
+  --list-item-spacing: 0.25em;
+  --heading-spacing: 1.5em;
+
+  /* --- Measure (line length) --- */
+  --measure: 65ch;
+  --measure-narrow: 45ch;
+
+  /* --- Layout --- */
+  --slide-padding: var(--space-lg);
+  --slide-gap: var(--space-sm);
+
+  /* --- Safe-zone for projectors/TV overscan (5% default) --- */
+  --safe-inset-x: 5%;
+  --safe-inset-y: 5%;
+}
+
+/* ============================================
+   3. Slidev Overrides
+   ============================================ */
+
+/* Override Slidev's scoped bg-white/bg-dark on .slidev-slide-content[data-v-*] */
+.slidev-slide-content {
+  background-color: var(--color-bg) !important;
+}
+
+/* ============================================
+   4. Base Typography
+   ============================================ */
+
+.slidev-layout {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-body);
+  letter-spacing: var(--letter-spacing-body);
+  word-spacing: var(--word-spacing-body);
+  color: var(--color-text);
+  padding: var(--safe-inset-y) var(--safe-inset-x);
+  height: 100%;
+  width: 100%;
+}
+
+/* --- Paragraphs --- */
+.slidev-layout p {
+  margin-block: var(--paragraph-spacing);
+  max-width: var(--measure);
+  text-align: left;
+}
+
+/* --- Headings --- */
+.slidev-layout h1,
+.slidev-layout h2,
+.slidev-layout h3,
+.slidev-layout h4 {
+  line-height: var(--line-height-heading);
+  letter-spacing: var(--letter-spacing-heading);
+  word-spacing: normal;
+  font-style: normal;
+  text-transform: none;
+}
+
+.slidev-layout h1 {
+  font-size: var(--font-size-h1);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+  margin-block-end: var(--space-sm);
+}
+
+.slidev-layout h2 {
+  font-size: var(--font-size-h2);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-heading);
+  margin-block-start: var(--space-lg);
+  margin-block-end: var(--space-sm);
+  opacity: 0.9;
+}
+
+.slidev-layout h3 {
+  font-size: var(--font-size-h2);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-heading);
+  margin-block-start: var(--space-md);
+  margin-block-end: var(--space-xs);
+}
+
+/* Remove margin from first heading in slide */
+.slidev-layout > h1:first-child,
+.slidev-layout > h2:first-child,
+.slidev-layout > h3:first-child {
+  margin-block-start: 0;
+}
+
+/* --- Lists --- */
+.slidev-layout ul,
+.slidev-layout ol {
+  margin-block: var(--paragraph-spacing);
+  margin-inline-start: 1.5em;
+  line-height: var(--line-height-list);
+  text-align: left;
+  max-width: var(--measure);
+}
+
+.slidev-layout li {
+  margin-block: var(--list-item-spacing);
+}
+
+.slidev-layout ul {
+  list-style-type: disc;
+}
+
+.slidev-layout ol {
+  list-style-type: decimal;
+}
+
+/* Nested lists */
+.slidev-layout ul ul,
+.slidev-layout ol ol,
+.slidev-layout ul ol,
+.slidev-layout ol ul {
+  margin-block: 0.25em;
+}
+
+/* --- Strong/Bold --- */
+.slidev-layout strong,
+.slidev-layout b {
+  font-weight: var(--font-weight-semibold);
+}
+
+/* --- Emphasis (minimal italic usage) --- */
+.slidev-layout em,
+.slidev-layout i {
+  /* Italic only for book titles, foreign terms — not for emphasis */
+  font-style: italic;
+}
+
+/* --- Links --- */
+.slidev-layout a {
+  color: var(--color-primary);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+/* ============================================
+   4. Code & Monospace
+   ============================================ */
+
+.slidev-layout pre,
+.slidev-layout code {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-code);
+  font-variant-ligatures: none;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+  word-spacing: normal;
+}
+
+.slidev-layout pre {
+  border-radius: 0.5rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+/* Hide Slidev's built-in copy button on code blocks */
+.slidev-code-copy {
+  display: none;
+}
+
+/* Border only on native Shiki code blocks (not on pre inside CodeHighlight/CodeDiff) */
+.slidev-layout pre.slidev-code {
+  border: 1px solid var(--color-border);
+}
+
+/* Reset .slidev-layout pre overrides for CodeHighlight/CodeDiff inner pre */
+.code-hl pre,
+.code-diff pre {
+  margin: 0;
+  border-radius: 0;
+  border: none;
+}
+
+/* Language label bar above code blocks (via Shiki transformer data-lang attribute) */
+.slidev-layout pre[data-lang] {
+  position: relative;
+  /* Override Slidev's --slidev-code-padding (applied with !important) to make room for the label */
+  --slidev-code-padding: 2.25rem 8px 8px 8px;
+}
+
+.slidev-layout pre[data-lang]::before {
+  content: attr(data-lang);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0.25rem 0.75rem;
+  font-family: var(--font-mono);
+  font-size: 0.8em;
+  font-weight: var(--font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-tertiary);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--shiki-color-background, var(--color-bg-muted));
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.slidev-layout code {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  border-radius: 0.25rem;
+  background-color: var(--color-bg-muted);
+}
+
+.slidev-layout pre code {
+  padding: 0;
+  background-color: transparent;
+}
+
+/* ============================================
+   5. Tables
+   ============================================ */
+
+.slidev-layout table {
+  width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+
+.slidev-layout th,
+.slidev-layout td {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border: 1px solid var(--color-border);
+  text-align: left;
+}
+
+.slidev-layout th {
+  background-color: var(--color-bg-muted);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ============================================
+   6. Blockquotes
+   ============================================ */
+
+.slidev-layout blockquote {
+  padding-left: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-left: 4px solid var(--color-border-strong);
+  color: var(--color-text-secondary);
+  font-style: normal; /* No italic for readability */
+  max-width: var(--measure);
+}
+
+/* ============================================
+   7. Layout Styles — slide (universal layout)
+   ============================================ */
+
+/* --- 7a. Fullscreen Mode --- */
+.slide-fullscreen {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.slide-no-padding {
+  padding: 0;
+}
+
+.slidev-layout.slide-no-padding {
+  padding: 0;
+}
+
+/* Background layer (edge-to-edge, behind content) */
+.slide-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+}
+
+/* Auto-sizing for media in bg slots */
+.slide-bg img, .slide-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.slide-bg iframe { width: 100%; height: 100%; border: 0; }
+.slide-bg > div { width: 100%; height: 100%; }
+.slide-bg > p { margin: 0; height: 100%; }
+.slide-bg > p > img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+.slide-content {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Center-aligned content: headings and paragraphs follow */
+.slide-content h1,
+.slide-content h2,
+.slide-content p { text-align: inherit; }
+
+/* Overlay text: invariant (always light text on dark overlay, regardless of theme) */
+.slide-fullscreen .slide-bg:has(.bg-overlay-dark) ~ .slide-content {
+  color: var(--color-drac-fg-50);
+  text-shadow: 0 2px 4px color-mix(in srgb, var(--color-black) 30%, transparent);
+}
+
+.slide-fullscreen .slide-bg:has(.bg-overlay-dark) ~ .slide-content h1,
+.slide-fullscreen .slide-bg:has(.bg-overlay-dark) ~ .slide-content h2,
+.slide-fullscreen .slide-bg:has(.bg-overlay-dark) ~ .slide-content h3,
+.slide-fullscreen .slide-bg:has(.bg-overlay-dark) ~ .slide-content p {
+  color: inherit;
+  text-shadow: inherit;
+}
+
+.slide-fullscreen .slide-bg:has(.bg-overlay-light) ~ .slide-content {
+  color: var(--color-drac-fg-900);
+}
+
+.slide-fullscreen .slide-bg:has(.bg-overlay-light) ~ .slide-content h1,
+.slide-fullscreen .slide-bg:has(.bg-overlay-light) ~ .slide-content h2,
+.slide-fullscreen .slide-bg:has(.bg-overlay-light) ~ .slide-content h3,
+.slide-fullscreen .slide-bg:has(.bg-overlay-light) ~ .slide-content p {
+  color: inherit;
+}
+
+/* Background utility classes (for use in ::bg:: / ::left-bg:: / ::right-bg:: slots) */
+.bg-primary { background-color: var(--color-primary); }
+.bg-success { background-color: var(--color-success); }
+.bg-warning { background-color: var(--color-warning); }
+.bg-danger  { background-color: var(--color-danger); }
+.bg-info    { background-color: var(--color-info); }
+.bg-soft    { background-color: var(--color-bg-soft); }
+.bg-muted   { background-color: var(--color-bg-muted); }
+.bg-gradient         { background: var(--gradient-primary); }
+.bg-gradient-section { background: var(--gradient-section); }
+
+/* --- Colored background auto text color (fullscreen) --- */
+.slide-fullscreen .slide-bg:has(.bg-primary) ~ .slide-content { color: var(--color-primary-foreground); }
+.slide-fullscreen .slide-bg:has(.bg-success) ~ .slide-content { color: var(--color-success-foreground); }
+.slide-fullscreen .slide-bg:has(.bg-warning) ~ .slide-content { color: var(--color-warning-foreground); }
+.slide-fullscreen .slide-bg:has(.bg-danger) ~ .slide-content { color: var(--color-danger-foreground); }
+.slide-fullscreen .slide-bg:has(.bg-info) ~ .slide-content { color: var(--color-info-foreground); }
+
+/* soft/muted are light surfaces in both themes — keep default text */
+.slide-fullscreen .slide-bg:has(.bg-soft) ~ .slide-content { color: var(--color-text); }
+.slide-fullscreen .slide-bg:has(.bg-muted) ~ .slide-content { color: var(--color-text); }
+
+/* Headings inherit adjusted color (fullscreen) */
+.slide-fullscreen .slide-bg:has(.bg-primary) ~ .slide-content h1,
+.slide-fullscreen .slide-bg:has(.bg-primary) ~ .slide-content h2,
+.slide-fullscreen .slide-bg:has(.bg-primary) ~ .slide-content h3,
+.slide-fullscreen .slide-bg:has(.bg-primary) ~ .slide-content p,
+.slide-fullscreen .slide-bg:has(.bg-success) ~ .slide-content h1,
+.slide-fullscreen .slide-bg:has(.bg-success) ~ .slide-content h2,
+.slide-fullscreen .slide-bg:has(.bg-success) ~ .slide-content h3,
+.slide-fullscreen .slide-bg:has(.bg-success) ~ .slide-content p,
+.slide-fullscreen .slide-bg:has(.bg-warning) ~ .slide-content h1,
+.slide-fullscreen .slide-bg:has(.bg-warning) ~ .slide-content h2,
+.slide-fullscreen .slide-bg:has(.bg-warning) ~ .slide-content h3,
+.slide-fullscreen .slide-bg:has(.bg-warning) ~ .slide-content p,
+.slide-fullscreen .slide-bg:has(.bg-danger) ~ .slide-content h1,
+.slide-fullscreen .slide-bg:has(.bg-danger) ~ .slide-content h2,
+.slide-fullscreen .slide-bg:has(.bg-danger) ~ .slide-content h3,
+.slide-fullscreen .slide-bg:has(.bg-danger) ~ .slide-content p,
+.slide-fullscreen .slide-bg:has(.bg-info) ~ .slide-content h1,
+.slide-fullscreen .slide-bg:has(.bg-info) ~ .slide-content h2,
+.slide-fullscreen .slide-bg:has(.bg-info) ~ .slide-content h3,
+.slide-fullscreen .slide-bg:has(.bg-info) ~ .slide-content p { color: inherit; }
+
+/* --- Colored background auto text color (split panels) --- */
+.slide-panel .slide-bg:has(.bg-primary) ~ .slide-panel-content { color: var(--color-primary-foreground); }
+.slide-panel .slide-bg:has(.bg-success) ~ .slide-panel-content { color: var(--color-success-foreground); }
+.slide-panel .slide-bg:has(.bg-warning) ~ .slide-panel-content { color: var(--color-warning-foreground); }
+.slide-panel .slide-bg:has(.bg-danger) ~ .slide-panel-content { color: var(--color-danger-foreground); }
+.slide-panel .slide-bg:has(.bg-info) ~ .slide-panel-content { color: var(--color-info-foreground); }
+
+.slide-panel .slide-bg:has(.bg-soft) ~ .slide-panel-content { color: var(--color-text); }
+.slide-panel .slide-bg:has(.bg-muted) ~ .slide-panel-content { color: var(--color-text); }
+
+/* Split panel headings inherit */
+.slide-panel .slide-bg:has(.bg-primary) ~ .slide-panel-content h1,
+.slide-panel .slide-bg:has(.bg-primary) ~ .slide-panel-content h2,
+.slide-panel .slide-bg:has(.bg-primary) ~ .slide-panel-content h3,
+.slide-panel .slide-bg:has(.bg-primary) ~ .slide-panel-content p,
+.slide-panel .slide-bg:has(.bg-success) ~ .slide-panel-content h1,
+.slide-panel .slide-bg:has(.bg-success) ~ .slide-panel-content h2,
+.slide-panel .slide-bg:has(.bg-success) ~ .slide-panel-content h3,
+.slide-panel .slide-bg:has(.bg-success) ~ .slide-panel-content p,
+.slide-panel .slide-bg:has(.bg-warning) ~ .slide-panel-content h1,
+.slide-panel .slide-bg:has(.bg-warning) ~ .slide-panel-content h2,
+.slide-panel .slide-bg:has(.bg-warning) ~ .slide-panel-content h3,
+.slide-panel .slide-bg:has(.bg-warning) ~ .slide-panel-content p,
+.slide-panel .slide-bg:has(.bg-danger) ~ .slide-panel-content h1,
+.slide-panel .slide-bg:has(.bg-danger) ~ .slide-panel-content h2,
+.slide-panel .slide-bg:has(.bg-danger) ~ .slide-panel-content h3,
+.slide-panel .slide-bg:has(.bg-danger) ~ .slide-panel-content p,
+.slide-panel .slide-bg:has(.bg-info) ~ .slide-panel-content h1,
+.slide-panel .slide-bg:has(.bg-info) ~ .slide-panel-content h2,
+.slide-panel .slide-bg:has(.bg-info) ~ .slide-panel-content h3,
+.slide-panel .slide-bg:has(.bg-info) ~ .slide-panel-content p { color: inherit; }
+
+/* bgOverlay detection for split panels */
+.slide-panel .slide-bg:has(.bg-overlay-dark) ~ .slide-panel-content { color: var(--color-drac-fg-50); text-shadow: 0 2px 4px color-mix(in srgb, var(--color-black) 30%, transparent); }
+.slide-panel .slide-bg:has(.bg-overlay-dark) ~ .slide-panel-content h1,
+.slide-panel .slide-bg:has(.bg-overlay-dark) ~ .slide-panel-content h2,
+.slide-panel .slide-bg:has(.bg-overlay-dark) ~ .slide-panel-content h3,
+.slide-panel .slide-bg:has(.bg-overlay-dark) ~ .slide-panel-content p { color: inherit; text-shadow: inherit; }
+.slide-panel .slide-bg:has(.bg-overlay-light) ~ .slide-panel-content { color: var(--color-drac-fg-900); }
+.slide-panel .slide-bg:has(.bg-overlay-light) ~ .slide-panel-content h1,
+.slide-panel .slide-bg:has(.bg-overlay-light) ~ .slide-panel-content h2,
+.slide-panel .slide-bg:has(.bg-overlay-light) ~ .slide-panel-content h3,
+.slide-panel .slide-bg:has(.bg-overlay-light) ~ .slide-panel-content p { color: inherit; }
+
+/* --- 7b. Columns Mode --- */
+.slide-columns {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.slide-title {
+  margin-bottom: var(--space-sm);
+}
+
+.slide-title h1,
+.slide-title h2 {
+  margin-bottom: 0;
+}
+
+/* Footnote variant: pushes hr to bottom */
+.slide-footnote .slide-single {
+  display: flex;
+  flex-direction: column;
+}
+
+.slide-footnote .slide-single hr {
+  margin-top: auto;
+  border: none;
+  border-top: 1px solid var(--color-border);
+  width: 100%;
+}
+
+.slide-footnote .slide-single hr ~ ol,
+.slide-footnote .slide-single hr ~ p {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-reading);
+}
+
+.slide-footnote .slide-single hr ~ ol {
+  margin-inline-start: 1em;
+}
+
+.slide-subtitle {
+  margin-bottom: var(--space-sm);
+  color: var(--color-text-secondary);
+}
+
+.slide-single {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+
+.slide-grid {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.slide-col {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.slide-col p,
+.slide-col ul {
+  max-width: var(--measure-narrow);
+}
+
+.slide-col-title {
+  padding-bottom: var(--space-sm);
+  margin-bottom: var(--space-sm);
+  border-bottom: 2px solid var(--color-border);
+}
+
+.slide-col-title h3 {
+  margin: 0;
+}
+
+.slide-col-body {
+  flex: 1;
+}
+
+/* Per-column backgrounds */
+.slide-col-bg-soft { background: var(--color-bg-soft); border-radius: 0.5rem; padding: 1rem; }
+.slide-col-bg-muted { background: var(--color-bg-muted); border-radius: 0.5rem; padding: 1rem; }
+.slide-col-bg-primary { background: var(--color-primary); color: var(--color-primary-foreground); border-radius: 0.5rem; padding: 1rem; }
+.slide-col-bg-success { background: var(--color-success); color: var(--color-success-foreground); border-radius: 0.5rem; padding: 1rem; }
+.slide-col-bg-warning { background: var(--color-warning); color: var(--color-warning-foreground); border-radius: 0.5rem; padding: 1rem; }
+.slide-col-bg-danger { background: var(--color-danger); color: var(--color-danger-foreground); border-radius: 0.5rem; padding: 1rem; }
+.slide-col-bg-info { background: var(--color-info); color: var(--color-info-foreground); border-radius: 0.5rem; padding: 1rem; }
+
+.slide-col-bg-primary h1, .slide-col-bg-primary h2, .slide-col-bg-primary h3,
+.slide-col-bg-success h1, .slide-col-bg-success h2, .slide-col-bg-success h3,
+.slide-col-bg-warning h1, .slide-col-bg-warning h2, .slide-col-bg-warning h3,
+.slide-col-bg-danger h1, .slide-col-bg-danger h2, .slide-col-bg-danger h3,
+.slide-col-bg-info h1, .slide-col-bg-info h2, .slide-col-bg-info h3 { color: inherit; }
+
+/* Per-column border */
+.slide-col-border { border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1rem; }
+
+/* --- 7c. Split Mode --- */
+.slide-split {
+  display: grid;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  position: relative;
+}
+
+.slidev-layout.slide-split {
+  padding: 0;
+}
+
+.slide-panel {
+  position: relative;
+  overflow: hidden;
+}
+
+.slide-panel-bg-only {
+  display: flex;
+}
+
+.slide-panel-bg-only .slide-bg {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.slide-panel-content {
+  padding: var(--safe-inset-y) var(--safe-inset-x);
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+  height: 100%;
+}
+
+/* When panel has both bg and content, overlay content on bg */
+.slide-panel:not(.slide-panel-bg-only) .slide-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+/* --- 7d. Footer (all modes) --- */
+.slide-footer {
+  padding: var(--space-xs) var(--safe-inset-x);
+  font-size: var(--font-size-small);
+  color: var(--color-text-tertiary);
+  margin-top: auto;
+  position: relative;
+  z-index: 2;
+  border-top: 1px solid var(--color-border);
+}
+
+/* In padded layouts (columns, fullscreen), extend footer to full slide width */
+.slide-columns > .slide-footer,
+.slide-fullscreen:not(.slide-no-padding) > .slide-footer {
+  margin-left: calc(var(--safe-inset-x) * -1);
+  margin-right: calc(var(--safe-inset-x) * -1);
+}
+
+/* ============================================
+   8. Component Styles
+   ============================================ */
+
+/* Tags component */
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.tag {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  border-radius: 9999px;
+  font-size: var(--font-size-small);
+  background-color: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+
+/* Button components */
+.btn {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+}
+
+.btn-success {
+  background-color: var(--color-success);
+  color: var(--color-success-foreground);
+}
+
+.btn-danger {
+  background-color: var(--color-danger);
+  color: var(--color-danger-foreground);
+}
+
+.btn-secondary {
+  background-color: var(--color-secondary);
+  color: var(--color-secondary-foreground);
+}
+
+/* Links styled as buttons — underline for accessibility */
+a.btn-primary { color: var(--color-primary-foreground); }
+a.btn-success { color: var(--color-success-foreground); }
+a.btn-danger { color: var(--color-danger-foreground); }
+a.btn-secondary { color: var(--color-secondary-foreground); }
+
+a.btn,
+a.btn-primary,
+a.btn-success,
+a.btn-danger,
+a.btn-secondary {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+a.btn:hover,
+a.btn-primary:hover,
+a.btn-success:hover,
+a.btn-danger:hover,
+a.btn-secondary:hover {
+  text-decoration: none;
+}
+
+/* Text color utilities */
+.text-primary { color: var(--color-text); }
+.text-secondary { color: var(--color-text-secondary); }
+.text-tertiary { color: var(--color-text-tertiary); }
+.text-success { color: var(--color-success); }
+.text-warning { color: var(--color-warning); }
+.text-danger { color: var(--color-danger); }
+.text-info { color: var(--color-info); }
+
+/* Color palette: styles are in ColorSwatch.vue component */
+
+/* ============================================
+   9. Debug Safe Zone Overlay
+   Add .debug-safe-zone to body for testing
+   ============================================ */
+
+.debug-safe-zone .slidev-layout::before {
+  content: '';
+  position: absolute;
+  inset: var(--safe-inset-y) var(--safe-inset-x);
+  border: 2px dashed color-mix(in srgb, var(--color-drac-red-500) 50%, transparent);
+  pointer-events: none;
+  z-index: 9999;
+}
+
+/* Safe Zone Demo (for safe-zone-test slide) */
+.safe-zone-demo {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.safe-zone-border {
+  position: absolute;
+  inset: 5% 5%;
+  border: 3px dashed var(--color-danger);
+  border-radius: 0.5rem;
+  pointer-events: none;
+}
+
+.safe-zone-label {
+  position: absolute;
+  top: -1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: var(--font-size-small);
+  color: var(--color-danger);
+  white-space: nowrap;
+}
+
+.safe-zone-content {
+  text-align: center;
+  max-width: 60%;
+}
+
+/* ============================================
+   10. Callout Blockquotes (Note/Warning/Tip)
+   ============================================ */
+
+/* Enhanced blockquote callout base style */
+.slidev-layout blockquote:has(p:first-child strong:first-child) {
+  border-left-width: 4px;
+  padding: 1rem 1rem 1rem 1.25rem;
+  background-color: var(--color-bg-soft);
+  border-radius: 0 0.375rem 0.375rem 0;
+}
+
+/* Semantic callout classes — apply to blockquote */
+.slidev-layout blockquote.callout-note,
+.callout-note {
+  border-left-color: var(--color-info);
+}
+
+.slidev-layout blockquote.callout-warning,
+.callout-warning {
+  border-left-color: var(--color-warning);
+}
+
+.slidev-layout blockquote.callout-tip,
+.callout-tip {
+  border-left-color: var(--color-success);
+}
+
+.slidev-layout blockquote.callout-danger,
+.callout-danger {
+  border-left-color: var(--color-danger);
+}
+
+/* ============================================
+   11. Keyboard Focus Styles (WCAG 2.2)
+   ============================================ */
+
+.slidev-layout :focus-visible {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Ensure focus is not obscured */
+.slidev-layout :focus-visible {
+  scroll-padding: 1rem;
+}
+
+/* (Old layout sections 12-27 removed - replaced by section 7 above) */
+
+/* ============================================
+   34. Mermaid Diagram Overrides
+   ============================================
+   Ensure proper text contrast in dark/light themes
+   ============================================ */
+
+/* ER Diagram - ensure text is readable */
+.mermaid .entityBox {
+  fill: var(--color-bg-soft) !important;
+  stroke: var(--color-border-strong) !important;
+}
+
+.mermaid .entityBox text,
+.mermaid .entityLabel text {
+  fill: var(--color-text) !important;
+}
+
+/* ER Diagram relationships */
+.mermaid .relationshipLabel text {
+  fill: var(--color-text-secondary) !important;
+}
+
+/* Ensure attribute text is readable */
+.mermaid .attributeBoxOdd,
+.mermaid .attributeBoxEven {
+  fill: var(--color-bg-soft) !important;
+}
+
+.mermaid .attributeBoxOdd text,
+.mermaid .attributeBoxEven text {
+  fill: var(--color-text) !important;
+}
+
+/* State Diagram - transition label contrast */
+.mermaid .statediagram-state rect.divider {
+  stroke: var(--color-border) !important;
+}
+
+.mermaid .stateLabel .edgeLabel {
+  background-color: var(--color-bg-muted) !important;
+}
+
+/* ============================================
+   37. SpeechBubble overflow fix
+   ============================================ */
+
+/* Ensure thought bubble circles are not clipped in overflow: auto containers */
+.bubble-thought.bubble-bottom {
+  margin-bottom: 1.5rem;
+}
+
+.bubble-thought.bubble-top {
+  margin-top: 1.5rem;
+}
+
+.bubble-thought.bubble-left {
+  margin-left: 2rem;
+}
+
+.bubble-thought.bubble-right {
+  margin-right: 2rem;
+}
+
+/* ============================================
+   38. DeviceMockup Placeholder
+   ============================================ */
+
+.device-mockup-placeholder {
+  padding: 2rem;
+  text-align: center;
+}
+
+.device-mockup-placeholder h2 {
+  margin: 0;
+}
+
+.device-mockup-placeholder p {
+  color: var(--color-text-secondary);
+  text-align: center;
+  max-width: none;
+}
+
+/* Shiki bg handled by --shiki-color-background in colors.css */
+
+/* CodePen: styles are in Iframe.vue component */
+
+/* ============================================
+   Inline code on overlay/colored backgrounds
+   ============================================ */
+
+/* Dark overlay: code needs light-on-dark */
+.slide-fullscreen .slide-bg:has(.bg-overlay-dark) ~ .slide-content code {
+  background: color-mix(in srgb, var(--color-drac-fg-50) 15%, transparent);
+  color: var(--color-drac-fg-50);
+}
+
+/* Light overlay: code needs dark-on-light */
+.slide-fullscreen .slide-bg:has(.bg-overlay-light) ~ .slide-content code {
+  background: color-mix(in srgb, var(--color-drac-fg-900) 12%, transparent);
+  color: var(--color-drac-fg-900);
+}
+
+/* Split panels: same rules */
+.slide-panel .slide-bg:has(.bg-overlay-dark) ~ .slide-panel-content code {
+  background: color-mix(in srgb, var(--color-drac-fg-50) 15%, transparent);
+  color: var(--color-drac-fg-50);
+}
+
+.slide-panel .slide-bg:has(.bg-overlay-light) ~ .slide-panel-content code {
+  background: color-mix(in srgb, var(--color-drac-fg-900) 12%, transparent);
+  color: var(--color-drac-fg-900);
+}
+
+/* Colored background columns: code inherits adapted color */
+.slidev-layout .slide-col-bg-primary code,
+.slidev-layout .slide-col-bg-success code,
+.slidev-layout .slide-col-bg-warning code,
+.slidev-layout .slide-col-bg-danger code,
+.slidev-layout .slide-col-bg-info code {
+  background-color: color-mix(in srgb, currentColor 12%, transparent);
+  color: inherit;
+}
+
+/* Colored background fullscreen: code adapts */
+.slide-fullscreen .slide-bg:has(.bg-primary) ~ .slide-content code,
+.slide-fullscreen .slide-bg:has(.bg-success) ~ .slide-content code,
+.slide-fullscreen .slide-bg:has(.bg-warning) ~ .slide-content code,
+.slide-fullscreen .slide-bg:has(.bg-danger) ~ .slide-content code,
+.slide-fullscreen .slide-bg:has(.bg-info) ~ .slide-content code {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  color: inherit;
+}
+
+/* ============================================
+   Component vertical spacing
+   ============================================ */
+
+.slide-content > * + *,
+.slide-single > * + *,
+.slide-col-body > * + * {
+  margin-top: var(--space-sm);
+}
+
+/* Headings already have margin, don't double-up */
+.slide-content > h1 + *,
+.slide-content > h2 + *,
+.slide-content > h3 + *,
+.slide-single > h1 + *,
+.slide-single > h2 + *,
+.slide-single > h3 + * {
+  margin-top: 0;
+}
+
+/* (Variant CSS classes removed — replaced by Vue components) */
+