@roadlittledawn/docs-design-system-react 0.1.0

package/dist/styles.css

@@ -0,0 +1,857 @@
+/* Import design tokens */
+:root {
+  /* Colors - Heading */
+  --dds-heading-color: #111827; /* gray-900 */
+
+  /* Colors - Button */
+  --dds-button-primary-bg: #2563eb; /* blue-600 */
+  --dds-button-primary-bg-hover: #1d4ed8; /* blue-700 */
+  --dds-button-primary-text: #ffffff;
+  --dds-button-primary-focus-ring: #3b82f6; /* blue-500 */
+
+  --dds-button-secondary-bg: #e5e7eb; /* gray-200 */
+  --dds-button-secondary-bg-hover: #d1d5db; /* gray-300 */
+  --dds-button-secondary-text: #111827; /* gray-900 */
+  --dds-button-secondary-focus-ring: #6b7280; /* gray-500 */
+
+  --dds-button-outline-bg: #ffffff;
+  --dds-button-outline-bg-hover: #f9fafb; /* gray-50 */
+  --dds-button-outline-border: #d1d5db; /* gray-300 */
+  --dds-button-outline-text: #374151; /* gray-700 */
+  --dds-button-outline-focus-ring: #6b7280; /* gray-500 */
+
+  /* Colors - Card */
+  --dds-card-bg-blue: #eff6ff; /* blue-50 */
+  --dds-card-bg-green: #f0fdf4; /* green-50 */
+  --dds-card-bg-purple: #faf5ff; /* purple-50 */
+  --dds-card-bg-red: #fef2f2; /* red-50 */
+  --dds-card-bg-yellow: #fefce8; /* yellow-50 */
+  --dds-card-bg-gray: #f9fafb; /* gray-50 */
+  --dds-card-bg-white: #ffffff;
+  --dds-card-border: #e5e7eb; /* gray-200 */
+
+  --dds-card-title-blue: #1e3a8a; /* blue-900 */
+  --dds-card-title-green: #14532d; /* green-900 */
+  --dds-card-title-purple: #581c87; /* purple-900 */
+  --dds-card-title-red: #7f1d1d; /* red-900 */
+  --dds-card-title-yellow: #713f12; /* yellow-900 */
+  --dds-card-title-gray: #111827; /* gray-900 */
+
+  --dds-card-text-blue: #1e40af; /* blue-800 */
+  --dds-card-text-green: #166534; /* green-800 */
+  --dds-card-text-purple: #6b21a8; /* purple-800 */
+  --dds-card-text-red: #991b1b; /* red-800 */
+  --dds-card-text-yellow: #854d0e; /* yellow-800 */
+  --dds-card-text-gray: #374151; /* gray-700 */
+
+  /* Typography - Font Sizes */
+  --dds-heading-1-size: 2.25rem; /* text-4xl */
+  --dds-heading-2-size: 1.875rem; /* text-3xl */
+  --dds-heading-3-size: 1.5rem; /* text-2xl */
+  --dds-heading-4-size: 1.25rem; /* text-xl */
+  --dds-text-base-size: 1rem;
+  --dds-text-sm-size: 0.875rem;
+  --dds-text-lg-size: 1.125rem;
+
+  /* Typography - Font Weights */
+  --dds-font-bold: 700;
+  --dds-font-semibold: 600;
+  --dds-font-medium: 500;
+
+  /* Typography - Line Heights */
+  --dds-line-height-tight: 1.25;
+  --dds-line-height-relaxed: 1.625;
+
+  /* Spacing - Margins */
+  --dds-heading-1-margin-top: 2rem; /* mt-8 */
+  --dds-heading-1-margin-bottom: 1.5rem; /* mb-6 */
+  --dds-heading-2-margin-top: 1.75rem; /* mt-7 */
+  --dds-heading-2-margin-bottom: 1.25rem; /* mb-5 */
+  --dds-heading-3-margin-top: 1.5rem; /* mt-6 */
+  --dds-heading-3-margin-bottom: 1rem; /* mb-4 */
+  --dds-heading-4-margin-top: 1.25rem; /* mt-5 */
+  --dds-heading-4-margin-bottom: 0.75rem; /* mb-3 */
+
+  /* Spacing - Padding */
+  --dds-card-padding: 1.5rem; /* p-6 */
+  --dds-card-title-margin-bottom: 1rem; /* mb-4 */
+
+  --dds-button-sm-padding-x: 0.75rem; /* px-3 */
+  --dds-button-sm-padding-y: 0.375rem; /* py-1.5 */
+  --dds-button-md-padding-x: 1rem; /* px-4 */
+  --dds-button-md-padding-y: 0.5rem; /* py-2 */
+  --dds-button-lg-padding-x: 1.5rem; /* px-6 */
+  --dds-button-lg-padding-y: 0.75rem; /* py-3 */
+
+  /* Border Radius */
+  --dds-button-radius: 0.375rem; /* rounded-md */
+  --dds-card-radius: 0.5rem; /* rounded-lg */
+
+  /* Shadows */
+  --dds-card-shadow-hover:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --dds-focus-ring-offset: 2px;
+
+  /* Transitions */
+  --dds-transition-colors:
+    color 150ms ease-in-out, background-color 150ms ease-in-out,
+    border-color 150ms ease-in-out;
+  --dds-transition-shadow: box-shadow 150ms ease-in-out;
+
+  /* Link Colors */
+  --dds-link-color: #2563eb; /* blue-600 */
+  --dds-link-color-hover: #1e40af; /* blue-800 */
+  --dds-link-decoration: #93c5fd; /* blue-300 */
+  --dds-link-decoration-hover: #60a5fa; /* blue-500 */
+
+  /* Callout Colors and Styles */
+  --dds-callout-text: #374151; /* gray-700 */
+  --dds-callout-padding: 1.25rem; /* p-5 */
+  --dds-callout-radius: 0.25rem; /* rounded */
+  --dds-callout-title-size: 0.75rem; /* text-xs */
+  --dds-callout-title-margin-bottom: 0.5rem; /* mb-2 */
+
+  /* Callout - Caution (red) */
+  --dds-callout-caution-border: #dc2626; /* red-600 */
+  --dds-callout-caution-bg: #fef2f2; /* red-50 */
+  --dds-callout-caution-title: #991b1b; /* red-800 */
+
+  /* Callout - Important (orange/yellow) */
+  --dds-callout-important-border: #f59e0b; /* amber-500 */
+  --dds-callout-important-bg: #fffbeb; /* amber-50 */
+  --dds-callout-important-title: #92400e; /* amber-800 */
+
+  /* Callout - Tip (blue) */
+  --dds-callout-tip-border: #2563eb; /* blue-600 */
+  --dds-callout-tip-bg: #eff6ff; /* blue-50 */
+  --dds-callout-tip-title: #1e40af; /* blue-800 */
+
+  /* Callout - Course (green) */
+  --dds-callout-course-border: #059669; /* emerald-600 */
+  --dds-callout-course-bg: #f0fdf4; /* green-50 */
+  --dds-callout-course-title: #065f46; /* emerald-800 */
+
+  /* Collapser Colors and Styles */
+  --dds-collapser-radius: 0.375rem; /* rounded-md */
+  --dds-collapser-border: #e5e7eb; /* gray-200 */
+  --dds-collapser-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --dds-collapser-button-padding: 0.75rem; /* p-3 */
+  --dds-collapser-button-hover-bg: #f9fafb; /* gray-50 */
+  --dds-collapser-icon-color: #6b7280; /* gray-500 */
+  --dds-collapser-content-padding: 1rem; /* p-4 */
+}
+/* Import PrismJS theme */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+.token.punctuation {
+	color: #999;
+}
+.token.namespace {
+	opacity: .7;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	/* This background color was intended by the author of this theme. */
+	background: hsla(0, 0%, 100%, .5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+.token.entity {
+	cursor: help;
+}
+/* Import component styles */
+.dds-heading {
+  font-weight: var(--dds-font-bold);
+  color: var(--dds-heading-color);
+}
+.dds-heading-1 {
+  font-size: var(--dds-heading-1-size);
+  margin-top: var(--dds-heading-1-margin-top);
+  margin-bottom: var(--dds-heading-1-margin-bottom);
+}
+.dds-heading-2 {
+  font-size: var(--dds-heading-2-size);
+  margin-top: var(--dds-heading-2-margin-top);
+  margin-bottom: var(--dds-heading-2-margin-bottom);
+}
+.dds-heading-3 {
+  font-size: var(--dds-heading-3-size);
+  margin-top: var(--dds-heading-3-margin-top);
+  margin-bottom: var(--dds-heading-3-margin-bottom);
+}
+.dds-heading-4 {
+  font-size: var(--dds-heading-4-size);
+  margin-top: var(--dds-heading-4-margin-top);
+  margin-bottom: var(--dds-heading-4-margin-bottom);
+}
+.dds-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--dds-button-radius);
+  font-weight: var(--dds-font-medium);
+  transition: var(--dds-transition-colors);
+  outline: none;
+}
+/* Variants */
+.dds-button-primary {
+  background-color: var(--dds-button-primary-bg);
+  color: var(--dds-button-primary-text);
+}
+.dds-button-primary:hover {
+  background-color: var(--dds-button-primary-bg-hover);
+}
+.dds-button-primary:focus {
+  box-shadow: 0 0 0 var(--dds-focus-ring-offset) #ffffff, 0 0 0 calc(var(--dds-focus-ring-offset) + 2px) var(--dds-button-primary-focus-ring);
+}
+.dds-button-secondary {
+  background-color: var(--dds-button-secondary-bg);
+  color: var(--dds-button-secondary-text);
+}
+.dds-button-secondary:hover {
+  background-color: var(--dds-button-secondary-bg-hover);
+}
+.dds-button-secondary:focus {
+  box-shadow: 0 0 0 var(--dds-focus-ring-offset) #ffffff, 0 0 0 calc(var(--dds-focus-ring-offset) + 2px) var(--dds-button-secondary-focus-ring);
+}
+.dds-button-outline {
+  border: 1px solid var(--dds-button-outline-border);
+  background-color: var(--dds-button-outline-bg);
+  color: var(--dds-button-outline-text);
+}
+.dds-button-outline:hover {
+  background-color: var(--dds-button-outline-bg-hover);
+}
+.dds-button-outline:focus {
+  box-shadow: 0 0 0 var(--dds-focus-ring-offset) #ffffff, 0 0 0 calc(var(--dds-focus-ring-offset) + 2px) var(--dds-button-outline-focus-ring);
+}
+/* Sizes */
+.dds-button-sm {
+  padding: var(--dds-button-sm-padding-y) var(--dds-button-sm-padding-x);
+  font-size: var(--dds-text-sm-size);
+}
+.dds-button-md {
+  padding: var(--dds-button-md-padding-y) var(--dds-button-md-padding-x);
+  font-size: var(--dds-text-base-size);
+}
+.dds-button-lg {
+  padding: var(--dds-button-lg-padding-y) var(--dds-button-lg-padding-x);
+  font-size: var(--dds-text-lg-size);
+}
+.dds-callout {
+  padding: var(--dds-callout-padding);
+  border-radius: var(--dds-callout-radius);
+  border: 1px solid;
+  border-left-width: 6px;
+  color: var(--dds-callout-text);
+}
+.dds-callout-title {
+  font-size: var(--dds-callout-title-size);
+  text-transform: uppercase;
+  margin-top: 0;
+  margin-bottom: var(--dds-callout-title-margin-bottom);
+  font-weight: var(--dds-font-semibold);
+}
+/* Caution variant - red */
+.dds-callout-caution {
+  border-color: var(--dds-callout-caution-border);
+  background-color: var(--dds-callout-caution-bg);
+}
+.dds-callout-title-caution {
+  color: var(--dds-callout-caution-title);
+}
+/* Important variant - yellow/orange */
+.dds-callout-important {
+  border-color: var(--dds-callout-important-border);
+  background-color: var(--dds-callout-important-bg);
+}
+.dds-callout-title-important {
+  color: var(--dds-callout-important-title);
+}
+/* Tip variant - blue */
+.dds-callout-tip {
+  border-color: var(--dds-callout-tip-border);
+  background-color: var(--dds-callout-tip-bg);
+}
+.dds-callout-title-tip {
+  color: var(--dds-callout-tip-title);
+}
+/* Course variant - green */
+.dds-callout-course {
+  border-color: var(--dds-callout-course-border);
+  background-color: var(--dds-callout-course-bg);
+}
+.dds-callout-title-course {
+  color: var(--dds-callout-course-title);
+}
+a.no-text-decoration {
+  text-decoration: none;
+}
+.dds-card {
+  padding: var(--dds-card-padding);
+  border-radius: var(--dds-card-radius);
+}
+.dds-card-clickable {
+  cursor: pointer;
+  transition: var(--dds-transition-shadow);
+}
+.dds-card-clickable:hover {
+  box-shadow: var(--dds-card-shadow-hover);
+}
+.dds-card-clickable > * {
+  text-decoration: none;
+}
+/* Background variants */
+.dds-card-bg-blue {
+  background-color: var(--dds-card-bg-blue);
+}
+.dds-card-bg-green {
+  background-color: var(--dds-card-bg-green);
+}
+.dds-card-bg-purple {
+  background-color: var(--dds-card-bg-purple);
+}
+.dds-card-bg-red {
+  background-color: var(--dds-card-bg-red);
+}
+.dds-card-bg-yellow {
+  background-color: var(--dds-card-bg-yellow);
+}
+.dds-card-bg-gray {
+  background-color: var(--dds-card-bg-gray);
+}
+.dds-card-bg-white {
+  background-color: var(--dds-card-bg-white);
+  border: 1px solid var(--dds-card-border);
+}
+/* Title color variants */
+.dds-card-title {
+  margin-bottom: var(--dds-card-title-margin-bottom);
+  font-size: var(--dds-text-lg-size);
+  font-weight: var(--dds-font-semibold);
+}
+.dds-card-title-blue {
+  color: var(--dds-card-title-blue);
+}
+.dds-card-title-green {
+  color: var(--dds-card-title-green);
+}
+.dds-card-title-purple {
+  color: var(--dds-card-title-purple);
+}
+.dds-card-title-red {
+  color: var(--dds-card-title-red);
+}
+.dds-card-title-yellow {
+  color: var(--dds-card-title-yellow);
+}
+.dds-card-title-gray {
+  color: var(--dds-card-title-gray);
+}
+/* Text color variants */
+.dds-card-text-blue {
+  color: var(--dds-card-text-blue);
+}
+.dds-card-text-green {
+  color: var(--dds-card-text-green);
+}
+.dds-card-text-purple {
+  color: var(--dds-card-text-purple);
+}
+.dds-card-text-red {
+  color: var(--dds-card-text-red);
+}
+.dds-card-text-yellow {
+  color: var(--dds-card-text-yellow);
+}
+.dds-card-text-gray {
+  color: var(--dds-card-text-gray);
+}
+.dds-card-grid {
+  display: grid;
+  gap: 1.5rem; /* gap-6 */
+}
+.dds-card-grid-2 {
+  grid-template-columns: 1fr;
+}
+@media (min-width: 768px) {
+  .dds-card-grid-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+.dds-card-grid-3 {
+  grid-template-columns: 1fr;
+}
+@media (min-width: 768px) {
+  .dds-card-grid-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .dds-card-grid-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.dds-card-grid-4 {
+  grid-template-columns: 1fr;
+}
+@media (min-width: 768px) {
+  .dds-card-grid-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .dds-card-grid-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.dds-collapser {
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0;
+  border-radius: var(--dds-collapser-radius);
+  border: 1px solid var(--dds-collapser-border);
+  box-shadow: var(--dds-collapser-shadow);
+}
+.dds-collapser-button {
+  cursor: pointer;
+  padding: var(--dds-collapser-button-padding);
+  display: flex;
+  align-items: center;
+  transition: var(--dds-transition-colors);
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+}
+.dds-collapser-button:hover,
+.dds-collapser-button:focus {
+  background-color: var(--dds-collapser-button-hover-bg);
+  outline: none;
+}
+.dds-collapser-title {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  font-size: var(--dds-text-base-size);
+  margin: 0;
+  font-weight: bold;
+  color: var(--dds-heading-color);
+}
+.dds-collapser-icon {
+  margin-left: auto;
+  transition: transform 0.3s ease;
+  color: var(--dds-collapser-icon-color);
+  flex-shrink: 0;
+}
+.dds-collapser-icon-open {
+  transform: rotate(180deg);
+}
+.dds-collapser-content-wrapper {
+  overflow: hidden;
+  transition: height 0.3s ease;
+}
+.dds-collapser-content {
+  border-top: 1px solid var(--dds-collapser-border);
+  padding: var(--dds-collapser-content-padding);
+}
+.dds-code-block {
+  border: 1px solid var(--dds-code-block-border, #e5e7eb);
+  border-radius: var(--dds-code-block-radius, 8px);
+  background-color: var(--dds-code-block-bg, #ffffff);
+  overflow: hidden;
+  margin: var(--dds-code-block-margin, 1rem 0);
+}
+.dds-code-block-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding: 0;
+  background-color: var(--dds-code-block-header-bg, #ffffff);
+  border-bottom: 1px solid var(--dds-code-block-border, #e5e7eb);
+  min-height: 2.75rem;
+  overflow: hidden;
+}
+.dds-code-block-header-left {
+  display: flex;
+  align-items: flex-end;
+  flex: 1;
+  min-width: 0;
+}
+.dds-code-block-header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--dds-code-block-header-gap, 0.75rem);
+  margin-left: auto;
+  padding: var(--dds-code-block-header-padding, 0.75rem 1rem);
+  padding-left: 0.5rem;
+}
+.dds-code-block-tabs {
+  display: flex;
+  gap: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  align-items: flex-end;
+  /* Hide scrollbar but keep functionality */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+.dds-code-block-tabs::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+.dds-code-block-tab {
+  padding: var(--dds-code-block-tab-padding, 0.5rem 1rem);
+  background-color: var(--dds-code-block-tab-bg, #f3f4f6);
+  border: 1px solid var(--dds-code-block-border, #e5e7eb);
+  border-bottom: none;
+  border-top-left-radius: var(--dds-code-block-tab-radius, 6px);
+  border-top-right-radius: var(--dds-code-block-tab-radius, 6px);
+  color: var(--dds-code-block-tab-text, #6b7280);
+  font-size: var(--dds-code-block-tab-size, 0.875rem);
+  font-weight: var(--dds-font-medium);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: var(--dds-transition-colors);
+  margin-right: 2px;
+  position: relative;
+}
+.dds-code-block-tab:hover {
+  color: var(--dds-code-block-tab-text-hover, #374151);
+  background-color: var(--dds-code-block-tab-bg-hover, #e5e7eb);
+}
+.dds-code-block-tab-active {
+  color: var(--dds-code-block-tab-text-active, #111827);
+  background-color: var(--dds-code-block-tab-bg-active, #ffffff);
+  border-color: var(--dds-code-block-border, #e5e7eb);
+  z-index: 1;
+  /* Connect to content area */
+  margin-bottom: -1px;
+  padding-bottom: calc(var(--dds-code-block-tab-padding, 0.5rem) + 1px);
+}
+.dds-code-block-tab-active:hover {
+  background-color: var(--dds-code-block-tab-bg-active, #ffffff);
+}
+.dds-code-block-language-select {
+  padding: var(--dds-code-block-select-padding, 0.375rem 0.75rem);
+  border: 1px solid var(--dds-code-block-select-border, #d1d5db);
+  border-radius: var(--dds-code-block-select-radius, 4px);
+  background-color: var(--dds-code-block-select-bg, #ffffff);
+  color: var(--dds-code-block-select-text, #374151);
+  font-size: var(--dds-code-block-select-size, 0.875rem);
+  cursor: pointer;
+  transition: var(--dds-transition-colors);
+}
+.dds-code-block-language-select:hover {
+  border-color: var(--dds-code-block-select-border-hover, #9ca3af);
+}
+.dds-code-block-language-select:focus {
+  outline: none;
+  border-color: var(--dds-code-block-select-border-focus, #3b82f6);
+  box-shadow: 0 0 0 3px var(--dds-code-block-select-focus-ring, rgba(59, 130, 246, 0.1));
+}
+.dds-code-block-language-label {
+  font-size: var(--dds-code-block-label-size, 0.875rem);
+  color: var(--dds-code-block-label-text, #6b7280);
+  font-weight: var(--dds-font-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.dds-code-block-copy-button {
+  padding: var(--dds-code-block-copy-padding, 0.375rem 0.75rem);
+  background-color: var(--dds-code-block-copy-bg, #ffffff);
+  border: 1px solid var(--dds-code-block-copy-border, #d1d5db);
+  border-radius: var(--dds-code-block-copy-radius, 4px);
+  color: var(--dds-code-block-copy-text, #374151);
+  font-size: var(--dds-code-block-copy-size, 0.875rem);
+  font-weight: var(--dds-font-medium);
+  cursor: pointer;
+  transition: var(--dds-transition-colors);
+  white-space: nowrap;
+}
+.dds-code-block-copy-button:hover {
+  background-color: var(--dds-code-block-copy-bg-hover, #f9fafb);
+  border-color: var(--dds-code-block-copy-border-hover, #9ca3af);
+}
+.dds-code-block-copy-button:active {
+  background-color: var(--dds-code-block-copy-bg-active, #f3f4f6);
+}
+.dds-code-block-content {
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background-color: var(--dds-code-block-content-bg, #f9fafb);
+}
+.dds-code-block-content pre {
+  margin: 0;
+  padding: var(--dds-code-block-pre-padding, 1rem);
+  overflow: visible;
+  font-family: var(--dds-code-block-font-family, 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace);
+  font-size: var(--dds-code-block-font-size, 0.875rem);
+  line-height: var(--dds-code-block-line-height, 1.5);
+  color: var(--dds-code-block-text, #111827);
+  background-color: transparent;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga" 0;
+}
+.dds-code-block-content code {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background-color: transparent !important;
+  padding: 0;
+  border-radius: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  display: block;
+  white-space: pre;
+}
+/* Ensure no double rendering from nested elements */
+.dds-code-block-content pre code {
+  display: block;
+  width: 100%;
+}
+.dds-code-block-line-highlights {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+.dds-code-block-line-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1.5em;
+  background-color: var(--dds-code-block-highlight-bg, rgba(59, 130, 246, 0.2));
+  border-left: 3px solid var(--dds-code-block-highlight-border, #3b82f6);
+}
+.dds-code-block-loading,
+.dds-code-block-error {
+  padding: var(--dds-code-block-message-padding, 1rem);
+  text-align: center;
+  border: 1px solid var(--dds-code-block-border, #e5e7eb);
+  border-radius: var(--dds-code-block-radius, 8px);
+}
+.dds-code-block-loading-text {
+  color: var(--dds-code-block-loading-text, #6b7280);
+  font-size: var(--dds-code-block-message-size, 0.875rem);
+}
+.dds-code-block-error-text {
+  color: var(--dds-code-block-error-text, #dc2626);
+  font-size: var(--dds-code-block-message-size, 0.875rem);
+}
+/* Prism theme overrides for light mode */
+.dds-code-block-content .token.comment,
+.dds-code-block-content .token.prolog,
+.dds-code-block-content .token.doctype,
+.dds-code-block-content .token.cdata {
+  color: #6b7280;
+  font-style: italic;
+}
+.dds-code-block-content .token.punctuation {
+  color: #374151;
+}
+.dds-code-block-content .token.property,
+.dds-code-block-content .token.tag,
+.dds-code-block-content .token.boolean,
+.dds-code-block-content .token.number,
+.dds-code-block-content .token.constant,
+.dds-code-block-content .token.symbol,
+.dds-code-block-content .token.deleted {
+  color: #dc2626;
+}
+.dds-code-block-content .token.selector,
+.dds-code-block-content .token.attr-name,
+.dds-code-block-content .token.string,
+.dds-code-block-content .token.char,
+.dds-code-block-content .token.builtin,
+.dds-code-block-content .token.inserted {
+  color: #059669;
+}
+.dds-code-block-content .token.operator,
+.dds-code-block-content .token.entity,
+.dds-code-block-content .token.url,
+.dds-code-block-content .language-css .token.string,
+.dds-code-block-content .style .token.string {
+  color: #d97706;
+  background-color: transparent !important;
+  background: none !important;
+}
+/* Override any Prism theme backgrounds */
+.dds-code-block-content .token.operator * {
+  background-color: transparent !important;
+  background: none !important;
+}
+.dds-code-block-content .token.atrule,
+.dds-code-block-content .token.attr-value,
+.dds-code-block-content .token.keyword {
+  color: #2563eb;
+}
+.dds-code-block-content .token.function,
+.dds-code-block-content .token.class-name {
+  color: #7c3aed;
+}
+.dds-code-block-content .token.regex,
+.dds-code-block-content .token.important,
+.dds-code-block-content .token.variable {
+  color: #ea580c;
+}
+.dds-typography {
+  color: var(--dds-heading-color);
+}
+.dds-typography-h1 {
+  font-size: var(--dds-heading-1-size);
+  font-weight: var(--dds-font-bold);
+  line-height: var(--dds-line-height-tight);
+}
+.dds-typography-h2 {
+  font-size: var(--dds-heading-2-size);
+  font-weight: var(--dds-font-semibold);
+  line-height: var(--dds-line-height-tight);
+}
+.dds-typography-h3 {
+  font-size: var(--dds-heading-3-size);
+  font-weight: var(--dds-font-medium);
+  line-height: var(--dds-line-height-tight);
+}
+.dds-typography-h4 {
+  font-size: var(--dds-heading-4-size);
+  font-weight: var(--dds-font-medium);
+  line-height: var(--dds-line-height-tight);
+}
+.dds-typography-p {
+  font-size: var(--dds-text-base-size);
+  line-height: var(--dds-line-height-relaxed);
+}
+.dds-typography-caption {
+  font-size: var(--dds-text-sm-size);
+  color: #4b5563; /* gray-600 */
+}
+.dds-link {
+  color: var(--dds-link-color);
+  text-decoration: underline;
+  text-decoration-color: var(--dds-link-decoration);
+  transition: var(--dds-transition-colors);
+}
+.dds-link:hover {
+  color: var(--dds-link-color-hover);
+  text-decoration-color: var(--dds-link-decoration-hover);
+}
+.dds-link-icon {
+  display: inline-block;
+  width: 1rem; /* w-4 */
+  height: 1rem; /* h-4 */
+  margin-left: 0.25rem; /* ml-1 */
+  margin-bottom: 0.25rem; /* mb-1 */
+  vertical-align: middle;
+}
+