coradoc 1.1.6 → 2.0.1

data/coradoc-html/lib/coradoc/html/assets/themes/professional.css

@@ -0,0 +1,1236 @@
+/*
+ * Coradoc Professional Theme
+ * Publication-ready design with modern CSS features
+ * Version: 2.0
+ */
+
+/* ====================================================================
+   CSS LAYERS - Explicit cascade management
+   ==================================================================== */
+
+@layer reset, base, components, utilities;
+
+/* ====================================================================
+   THEME VARIABLES - Support for light/dark modes
+   ==================================================================== */
+
+:root {
+  /* Color palette - Light mode */
+  --color-text-primary: #1a1a1a;
+  --color-text-secondary: #4a4a4a;
+  --color-text-muted: #6c757d;
+  --color-background: #ffffff;
+  --color-background-alt: #f8f9fa;
+  --color-background-elevated: #ffffff;
+  --color-border: #dee2e6;
+  --color-border-light: #e9ecef;
+  --color-accent: #0066cc;
+  --color-accent-hover: #0052a3;
+  --color-accent-light: #e6f2ff;
+
+  /* Semantic colors */
+  --color-success: #28a745;
+  --color-warning: #ffc107;
+  --color-error: #dc3545;
+  --color-info: #17a2b8;
+
+  /* Admonition colors */
+  --color-note: #0066cc;
+  --color-tip: #28a745;
+  --color-important: #ffc107;
+  --color-caution: #fd7e14;
+  --color-danger: #dc3545;
+
+  /* Code colors */
+  --color-code-bg: #f5f5f5;
+  --color-code-border: #e0e0e0;
+  --color-code-text: #24292e;
+
+  /* Typography */
+  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji";
+  --font-family-heading: var(--font-family-base);
+  --font-family-mono: ui-monospace, "Cascadia Code", "Source Code Pro",
+    Menlo, Monaco, "Courier New", monospace;
+
+  /* Fluid typography using clamp() */
+  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
+  --font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
+  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+  --font-size-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
+  --font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
+  --font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
+  --font-size-3xl: clamp(2rem, 1.75rem + 1.25vw, 2.5rem);
+  --font-size-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
+
+  /* Line heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.6;
+  --line-height-relaxed: 1.75;
+
+  /* Spacing scale */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --space-3xl: 4rem;
+
+  /* Layout */
+  --content-max-width: 65ch;
+  --page-max-width: 1200px;
+  --sidebar-width: 280px;
+
+  /* Borders and radius */
+  --border-width: 1px;
+  --border-radius-sm: 4px;
+  --border-radius-md: 6px;
+  --border-radius-lg: 8px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Dark mode color scheme - Manual toggle */
+:root[data-theme="dark"] {
+  --color-text-primary: #e8e8e8;
+  --color-text-secondary: #b8b8b8;
+  --color-text-muted: #888888;
+  --color-background: #0f0f0f;
+  --color-background-alt: #1a1a1a;
+  --color-background-elevated: #242424;
+  --color-border: #2a2a2a;
+  --color-border-light: #333333;
+  --color-accent: #4d9fff;
+  --color-accent-hover: #80bfff;
+  --color-accent-light: #1a3d5c;
+
+  --color-success: #3fb950;
+  --color-warning: #d29922;
+  --color-error: #f85149;
+  --color-info: #58a6ff;
+
+  --color-note: #58a6ff;
+  --color-tip: #3fb950;
+  --color-important: #d29922;
+  --color-caution: #db6d28;
+  --color-danger: #f85149;
+
+  --color-code-bg: #161616;
+  --color-code-border: #2a2a2a;
+  --color-code-text: #e8e8e8;
+
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+}
+
+/* Dark mode color scheme - System preference */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-text-primary: #e8e8e8;
+    --color-text-secondary: #b8b8b8;
+    --color-text-muted: #888888;
+    --color-background: #0f0f0f;
+    --color-background-alt: #1a1a1a;
+    --color-background-elevated: #242424;
+    --color-border: #2a2a2a;
+    --color-border-light: #333333;
+    --color-accent: #4d9fff;
+    --color-accent-hover: #80bfff;
+    --color-accent-light: #1a3d5c;
+
+    --color-success: #3fb950;
+    --color-warning: #d29922;
+    --color-error: #f85149;
+    --color-info: #58a6ff;
+
+    --color-note: #58a6ff;
+    --color-tip: #3fb950;
+    --color-important: #d29922;
+    --color-caution: #db6d28;
+    --color-danger: #f85149;
+
+    --color-code-bg: #161616;
+    --color-code-border: #2a2a2a;
+    --color-code-text: #e8e8e8;
+
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+  }
+}
+
+/* ====================================================================
+   RESET LAYER
+   ==================================================================== */
+
+@layer reset {
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Reduced motion for accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+/* ====================================================================
+   BASE LAYER
+   ==================================================================== */
+
+@layer base {
+  html {
+    font-size: 16px;
+    scroll-behavior: smooth;
+    scroll-padding-top: var(--space-xl);
+  }
+
+  body {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-normal);
+    color: var(--color-text-primary);
+    background-color: var(--color-background);
+    transition: background-color var(--transition-base),
+                color var(--transition-base);
+  }
+
+  /* Main content container */
+  #content {
+    max-width: var(--page-max-width);
+    margin: 0 auto;
+    padding: var(--space-2xl) var(--space-lg);
+  }
+
+  @container (min-width: 768px) {
+    #content {
+      padding: var(--space-3xl) var(--space-2xl);
+    }
+  }
+
+  /* Improve text rendering */
+  p, li, td, th, dd, dt {
+    text-rendering: optimizeLegibility;
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Typography
+   ==================================================================== */
+
+@layer components {
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-family-heading);
+    font-weight: 700;
+    line-height: var(--line-height-tight);
+    color: var(--color-text-primary);
+    margin-top: var(--space-2xl);
+    margin-bottom: var(--space-lg);
+    scroll-margin-top: var(--space-2xl);
+  }
+
+  h1 {
+    font-size: var(--font-size-4xl);
+    margin-top: 0;
+    padding-bottom: var(--space-md);
+    border-bottom: 2px solid var(--color-border);
+    letter-spacing: -0.02em;
+  }
+
+  h2 {
+    font-size: var(--font-size-3xl);
+    padding-bottom: var(--space-sm);
+    border-bottom: 1px solid var(--color-border-light);
+    letter-spacing: -0.01em;
+  }
+
+  h3 {
+    font-size: var(--font-size-2xl);
+  }
+
+  h4 {
+    font-size: var(--font-size-xl);
+  }
+
+  h5 {
+    font-size: var(--font-size-lg);
+  }
+
+  h6 {
+    font-size: var(--font-size-base);
+    color: var(--color-text-secondary);
+    font-weight: 600;
+  }
+
+  /* Header metadata */
+  #header {
+    margin-bottom: var(--space-3xl);
+  }
+
+  #header h1 {
+    margin-bottom: var(--space-md);
+  }
+
+  .author, .email, .revdate, .revremark {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+  }
+
+  /* Paragraphs */
+  p {
+    max-width: var(--content-max-width);
+    margin-bottom: var(--space-lg);
+    hyphens: auto;
+  }
+
+  .lead {
+    font-size: var(--font-size-lg);
+    color: var(--color-text-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Links
+   ==================================================================== */
+
+@layer components {
+  a {
+    color: var(--color-accent);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+    word-wrap: break-word;
+  }
+
+  a:hover {
+    color: var(--color-accent-hover);
+    text-decoration: underline;
+  }
+
+  a:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: var(--border-radius-sm);
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Inline formatting
+   ==================================================================== */
+
+@layer components {
+  strong, .bold, b {
+    font-weight: 600;
+  }
+
+  em, .italic, i {
+    font-style: italic;
+  }
+
+  code, .monospaced {
+    font-family: var(--font-family-mono);
+    font-size: 0.9em;
+    background-color: var(--color-code-bg);
+    color: var(--color-code-text);
+    padding: 0.125em 0.375em;
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--color-code-border);
+  }
+
+  mark, .marked {
+    background-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
+    color: var(--color-text-primary);
+    padding: 0.125em 0.25em;
+    border-radius: var(--border-radius-sm);
+  }
+
+  sup {
+    font-size: 0.7em;
+    vertical-align: super;
+  }
+
+  sub {
+    font-size: 0.7em;
+    vertical-align: sub;
+  }
+
+  u, .underline {
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+  }
+
+  s, .line-through {
+    text-decoration: line-through;
+  }
+
+  small, .small {
+    font-size: var(--font-size-sm);
+  }
+
+  .big {
+    font-size: var(--font-size-lg);
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Lists
+   ==================================================================== */
+
+@layer components {
+  ul, ol {
+    max-width: var(--content-max-width);
+    margin: 0 0 var(--space-lg);
+    padding-left: var(--space-xl);
+  }
+
+  li {
+    margin-bottom: var(--space-sm);
+  }
+
+  li::marker {
+    color: var(--color-text-secondary);
+  }
+
+  ul ul, ul ol, ol ul, ol ol {
+    margin-top: var(--space-sm);
+    margin-bottom: var(--space-sm);
+  }
+
+  .ulist, .olist {
+    margin-bottom: var(--space-xl);
+  }
+
+  .ulist > .title, .olist > .title {
+    font-weight: 600;
+    margin-bottom: var(--space-sm);
+    color: var(--color-text-primary);
+  }
+
+  dt {
+    font-weight: 600;
+    margin-top: var(--space-md);
+    color: var(--color-text-primary);
+  }
+
+  dd {
+    margin-left: var(--space-xl);
+    margin-bottom: var(--space-md);
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Code blocks & listings
+   ==================================================================== */
+
+@layer components {
+  .listingblock, .literalblock, .sourceblock {
+    margin-bottom: var(--space-xl);
+  }
+
+  .listingblock > .title,
+  .literalblock > .title,
+  .sourceblock > .title {
+    font-weight: 600;
+    font-size: var(--font-size-sm);
+    margin-bottom: var(--space-sm);
+    color: var(--color-text-secondary);
+  }
+
+  .listingblock .content,
+  .literalblock .content,
+  .sourceblock .content {
+    position: relative;
+  }
+
+  pre {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    line-height: 1.5;
+    background-color: var(--color-code-bg);
+    color: var(--color-code-text);
+    border: 1px solid var(--color-code-border);
+    border-radius: var(--border-radius-md);
+    padding: var(--space-lg);
+    overflow-x: auto;
+    margin: 0;
+    max-width: 100%;
+  }
+
+  pre code {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+  }
+
+  /* Line numbers support */
+  pre.highlight {
+    background-color: var(--color-code-bg);
+  }
+
+  /* Add copy button space */
+  .listingblock .content::before,
+  .sourceblock .content::before {
+    content: "";
+    display: block;
+    height: 0;
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Tables
+   ==================================================================== */
+
+@layer components {
+  .tableblock {
+    margin-bottom: var(--space-xl);
+    overflow-x: auto;
+  }
+
+  .tableblock > .title {
+    font-weight: 600;
+    font-size: var(--font-size-sm);
+    margin-bottom: var(--space-sm);
+    color: var(--color-text-secondary);
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: var(--font-size-sm);
+  }
+
+  th, td {
+    padding: var(--space-sm) var(--space-md);
+    text-align: left;
+    border: 1px solid var(--color-border);
+  }
+
+  th {
+    background-color: var(--color-background-alt);
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  tbody tr {
+    transition: background-color var(--transition-fast);
+  }
+
+  tbody tr:nth-child(even) {
+    background-color: color-mix(in srgb, var(--color-background-alt) 50%, transparent);
+  }
+
+  tbody tr:hover {
+    background-color: var(--color-background-alt);
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Block elements
+   ==================================================================== */
+
+@layer components {
+  .exampleblock, .sidebarblock, .quoteblock, .verseblock {
+    margin-bottom: var(--space-xl);
+    padding: var(--space-lg);
+    border-radius: var(--border-radius-md);
+  }
+
+  .exampleblock {
+    background-color: var(--color-background-alt);
+    border-left: 4px solid var(--color-accent);
+  }
+
+  .sidebarblock, aside {
+    background-color: var(--color-background-alt);
+    border: 1px solid var(--color-border);
+  }
+
+  /* Sidebar layout for aside elements */
+  @container (min-width: 1024px) {
+    body:has(aside:not(.sidebarblock)) {
+      display: grid;
+      grid-template-columns: 1fr 320px;
+      gap: var(--space-2xl);
+      max-width: var(--page-max-width);
+      margin: 0 auto;
+      padding: var(--space-2xl);
+    }
+
+    body:has(aside:not(.sidebarblock)) aside:not(.sidebarblock) {
+      position: sticky;
+      top: var(--space-xl);
+      max-height: calc(100vh - var(--space-2xl));
+      overflow-y: auto;
+      padding: var(--space-lg);
+      background-color: var(--color-background-elevated);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-md);
+      box-shadow: var(--shadow-sm);
+    }
+  }
+
+  .quoteblock {
+    border-left: 4px solid var(--color-border);
+    padding-left: var(--space-xl);
+    font-style: italic;
+    color: var(--color-text-secondary);
+  }
+
+  .quoteblock p:last-child {
+    margin-bottom: 0;
+  }
+
+  .attribution {
+    text-align: right;
+    font-style: normal;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    margin-top: var(--space-md);
+  }
+
+  .attribution::before {
+    content: "— ";
+  }
+
+  .verseblock {
+    border-left: 4px solid var(--color-border);
+    padding-left: var(--space-xl);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    white-space: pre-wrap;
+  }
+
+  .title {
+    font-weight: 600;
+    margin-bottom: var(--space-sm);
+    color: var(--color-text-primary);
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Admonitions
+   ==================================================================== */
+
+@layer components {
+  .admonitionblock {
+    margin-bottom: var(--space-xl);
+    padding: var(--space-lg);
+    border-left: 4px solid;
+    border-radius: var(--border-radius-md);
+    background-color: var(--color-background-alt);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .admonitionblock td.icon {
+    width: 80px;
+    vertical-align: top;
+    padding-right: var(--space-lg);
+  }
+
+  .admonitionblock td.icon .title {
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: var(--font-size-xs);
+    letter-spacing: 0.05em;
+  }
+
+  .admonitionblock.note {
+    border-color: var(--color-note);
+    background-color: color-mix(in srgb, var(--color-note) 5%, var(--color-background-alt));
+  }
+
+  .admonitionblock.note td.icon .title {
+    color: var(--color-note);
+  }
+
+  .admonitionblock.tip {
+    border-color: var(--color-tip);
+    background-color: color-mix(in srgb, var(--color-tip) 5%, var(--color-background-alt));
+  }
+
+  .admonitionblock.tip td.icon .title {
+    color: var(--color-tip);
+  }
+
+  .admonitionblock.important {
+    border-color: var(--color-important);
+    background-color: color-mix(in srgb, var(--color-important) 5%, var(--color-background-alt));
+  }
+
+  .admonitionblock.important td.icon .title {
+    color: var(--color-important);
+  }
+
+  .admonitionblock.warning, .admonitionblock.caution {
+    border-color: var(--color-caution);
+    background-color: color-mix(in srgb, var(--color-caution) 5%, var(--color-background-alt));
+  }
+
+  .admonitionblock.warning td.icon .title,
+  .admonitionblock.caution td.icon .title {
+    color: var(--color-caution);
+  }
+
+  .admonitionblock.danger {
+    border-color: var(--color-danger);
+    background-color: color-mix(in srgb, var(--color-danger) 5%, var(--color-background-alt));
+  }
+
+  .admonitionblock.danger td.icon .title {
+    color: var(--color-danger);
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Reviewer Notes
+   ==================================================================== */
+
+@layer components {
+  /* Reviewer Note - Modern Responsive Layout */
+  .reviewer-note {
+    container-type: inline-size;
+    container-name: reviewer-note;
+    background-color: var(--color-background-alt);
+    border: 1px solid var(--color-border);
+    border-left: 4px solid var(--color-info);
+    border-radius: var(--border-radius-md);
+    padding: clamp(var(--space-md), 3vw, var(--space-xl));
+    margin-bottom: var(--space-xl);
+    box-shadow: var(--shadow-sm);
+  }
+
+  /* Header uses CSS Grid for responsive layout */
+  .reviewer-note-header {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-md);
+    margin-bottom: var(--space-lg);
+    padding-bottom: var(--space-md);
+    border-bottom: 1px solid var(--color-border-light);
+  }
+
+  /* Container query: switch to 2-column layout when wide enough */
+  @container reviewer-note (min-width: 500px) {
+    .reviewer-note-header {
+      grid-template-columns: auto 1fr;
+      align-items: center;
+      gap: var(--space-lg);
+    }
+  }
+
+  /* Label with rectangular design */
+  .reviewer-note-label {
+    display: inline-block;
+    background-color: var(--color-info);
+    color: white;
+    padding: clamp(var(--space-xs), 1.5vw, var(--space-sm))
+             clamp(var(--space-sm), 2vw, var(--space-md));
+    border-radius: var(--border-radius-sm);
+    font-weight: 600;
+    font-size: clamp(var(--font-size-xs), 1.5vw, var(--font-size-sm));
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+    justify-self: start;
+  }
+
+  /* Metadata with modern flexbox */
+  .reviewer-note-metadata {
+    display: flex;
+    flex-wrap: wrap;
+    gap: clamp(var(--space-xs), 1vw, var(--space-sm));
+    font-size: clamp(var(--font-size-xs), 1.2vw, var(--font-size-sm));
+    color: var(--color-text-muted);
+  }
+
+  .reviewer-note-metadata .metadata-item {
+    font-family: var(--font-family-mono);
+    background-color: var(--color-code-bg);
+    padding: clamp(var(--space-xs), 1vw, var(--space-sm))
+             clamp(var(--space-sm), 1.5vw, var(--space-md));
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--color-code-border);
+    white-space: nowrap;
+    transition: background-color var(--transition-fast);
+  }
+
+  /* Touch-friendly hover states */
+  @media (hover: hover) {
+    .reviewer-note-metadata .metadata-item:hover {
+      background-color: var(--color-background-elevated);
+    }
+  }
+
+  /* Content area */
+  .reviewer-note-content {
+    line-height: var(--line-height-relaxed);
+  }
+
+  .reviewer-note-content > *:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Hide line breaks between block elements to avoid extra spacing */
+  .reviewer-note-content br {
+    display: none;
+  }
+
+  /* Mobile-specific adjustments */
+  @media (max-width: 640px) {
+    .reviewer-note {
+      padding: var(--space-md);
+    }
+
+    .reviewer-note-label {
+      width: 100%;
+      text-align: center;
+    }
+
+    .reviewer-note-metadata {
+      justify-content: center;
+    }
+  }
+
+  /* Print styles */
+  @media print {
+    .reviewer-note {
+      page-break-inside: avoid;
+      border: 2px solid var(--color-info);
+      box-shadow: none;
+    }
+
+    .reviewer-note-label {
+      background-color: transparent;
+      color: var(--color-info);
+      border: 2px solid var(--color-info);
+    }
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Table of Contents
+   ==================================================================== */
+
+@layer components {
+  #toc {
+    background-color: var(--color-background-elevated);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-md);
+    padding: var(--space-lg);
+    margin-bottom: var(--space-2xl);
+    box-shadow: var(--shadow-sm);
+  }
+
+  #toc .toc-title {
+    font-weight: 700;
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--space-md);
+    padding-bottom: var(--space-sm);
+    border-bottom: 1px solid var(--color-border);
+    color: var(--color-text-primary);
+  }
+
+  #toc ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+  }
+
+  #toc ul ul {
+    padding-left: var(--space-lg);
+    margin-top: var(--space-xs);
+  }
+
+  #toc li {
+    margin-bottom: var(--space-xs);
+  }
+
+  #toc a {
+    color: var(--color-text-primary);
+    text-decoration: none;
+    display: block;
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--border-radius-sm);
+    transition: background-color var(--transition-fast),
+                color var(--transition-fast);
+  }
+
+  #toc a:hover {
+    background-color: var(--color-background-alt);
+    color: var(--color-accent);
+    text-decoration: none;
+  }
+
+  #toc a.active {
+    background-color: var(--color-accent-light);
+    color: var(--color-accent);
+    font-weight: 600;
+  }
+
+  /* Sidebar TOC layouts */
+  #toc.toc-left, #toc.toc-right {
+    position: sticky;
+    top: var(--space-xl);
+    max-height: calc(100vh - var(--space-2xl));
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+  }
+
+  #toc.toc-left::-webkit-scrollbar,
+  #toc.toc-right::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  #toc.toc-left::-webkit-scrollbar-track,
+  #toc.toc-right::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  #toc.toc-left::-webkit-scrollbar-thumb,
+  #toc.toc-right::-webkit-scrollbar-thumb {
+    background-color: var(--color-border);
+    border-radius: 3px;
+  }
+
+  /* Layout adjustments for sidebar TOC */
+  @media (min-width: 1024px) {
+    body.toc-left {
+      display: grid;
+      grid-template-columns: var(--sidebar-width) 1fr;
+      gap: var(--space-2xl);
+      max-width: var(--page-max-width);
+      margin: 0 auto;
+      padding: var(--space-2xl);
+    }
+
+    body.toc-left #toc {
+      margin-bottom: 0;
+    }
+
+    body.toc-left #content {
+      margin: 0;
+      padding: 0;
+    }
+
+    body.toc-right {
+      display: grid;
+      grid-template-columns: 1fr var(--sidebar-width);
+      gap: var(--space-2xl);
+      max-width: var(--page-max-width);
+      margin: 0 auto;
+      padding: var(--space-2xl);
+    }
+
+    body.toc-right #toc {
+      order: 2;
+      margin-bottom: 0;
+    }
+
+    body.toc-right #content {
+      order: 1;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Section numbering
+   ==================================================================== */
+
+@layer components {
+  .sectnum {
+    margin-right: var(--space-sm);
+    color: var(--color-text-muted);
+    font-weight: 600;
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Images & Media
+   ==================================================================== */
+
+@layer components {
+  .imageblock {
+    margin-bottom: var(--space-xl);
+  }
+
+  .imageblock img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    border-radius: var(--border-radius-md);
+  }
+
+  .imageblock > .title {
+    text-align: center;
+    font-style: italic;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    margin-top: var(--space-sm);
+  }
+
+  .image.left {
+    float: left;
+    margin-right: var(--space-xl);
+    margin-bottom: var(--space-md);
+  }
+
+  .image.right {
+    float: right;
+    margin-left: var(--space-xl);
+    margin-bottom: var(--space-md);
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Footnotes
+   ==================================================================== */
+
+@layer components {
+  #footnotes {
+    margin-top: var(--space-3xl);
+    padding-top: var(--space-xl);
+    border-top: 1px solid var(--color-border);
+    font-size: var(--font-size-sm);
+  }
+
+  #footnotes .title {
+    font-weight: 700;
+    font-size: var(--font-size-base);
+    margin-bottom: var(--space-md);
+  }
+
+  .footnote {
+    margin-bottom: var(--space-sm);
+  }
+
+  .footnote a {
+    font-weight: 600;
+    text-decoration: none;
+  }
+}
+
+/* ====================================================================
+   COMPONENTS LAYER - Theme toggle button
+   ==================================================================== */
+
+@layer components {
+  #theme-toggle {
+    position: fixed;
+    bottom: var(--space-lg);
+    right: var(--space-lg);
+    z-index: 1000;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 1px solid var(--color-border);
+    background-color: var(--color-background-elevated);
+    color: var(--color-text-primary);
+    cursor: pointer;
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    transition: transform var(--transition-fast),
+                box-shadow var(--transition-fast);
+  }
+
+  #theme-toggle:hover {
+    transform: scale(1.05);
+    box-shadow: var(--shadow-lg);
+  }
+
+  #theme-toggle:active {
+    transform: scale(0.95);
+  }
+
+  #theme-toggle:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+}
+
+/* ====================================================================
+   UTILITIES LAYER - Responsive design
+   ==================================================================== */
+
+@layer utilities {
+  @media (max-width: 768px) {
+    #content {
+      padding: var(--space-lg) var(--space-md);
+    }
+
+    h1 {
+      font-size: var(--font-size-3xl);
+    }
+
+    h2 {
+      font-size: var(--font-size-2xl);
+    }
+
+    h3 {
+      font-size: var(--font-size-xl);
+    }
+
+    /* Disable fixed sidebars on mobile */
+    #toc.toc-left, #toc.toc-right {
+      position: static;
+      width: 100%;
+      max-height: none;
+      margin-bottom: var(--space-lg);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-md);
+    }
+
+    body.toc-left,
+    body.toc-right {
+      display: block;
+      padding: var(--space-lg) var(--space-md);
+    }
+
+    body.toc-left #content,
+    body.toc-right #content {
+      margin: 0;
+      padding: 0;
+    }
+
+    pre {
+      font-size: calc(var(--font-size-sm) * 0.875);
+      padding: var(--space-md);
+    }
+
+    table {
+      font-size: var(--font-size-xs);
+    }
+
+    th, td {
+      padding: var(--space-xs) var(--space-sm);
+    }
+
+    #theme-toggle {
+      bottom: var(--space-md);
+      right: var(--space-md);
+      width: 44px;
+      height: 44px;
+    }
+  }
+}
+
+/* ====================================================================
+   UTILITIES LAYER - Print styles
+   ==================================================================== */
+
+@layer utilities {
+  @media print {
+    :root {
+      --font-size-base: 12pt;
+      --line-height-normal: 1.5;
+    }
+
+    body {
+      color: #000;
+      background: #fff;
+    }
+
+    #theme-toggle {
+      display: none;
+    }
+
+    #toc {
+      page-break-after: always;
+      border: none;
+      box-shadow: none;
+    }
+
+    #toc.toc-left,
+    #toc.toc-right {
+      position: static;
+      width: 100%;
+      max-height: none;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      page-break-after: avoid;
+      page-break-inside: avoid;
+    }
+
+    pre, blockquote, table, figure {
+      page-break-inside: avoid;
+    }
+
+    a {
+      color: #000;
+      text-decoration: underline;
+    }
+
+    a[href^="http"]::after {
+      content: " (" attr(href) ")";
+      font-size: 0.8em;
+      font-weight: normal;
+    }
+
+    .admonitionblock {
+      border: 1px solid #000;
+      box-shadow: none;
+    }
+
+    code, pre {
+      border: 1px solid #000;
+    }
+  }
+}
+
+/* ====================================================================
+   UTILITIES LAYER - High contrast mode
+   ==================================================================== */
+
+@layer utilities {
+  @media (prefers-contrast: high) {
+    :root {
+      --color-text-primary: #000;
+      --color-text-secondary: #1a1a1a;
+      --color-background: #fff;
+      --color-background-alt: #f0f0f0;
+      --color-border: #000;
+      --color-accent: #0000ee;
+    }
+
+    :root[data-theme="dark"] {
+      --color-text-primary: #fff;
+      --color-text-secondary: #e0e0e0;
+      --color-background: #000;
+      --color-background-alt: #1a1a1a;
+      --color-border: #fff;
+      --color-accent: #66b3ff;
+    }
+  }
+}