@donotdev/ui 0.0.3 → 0.0.5

package/dist/dndev.css

@@ -22,9 +22,10 @@
      Used by: CSS @media queries, JavaScript hooks, responsive components
      Note: CSS variables don't work in @media, so we use hardcoded px values
      =========================== */
-  --breakpoint-mobile: 768px;
-  --breakpoint-tablet: 1024px; /* Key breakpoint, layout presets are based on mobile + tablet vs desktop+wide breakpoints */
-  --breakpoint-desktop: 1440px;
+  --breakpoint-mobile: 768px;   /* < 768 = mobile */
+  --breakpoint-tablet: 1024px;  /* 768-1023 = tablet */
+  --breakpoint-laptop: 1440px;  /* 1024-1439 = laptop (key layout split) */
+  --breakpoint-desktop: 1920px; /* 1440+ = desktop */
 
   /* ===========================
      INTERACTIVE ELEMENTS
@@ -289,28 +290,48 @@
 /* Compact (Admin/Data) - Dense, information-dense layouts - Minor Third (1.2×) */
 
 [data-density='compact'] {
-  --font-size-base: 0.875rem; /* 14px */
-  --font-size-lg: 1.05rem; /* base × 1.2¹ */
-  --font-size-xl: 1.26rem; /* base × 1.2² */
-  --font-size-2xl: 1.512rem; /* base × 1.2³ */
-  --font-size-3xl: 1.814rem; /* base × 1.2⁴ */
-  --gap-sm: 0.375rem; /* 6px - tighter than standard */
-  --gap-md: 0.75rem; /* 12px */
-  --gap-lg: 1.5rem; /* 24px */
+  /* Base sizes: Fluid responsiveness for all text, zoom-safe */
+  --font-size-base: clamp(0.875rem, 0.8125rem + 0.25vw, 0.9375rem); /* 14-15px fluid */
+  --font-size-lg: clamp(1.05rem, 0.9375rem + 0.5vw, 1.125rem); /* 17-18px fluid */
+  --font-size-xl: clamp(1.26rem, 1.125rem + 0.75vw, 1.375rem); /* 20-22px fluid */
+  /* Display sizes: Musical scale + fluid responsiveness */
+  --font-size-2xl: clamp(
+    1.512rem,
+    1.375rem + 0.75vw,
+    1.625rem
+  ); /* 24-26px fluid */
+  --font-size-3xl: clamp(
+    1.814rem,
+    1.625rem + 1vw,
+    2rem
+  ); /* 29-32px fluid */
+  --gap-sm: clamp(0.375rem, 0.3125rem + 0.25vw, 0.5rem); /* 6-8px fluid */
+  --gap-md: clamp(0.75rem, 0.625rem + 0.5vw, 0.875rem); /* 12-14px fluid, zoom-safe */
+  --gap-lg: clamp(1.5rem, 1.25rem + 1vw, 1.75rem); /* 24-28px fluid, zoom-safe */
   --line-height: 1.2; /* Minor Third - All text */
 }
 
 /* Standard (Docs/SaaS) - DEFAULT, balanced for readability */
 
 [data-density='standard'] {
-  --font-size-base: 1rem; /* 16px */
-  --font-size-lg: 1.25rem; /* 20px - base × 1.25¹ */
-  --font-size-xl: 1.563rem; /* 25px - base × 1.25² */
-  --font-size-2xl: 1.953rem; /* 31px - base × 1.25³ */
-  --font-size-3xl: 2.441rem; /* 39px - base × 1.25⁴ - hero text */
-  --gap-sm: 0.5rem; /* 8px - explicit default */
-  --gap-md: 1rem; /* 16px */
-  --gap-lg: 2rem; /* 32px */
+  /* Base sizes: Fluid responsiveness for all text, zoom-safe */
+  --font-size-base: clamp(1rem, 0.9375rem + 0.25vw, 1.0625rem); /* 16-17px fluid */
+  --font-size-lg: clamp(1.25rem, 1.125rem + 0.5vw, 1.375rem); /* 20-22px fluid */
+  --font-size-xl: clamp(1.563rem, 1.375rem + 0.75vw, 1.75rem); /* 25-28px fluid */
+  /* Display sizes: Musical scale + fluid responsiveness */
+  --font-size-2xl: clamp(
+    1.953rem,
+    1.75rem + 1vw,
+    2.25rem
+  ); /* 31-36px fluid */
+  --font-size-3xl: clamp(
+    2.441rem,
+    2rem + 1.5vw,
+    3rem
+  ); /* 39-48px fluid - hero text */
+  --gap-sm: clamp(0.5rem, 0.4375rem + 0.25vw, 0.625rem); /* 8-10px fluid */
+  --gap-md: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 16-20px fluid, zoom-safe */
+  --gap-lg: clamp(2rem, 1.75rem + 1vw, 2.5rem); /* 32-40px fluid, zoom-safe */
   --line-height: 1.25; /* Major Third - All text */
 }
 
@@ -542,49 +563,16 @@ a:focus-visible {
     border-radius: var(--radius-interactive);
   }
 
-/* ===========================
-   BASE LIST STYLING
-   Use text-base styles for lists
-   =========================== */
-
-/* Content lists only - not navigation menus */
+/* Main element - no focus outline (programmatic focus for keyboard nav) */
 
-main ul,
-main ol,
-article ul,
-article ol {
-  font-weight: 500;
-  line-height: var(--line-height);
-  color: var(--foreground);
-  background: transparent !important;
-  list-style-position: outside;
-  padding-inline-start: var(--gap-lg);
-  margin-block: var(--gap-md);
-}
-
-main ul,
-article ul {
-  list-style-type: disc;
-}
-
-main ol,
-article ol {
-  list-style-type: decimal;
-}
-
-main li,
-article li {
-  font-weight: 500;
-  line-height: var(--line-height);
-  color: var(--foreground);
-  background: transparent !important;
-  margin-block: var(--gap-sm);
-  padding-inline-start: var(--gap-sm);
+main:focus-visible {
+  outline: none;
 }
 
 /* ===========================
-   BASE TYPOGRAPHY STYLING
-   Use text-base styles for headings and paragraphs
+   BASE TYPOGRAPHY - RESET ONLY
+   Zero margins, components own their spacing
+   Use .prose wrapper for content pages (docs, markdown)
    =========================== */
 
 h1,
@@ -593,49 +581,71 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   line-height: var(--line-height);
   color: var(--foreground);
   background: transparent;
-  margin-block: var(--gap-md);
 }
 
 h1 {
   font-family: var(--font-headline);
   font-size: var(--font-size-3xl);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   letter-spacing: -0.02em;
 }
 
 h2 {
   font-family: var(--font-headline);
   font-size: var(--font-size-2xl);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   letter-spacing: -0.01em;
 }
 
 h3 {
   font-size: var(--font-size-xl);
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 h4 {
   font-size: var(--font-size-lg);
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 h5,
 h6 {
   font-size: var(--font-size-base);
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 p {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height);
+  color: var(--foreground);
+  background: transparent;
+}
+
+ul,
+ol {
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height);
+  color: var(--foreground);
+  background: transparent;
+  list-style-position: outside;
+}
+
+ul {
+  list-style-type: disc;
+}
+
+ol {
+  list-style-type: decimal;
+}
+
+li {
+  font-weight: var(--font-weight-medium);
   line-height: var(--line-height);
   color: var(--foreground);
   background: transparent;
-  margin-block: var(--gap-md);
 }
 
 /* Semantic HTML - strong and em */
@@ -1059,12 +1069,13 @@ em {
   }
 
 .dndev-surface[data-variant='glass'] {
-    background: color-mix(in oklab, var(--card) 40%, transparent);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    background: color-mix(in oklab, var(--card) 55%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
     border: var(--border-hairline) solid
-      color-mix(in oklab, var(--card-foreground) 15%, transparent);
-    box-shadow: var(--shadow-lg);
+      color-mix(in oklab, var(--card-foreground) 25%, transparent);
+    box-shadow: var(--shadow-lg),
+      inset 0 1px 0 0 color-mix(in oklab, var(--card-foreground) 10%, transparent);
   }
 
 /* Separator style */
@@ -2134,6 +2145,7 @@ em {
   background: transparent;
   color: inherit;
   font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
 }
 
 .dndev-interactive[data-role='accordion-trigger']:hover {
@@ -2158,6 +2170,7 @@ em {
   transition: all var(--dur-fast) var(--ease-in-out);
   width: 100%;
   min-width: 0;
+  text-align: start;
 }
 
 .dndev-accordion-content[data-state='closed'] {
@@ -2369,14 +2382,15 @@ em {
   margin-top: var(--gap-md);
 }
 
-/* Tech card */
+/* Tech card - override Card's grid layout for centered content */
 
 .dndev-tech-card {
   height: 100%;
   min-height: 120px;
-  display: flex;
+  display: flex !important; /* Override Card's grid layout */
   align-items: center;
   justify-content: center;
+  align-content: center; /* Override Card's align-content: start */
   transition:
     border-color 0.2s ease,
     box-shadow 0.2s ease;
@@ -2486,7 +2500,8 @@ em {
   border-inline-end: none;
   border-block-start: none;
   border-block-end: none;
-  border-radius: var(--radius-interactive) var(--radius-surface) var(--radius-surface) var(--radius-interactive);
+  border-radius: var(--radius-interactive) var(--radius-surface)
+    var(--radius-surface) var(--radius-interactive);
   overflow: hidden;
 }
 
@@ -2888,13 +2903,41 @@ em {
 /* packages/components/src/atomic/CallToAction/CallToAction.css */
 
 .dndev-cta {
-  /* Full width gradient */
-  background: linear-gradient(to right, var(--secondary), var(--background));
   color: var(--foreground);
   /* Padding for background - vertical only, horizontal handled by content */
   padding-block: var(--gap-lg);
 }
 
+/* Tone variants - leverage existing data-tone system */
+
+/* Ghost (default) - no background */
+
+.dndev-cta[data-tone='ghost'],
+.dndev-cta:not([data-tone]) {
+  background: transparent;
+}
+
+.dndev-cta[data-tone='base'] {
+  background: var(--background);
+}
+
+.dndev-cta[data-tone='muted'] {
+  background: var(--muted);
+}
+
+.dndev-cta[data-tone='elevated'] {
+  background: var(--background);
+}
+
+.dndev-cta[data-tone='contrast'] {
+  background: var(--foreground);
+  color: var(--background);
+}
+
+.dndev-cta[data-tone='accent'] {
+  background: color-mix(in oklab, var(--accent) 5%, transparent);
+}
+
 .dndev-cta-content {
   display: flex;
   flex-direction: column;
@@ -2975,19 +3018,36 @@ em {
 .dndev-card {
   display: grid;
   gap: var(--gap-md);
+  text-align: start;
+  align-content: start;
+}
+
+.dndev-card-header {
+  display: flex;
+  flex-direction: column;
+}
+
+.dndev-card-header > .dndev-stack {
+  min-width: 0;
+}
+
+.dndev-card-header > .dndev-stack > .dndev-card-title {
+  flex: 1;
+  min-width: 0;
 }
 
 .dndev-card-title {
-  font-size: var(--font-size-xl);
-  font-weight: 600;
-  color: inherit; /* Inherit from surface variant */
   margin: 0;
+  min-width: 0;
+  word-wrap: break-word;
 }
 
-.dndev-card-subtitle {
-  font-size: var(--font-size-base);
-  font-weight: 600;
-  color: inherit; /* Inherit from surface variant */
+.dndev-surface .dndev-card-subtitle {
+  margin-top: 0;
+  margin-bottom: 0;
+  min-width: 0;
+  word-wrap: break-word;
+  color: color-mix(in oklab, var(--card-foreground) 70%, transparent);
 }
 
 /* packages/components/src/atomic/Checkbox/Checkbox.css */
@@ -3078,6 +3138,203 @@ em {
   }
 }
 
+/* packages/components/src/atomic/Collapsible/Collapsible.css */
+
+.dndev-collapsible {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.dndev-collapsible-content {
+  overflow: hidden;
+  width: 100%;
+}
+
+.dndev-collapsible-content[data-state='open'] {
+  animation: slideDown var(--dur-normal) var(--ease-in-out);
+}
+
+.dndev-collapsible-content[data-state='closed'] {
+  animation: slideUp var(--dur-normal) var(--ease-in-out);
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* packages/components/src/atomic/Combobox/Combobox.css */
+
+.dndev-combobox-trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+}
+
+.dndev-combobox-trigger button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.dndev-combobox-placeholder {
+  opacity: var(--opacity-muted);
+}
+
+.dndev-combobox-trigger-icons {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-tight);
+  margin-inline-start: auto;
+}
+
+.dndev-combobox-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: var(--opacity-muted);
+  transition: opacity var(--dur-fast) var(--ease-in-out);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.dndev-combobox-clear:hover,
+.dndev-combobox-clear:focus {
+  opacity: 1;
+  outline: none;
+}
+
+.dndev-combobox-clear svg {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+
+.dndev-combobox-chevron {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  opacity: var(--opacity-muted);
+  transition: transform var(--dur-fast) var(--ease-in-out);
+}
+
+[data-state='open'] .dndev-combobox-chevron {
+  transform: rotate(180deg);
+}
+
+.dndev-combobox-loading-container {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.dndev-combobox-loading-spinner {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  border-radius: var(--radius-full);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+}
+
+.dndev-combobox-content {
+  width: var(--radix-popover-trigger-width);
+  min-width: var(--radix-popover-trigger-width);
+  max-height: 300px;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.dndev-combobox-search-container {
+  padding: var(--gap-sm);
+  border-bottom: var(--border-width) solid var(--line-2);
+}
+
+.dndev-combobox-search-input {
+  width: 100%;
+}
+
+.dndev-combobox-list {
+  overflow-y: auto;
+  padding: var(--gap-tight);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-none);
+}
+
+.dndev-combobox-option {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--gap-sm) var(--gap-md);
+  cursor: pointer;
+  border-radius: var(--radius-interactive);
+  transition: background-color var(--dur-fast) var(--ease-in-out);
+}
+
+.dndev-combobox-option:disabled {
+  opacity: var(--opacity-muted);
+  cursor: not-allowed;
+}
+
+.dndev-combobox-option-highlighted:not(:disabled) {
+  background-color: var(--accent);
+  opacity: var(--opacity-strong);
+}
+
+.dndev-combobox-option-selected {
+  font-weight: var(--font-weight-medium);
+}
+
+.dndev-combobox-option-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-tight);
+  flex: 1;
+}
+
+.dndev-combobox-option-label {
+  font-size: var(--font-size-sm);
+  color: var(--foreground);
+}
+
+.dndev-combobox-option-description {
+  font-size: var(--font-size-xs);
+  color: var(--muted-foreground);
+}
+
+.dndev-combobox-option-check {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  color: currentColor;
+  flex-shrink: 0;
+}
+
+.dndev-combobox-empty {
+  padding: var(--gap-lg) var(--gap-md);
+  text-align: center;
+  font-size: var(--font-size-sm);
+  color: var(--muted-foreground);
+}
+
 /* packages/components/src/atomic/DualCard/DualCard.css */
 
 .dndev-dual-card {
@@ -3700,9 +3957,35 @@ em {
   display: grid;
   min-width: 0;
   width: 100%;
+  /* Default: use mobile columns */
+  grid-template-columns: repeat(var(--grid-cols-mobile, 1), 1fr);
+}
+
+/* Responsive columns via media queries */
+
+/* Tablet: 768px+ */
+
+@media (min-width: 768px) {
+  .dndev-grid-component {
+    grid-template-columns: repeat(var(--grid-cols-tablet, 1), 1fr);
+  }
 }
 
-/* Grid template columns are set via inline styles for maximum flexibility */
+/* Laptop: 1024px+ (key layout split) */
+
+@media (min-width: 1024px) {
+  .dndev-grid-component {
+    grid-template-columns: repeat(var(--grid-cols-laptop, 1), 1fr);
+  }
+}
+
+/* Desktop: 1440px+ */
+
+@media (min-width: 1440px) {
+  .dndev-grid-component {
+    grid-template-columns: repeat(var(--grid-cols-desktop, 1), 1fr);
+  }
+}
 
 /* Spacing from CSS variables */
 
@@ -3847,21 +4130,7 @@ em {
     }
 
 .dndev-hero-subtitle {
-  font-size: var(--font-size-xl);
-}
-
-/* Responsive Content Visibility */
-
-@media (width < 1024px) {
-  .dndev-hero-section .dndev-desktop-only {
-    display: none !important;
-  }
-}
-
-@media (width >= 1024px) {
-  .dndev-hero-section .dndev-mobile-only {
-    display: none !important;
-  }
+  font-size: var(--font-size-lg); /* 20px - muted via component */
 }
 
 /* packages/components/src/atomic/HoverCard/HoverCard.css */
@@ -4174,10 +4443,11 @@ em {
 .dndev-list {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-none);
+  gap: var(--gap-sm);
   padding-inline-start: 0; /* Controllable via parent/style prop */
+  margin: 0;
   list-style-position: outside;
-  /* text-align: inherit from parent (removed hardcoded start) */
+  text-align: start; /* Always start-aligned, even when parent is centered */
 }
 
 .dndev-list[data-gap='none'] {
@@ -4232,29 +4502,18 @@ em {
       font-size: var(--font-size-base);
     }
 
-/* Default: native list items (no flex) - preserves markers */
+/* Always use flex layout for consistent alignment */
 
 .dndev-list .dndev-list-item {
     font-size: var(--font-size-sm);
-    /* No display: flex by default - allows native markers */
-
-    /* Modern ::marker styling (2026 best practice) */
+    display: flex;
+    align-items: flex-start;
+    gap: var(--gap-sm);
+    list-style: none; /* Remove native marker */
+    margin-block: 0;
+    padding-inline-start: 0;
   }
 
-:is(.dndev-list .dndev-list-item)::marker {
-      color: currentColor;
-    }
-
-/* Only use flex when icon is present */
-
-:is(.dndev-list .dndev-list-item):has(.dndev-list-item-icon) {
-      display: flex;
-      align-items: center; /* Center vertically */
-      gap: var(--gap-sm);
-      list-style: none; /* Remove native marker when using icon */
-      padding-inline-start: 0; /* Reset padding when flex */
-    }
-
 :is(.dndev-list .dndev-list-item) .dndev-list-item-icon {
       display: flex;
       align-items: center;
@@ -4609,23 +4868,43 @@ em {
     margin-inline: auto; /* Self-center in parent */
   }
 
-.dndev-radio-group[data-cols='2'] { grid-template-columns: repeat(2, auto); }
+.dndev-radio-group[data-cols='2'] {
+    grid-template-columns: repeat(2, auto);
+  }
 
-.dndev-radio-group[data-cols='3'] { grid-template-columns: repeat(3, auto); }
+.dndev-radio-group[data-cols='3'] {
+    grid-template-columns: repeat(3, auto);
+  }
 
-.dndev-radio-group[data-cols='4'] { grid-template-columns: repeat(4, auto); }
+.dndev-radio-group[data-cols='4'] {
+    grid-template-columns: repeat(4, auto);
+  }
 
-.dndev-radio-group[data-cols='5'] { grid-template-columns: repeat(5, auto); }
+.dndev-radio-group[data-cols='5'] {
+    grid-template-columns: repeat(5, auto);
+  }
 
-.dndev-radio-group[data-cols='6'] { grid-template-columns: repeat(6, auto); }
+.dndev-radio-group[data-cols='6'] {
+    grid-template-columns: repeat(6, auto);
+  }
 
-.dndev-radio-group[data-cols='10'] { grid-template-columns: repeat(10, auto); }
+.dndev-radio-group[data-cols='10'] {
+    grid-template-columns: repeat(10, auto);
+  }
 
-.dndev-radio-group[data-cols='12'] { grid-template-columns: repeat(12, auto); }
+.dndev-radio-group[data-cols='12'] {
+    grid-template-columns: repeat(12, auto);
+  }
 
-.dndev-radio-group[data-cols='auto-fit'] { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); width: 100%; }
+.dndev-radio-group[data-cols='auto-fit'] {
+    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+    width: 100%;
+  }
 
-.dndev-radio-group[data-cols='auto-fill'] { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); width: 100%; }
+.dndev-radio-group[data-cols='auto-fill'] {
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+    width: 100%;
+  }
 
 /* Variant colors for checked labels - override base pattern */
 
@@ -4895,36 +5174,26 @@ em {
 }
   }
 
-/* Section title: LG, uppercase, accent pop color, tracking */
+/* Section title: uppercase, accent color, letter spacing */
 
 .dndev-section-title {
-  display: block;
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: 0.2em;
-  color: var(--accent);
-  margin-bottom: var(--gap-lg);
+  color: var(--accent) !important;
+  margin-block-end: var(--gap-md);
 }
 
-/* Grid container with default gap */
-
-.dndev-section-grid {
-  display: grid;
-  gap: var(--gap-md);
+.dndev-section-full-width[data-text-align='start'] .dndev-section-title {
+  text-align: start;
 }
 
-.dndev-section-full-width[data-text-align='start'] .dndev-section-content {
-    text-align: start;
-  }
-
-.dndev-section-full-width[data-text-align='center'] .dndev-section-content {
-    text-align: center;
-  }
+.dndev-section-full-width[data-text-align='center'] .dndev-section-title {
+  text-align: center;
+}
 
-.dndev-section-full-width[data-text-align='end'] .dndev-section-content {
-    text-align: end;
-  }
+.dndev-section-full-width[data-text-align='end'] .dndev-section-title {
+  text-align: end;
+}
 
 /* packages/components/src/atomic/Separator/Separator.css */
 
@@ -6077,6 +6346,123 @@ em {
     display: none;
   }
 
+/* packages/components/src/atomic/Tag/Tag.css */
+
+.dndev-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  border-radius: var(--radius-full);
+  border: 1px solid transparent;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  transition: all var(--dur-fast) var(--ease-in-out);
+
+  /* Default variant */
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.dndev-tag .dndev-tag-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin-left: 2px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    transition: opacity var(--dur-fast);
+  }
+
+:is(.dndev-tag .dndev-tag-remove):hover {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+:is(.dndev-tag .dndev-tag-remove):focus-visible {
+      outline: 2px solid var(--ring);
+    }
+
+.dndev-tag .dndev-tag-remove-icon {
+    width: 10px;
+    height: 10px;
+  }
+
+/* Sizes */
+
+.dndev-tag-sm {
+  padding: 0.125rem 0.5rem;
+  font-size: var(--font-size-xs);
+  height: 20px;
+}
+
+.dndev-tag-md {
+  padding: 0.25rem 0.75rem;
+  font-size: var(--font-size-sm);
+  height: 24px;
+}
+
+.dndev-tag-lg {
+  padding: 0.375rem 0.875rem;
+  font-size: var(--font-size-base);
+  height: 32px;
+}
+
+/* Variants */
+
+.dndev-tag-outline {
+  background-color: transparent;
+  border-color: var(--border);
+  color: var(--foreground);
+}
+
+.dndev-tag-accent {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+  border-color: transparent;
+}
+
+/* Interactive States */
+
+.dndev-tag-interactive {
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.dndev-tag-interactive:hover {
+    opacity: 0.8;
+  }
+
+.dndev-tag-interactive:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+.dndev-tag-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.dndev-tag-sm .dndev-tag-remove-icon {
+    width: 8px;
+    height: 8px;
+  }
+
+.dndev-tag-lg .dndev-tag-remove-icon {
+    width: 12px;
+    height: 12px;
+  }
+
 /* packages/components/src/atomic/Text/Text.css */
 
 .dndev-text-base[data-text-align='start'] {
@@ -6092,13 +6478,13 @@ em {
 }
 
 .dndev-text-base {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   line-height: var(--line-height);
   background-color: transparent; /* Text never has background, only color changes */
 }
 
 .dndev-text-base[data-variant='default'] {
-    color: var(--foreground);
+    color: inherit;
   }
 
 .dndev-text-base[data-variant='muted'] {
@@ -6129,28 +6515,35 @@ em {
     color: var(--destructive);
   }
 
+.dndev-text-base[data-variant='code'] {
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    background: var(--muted);
+    padding: 0.1em 0.4em;
+    border-radius: var(--radius-interactive);
+  }
+
 /* Level overrides */
 
 .dndev-text-base[data-level='h1'] {
     font-size: var(--font-size-3xl);
-    font-weight: 700;
+    font-weight: var(--font-weight-bold);
     letter-spacing: -0.02em;
   }
 
 .dndev-text-base[data-level='h2'] {
-    font-size: var(--font-size-2xl);
-    font-weight: 700;
-    letter-spacing: -0.01em;
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
   }
 
 .dndev-text-base[data-level='h3'] {
-    font-size: var(--font-size-xl);
-    font-weight: 600;
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
   }
 
 .dndev-text-base[data-level='h4'] {
-    font-size: var(--font-size-lg);
-    font-weight: 600;
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
   }
 
 .dndev-text-base[data-level='body'] {
@@ -6514,6 +6907,14 @@ em {
     display: block;
   }
 
+/* SVG placeholder - zero bytes, instant render */
+
+.dndev-video-placeholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 /* Play button overlay */
 
 .dndev-video-play-overlay {
@@ -7434,6 +7835,40 @@ h4[data-variant='code'] {
   border: 0;
 }
 
+/* ===========================
+   PROSE - SEMANTIC TYPOGRAPHY FOR CONTENT PAGES
+   Wrap docs/markdown/article content in .prose for semantic margins
+   Components are unaffected - they own their own spacing
+   =========================== */
+
+.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6 {
+    margin-block: var(--gap-md);
+  }
+
+.prose p {
+    margin-block: var(--gap-md);
+  }
+
+.prose ul,.prose ol {
+    padding-inline-start: var(--gap-lg);
+    margin-block: var(--gap-md);
+  }
+
+.prose li {
+    margin-block: var(--gap-sm);
+    padding-inline-start: var(--gap-sm);
+  }
+
+/* First/last child: remove top/bottom margin for clean container edges */
+
+.prose  > :first-child {
+    margin-block-start: 0;
+  }
+
+.prose  > :last-child {
+    margin-block-end: 0;
+  }
+
 /* ===========================
    SHADOW CONTROL (Universal)
    Works with any element
@@ -7871,18 +8306,20 @@ main[role='main'][data-routing-animation='none'] {
   display: grid;
   /* ONE DRY grid structure: 3 rows, 2 columns */
   /* Footer starts at sidebar edge (column 2) - when sidebar-width is 0px, footer starts at left edge */
+  /* Footer grows with content wrapping. For pixel-perfect calc() accuracy when footer wraps,
+     implement ResizeObserver to update --footer-height dynamically. */
   grid-template-areas:
     'header header'
     'sidebar main'
     'footer footer';
-  grid-template-rows: var(--header-height) 1fr var(--footer-height);
+  grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height), auto);
   grid-template-columns: var(--sidebar-width) 1fr;
 
   /* Game layout: Grid rows adjust based on breakpoint (footer hidden on tablet/mobile) */
 }
 
 [data-layout='game']:root .dndev-layout {
-    grid-template-rows: var(--header-height) 1fr var(--footer-height);
+    grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height), auto);
   }
 
 /* ===========================
@@ -8234,7 +8671,7 @@ footer[role='contentinfo'] {
   grid-area: footer;
   box-sizing: border-box;
   grid-column: 1 / -1;
-  height: var(--footer-height);
+  min-height: var(--footer-height);
   z-index: var(--z-footer);
 
   /* Theme-aware styling - 100% controlled by theme system */