@digiko-npm/designsystem 0.1.0

package/dist/designsystem.css

@@ -0,0 +1,4642 @@
+/* @ds/designsystem v0.1.0 */
+/* ==========================================================================
+   @ds/designsystem
+
+   Import this one file to get everything.
+   Or import individual layers for fine-grained control:
+
+     import '@ds/designsystem/tokens'
+     import '@ds/designsystem/base'
+     import '@ds/designsystem/components'
+     import '@ds/designsystem/utilities'
+
+   To customize: override any --ds-* variable in your project CSS.
+   Your values always win. Nothing breaks.
+   ========================================================================== */
+
+/* ==========================================================================
+   Design Tokens — All tokens in one import
+
+   To override: just redeclare any --ds-* variable in your project's CSS.
+   Your values win. Nothing breaks.
+   ========================================================================== */
+
+/* ==========================================================================
+   Design Tokens: Colors
+   Refined zinc palette, editorial warmth.
+   Light-first with elegant dark mode. Override any --ds-* variable to re-theme.
+   ========================================================================== */
+
+/* Light theme (default) */
+:root,
+[data-theme="light"] {
+  /* --- Backgrounds — clean whites, warm grays --- */
+  --ds-color-bg: #fafafa;
+  --ds-color-bg-subtle: #ffffff;
+  --ds-color-bg-muted: #e4e4e7;
+  --ds-color-bg-elevated: #f4f4f5;
+
+  --ds-color-surface: #ffffff;
+  --ds-color-surface-hover: #fafafa;
+  --ds-color-surface-active: #f4f4f5;
+
+  /* --- Text — zinc hierarchy --- */
+  --ds-color-text: #09090b;
+  --ds-color-text-secondary: #52525b;
+  --ds-color-text-tertiary: #a1a1aa;
+  --ds-color-text-disabled: #d4d4d8;
+
+  /* --- Inverted (primary buttons: dark bg + light text) --- */
+  --ds-color-inverted: #18181b;
+  --ds-color-on-inverted: #fafafa;
+
+  /* --- Borders — solid zinc --- */
+  --ds-color-border: #e4e4e7;
+  --ds-color-border-hover: #d4d4d8;
+  --ds-color-border-active: #a1a1aa;
+  --ds-color-border-subtle: #f4f4f5;
+
+  /* --- Interactive --- */
+  --ds-color-interactive: #3f3f46;
+  --ds-color-interactive-hover: #27272a;
+
+  /* --- Overlays --- */
+  --ds-color-overlay: rgba(0, 0, 0, 0.5);
+  --ds-color-overlay-subtle: rgba(0, 0, 0, 0.02);
+  --ds-color-overlay-hover: rgba(0, 0, 0, 0.04);
+  --ds-color-overlay-active: rgba(0, 0, 0, 0.08);
+
+  /* --- Navigation (glass effect) --- */
+  --ds-color-nav-bg: rgba(250, 250, 250, 0.8);
+  --ds-color-nav-border: rgba(228, 228, 231, 0.6);
+
+  /* --- Selection --- */
+  --ds-color-selection-bg: #09090b;
+  --ds-color-selection-text: #fafafa;
+
+  /* --- Shadows --- */
+  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  /* --- Scrollbar --- */
+  --ds-scrollbar-thumb: #d4d4d4;
+  --ds-scrollbar-thumb-hover: #a3a3a3;
+
+  color-scheme: light;
+}
+
+/* Dark theme */
+[data-theme="dark"] {
+  /* --- Backgrounds — deep, refined zinc-900 palette --- */
+  --ds-color-bg: #09090b;
+  --ds-color-bg-subtle: #0f0f11;
+  --ds-color-bg-muted: #27272a;
+  --ds-color-bg-elevated: #18181b;
+
+  --ds-color-surface: #0f0f11;
+  --ds-color-surface-hover: #18181b;
+  --ds-color-surface-active: #27272a;
+
+  /* --- Text --- */
+  --ds-color-text: #fafafa;
+  --ds-color-text-secondary: #a1a1aa;
+  --ds-color-text-tertiary: #52525b;
+  --ds-color-text-disabled: #3f3f46;
+
+  /* --- Inverted (primary buttons: light bg + dark text) --- */
+  --ds-color-inverted: #fafafa;
+  --ds-color-on-inverted: #09090b;
+
+  /* --- Borders --- */
+  --ds-color-border: #27272a;
+  --ds-color-border-hover: #3f3f46;
+  --ds-color-border-active: #52525b;
+  --ds-color-border-subtle: #18181b;
+
+  /* --- Interactive --- */
+  --ds-color-interactive: #d4d4d8;
+  --ds-color-interactive-hover: #fafafa;
+
+  /* --- Overlays --- */
+  --ds-color-overlay: rgba(0, 0, 0, 0.7);
+  --ds-color-overlay-subtle: rgba(255, 255, 255, 0.03);
+  --ds-color-overlay-hover: rgba(255, 255, 255, 0.06);
+  --ds-color-overlay-active: rgba(255, 255, 255, 0.1);
+
+  /* --- Navigation --- */
+  --ds-color-nav-bg: rgba(9, 9, 11, 0.8);
+  --ds-color-nav-border: rgba(39, 39, 42, 0.6);
+
+  /* --- Selection --- */
+  --ds-color-selection-bg: #fafafa;
+  --ds-color-selection-text: #09090b;
+
+  /* --- Shadows (stronger in dark) --- */
+  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
+
+  /* --- Scrollbar --- */
+  --ds-scrollbar-thumb: #27272a;
+  --ds-scrollbar-thumb-hover: #3f3f46;
+
+  color-scheme: dark;
+}
+
+/* Shared tokens (same in both themes) */
+:root {
+  /* --- Semantic Status --- */
+  --ds-color-success: #16a34a;
+  --ds-color-success-subtle: rgba(22, 163, 74, 0.1);
+  --ds-color-success-border: rgba(22, 163, 74, 0.2);
+
+  --ds-color-warning: #d97706;
+  --ds-color-warning-subtle: rgba(217, 119, 6, 0.1);
+  --ds-color-warning-border: rgba(217, 119, 6, 0.2);
+
+  --ds-color-error: #dc2626;
+  --ds-color-error-subtle: rgba(220, 38, 38, 0.1);
+  --ds-color-error-border: rgba(220, 38, 38, 0.2);
+
+  --ds-color-info: #2563eb;
+  --ds-color-info-subtle: rgba(37, 99, 235, 0.1);
+  --ds-color-info-border: rgba(37, 99, 235, 0.2);
+
+  /* --- Accent Colors (for badges, categories) --- */
+  --ds-color-accent-blue: #2563eb;
+  --ds-color-accent-purple: #7c3aed;
+  --ds-color-accent-green: #16a34a;
+  --ds-color-accent-orange: #d97706;
+  --ds-color-accent-blue-subtle: rgba(37, 99, 235, 0.1);
+  --ds-color-accent-purple-subtle: rgba(124, 58, 237, 0.1);
+  --ds-color-accent-green-subtle: rgba(22, 163, 74, 0.1);
+  --ds-color-accent-orange-subtle: rgba(217, 119, 6, 0.1);
+}
+
+/* Dark overrides for status/accent (brighter for contrast) */
+[data-theme="dark"] {
+  --ds-color-success: #4ade80;
+  --ds-color-success-subtle: rgba(74, 222, 128, 0.1);
+  --ds-color-success-border: rgba(74, 222, 128, 0.2);
+
+  --ds-color-warning: #fbbf24;
+  --ds-color-warning-subtle: rgba(251, 191, 36, 0.1);
+  --ds-color-warning-border: rgba(251, 191, 36, 0.2);
+
+  --ds-color-error: #f87171;
+  --ds-color-error-subtle: rgba(248, 113, 113, 0.1);
+  --ds-color-error-border: rgba(248, 113, 113, 0.2);
+
+  --ds-color-info: #60a5fa;
+  --ds-color-info-subtle: rgba(96, 165, 250, 0.1);
+  --ds-color-info-border: rgba(96, 165, 250, 0.2);
+
+  --ds-color-accent-blue: #60a5fa;
+  --ds-color-accent-purple: #a78bfa;
+  --ds-color-accent-green: #4ade80;
+  --ds-color-accent-orange: #fbbf24;
+  --ds-color-accent-blue-subtle: rgba(96, 165, 250, 0.1);
+  --ds-color-accent-purple-subtle: rgba(167, 139, 250, 0.1);
+  --ds-color-accent-green-subtle: rgba(74, 222, 128, 0.1);
+  --ds-color-accent-orange-subtle: rgba(251, 191, 36, 0.1);
+}
+
+/* ==========================================================================
+   Design Tokens: Typography
+   Clash Display headings, Switzer body.
+   Editorial feel, generous sizing, tight tracking on display.
+   ========================================================================== */
+
+:root {
+  /* --- Font Families ---
+       Override these in your project to use your own fonts.
+       The DS provides the architecture; you bring the typeface. */
+  --ds-font-display: "Clash Display", system-ui, sans-serif;
+  --ds-font-sans: "Switzer", system-ui, -apple-system, sans-serif;
+  --ds-font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
+
+  /* --- Display Font Weight (Clash Display looks best at 400) --- */
+  --ds-font-display-weight: 400;
+
+  /* --- Font Sizes --- */
+  --ds-text-xs: 0.75rem;      /* 12px */
+  --ds-text-sm: 0.875rem;     /* 14px */
+  --ds-text-base: 1rem;       /* 16px */
+  --ds-text-lg: 1.125rem;     /* 18px */
+  --ds-text-xl: 1.25rem;      /* 20px */
+  --ds-text-2xl: 1.5rem;      /* 24px */
+  --ds-text-3xl: 1.875rem;    /* 30px */
+  --ds-text-4xl: 2.25rem;     /* 36px */
+  --ds-text-5xl: 3rem;        /* 48px */
+  --ds-text-6xl: 3.75rem;     /* 60px */
+  --ds-text-7xl: 4.5rem;      /* 72px */
+
+  /* --- Font Weights --- */
+  --ds-weight-light: 300;
+  --ds-weight-normal: 400;
+  --ds-weight-medium: 500;
+  --ds-weight-semibold: 600;
+  --ds-weight-bold: 700;
+
+  /* --- Line Heights --- */
+  --ds-leading-none: 1;
+  --ds-leading-tight: 1.1;
+  --ds-leading-snug: 1.25;
+  --ds-leading-normal: 1.5;
+  --ds-leading-relaxed: 1.625;
+  --ds-leading-loose: 2;
+
+  /* --- Letter Spacing --- */
+  --ds-tracking-tighter: -0.02em;
+  --ds-tracking-tight: -0.01em;
+  --ds-tracking-normal: 0;
+  --ds-tracking-wide: 0.05em;
+}
+
+/* ==========================================================================
+   Design Tokens: Spacing & Layout
+   Generous whitespace, responsive sections.
+   ========================================================================== */
+
+:root {
+  /* --- Spacing Scale --- */
+  --ds-space-0: 0;
+  --ds-space-0-5: 0.125rem;  /* 2px */
+  --ds-space-1: 0.25rem;     /* 4px */
+  --ds-space-1-5: 0.375rem;  /* 6px */
+  --ds-space-2: 0.5rem;      /* 8px */
+  --ds-space-2-5: 0.625rem;  /* 10px */
+  --ds-space-3: 0.75rem;     /* 12px */
+  --ds-space-4: 1rem;        /* 16px */
+  --ds-space-5: 1.25rem;     /* 20px */
+  --ds-space-6: 1.5rem;      /* 24px */
+  --ds-space-8: 2rem;        /* 32px */
+  --ds-space-10: 2.5rem;     /* 40px */
+  --ds-space-12: 3rem;       /* 48px */
+  --ds-space-16: 4rem;       /* 64px */
+  --ds-space-20: 5rem;       /* 80px */
+  --ds-space-24: 6rem;       /* 96px */
+  --ds-space-32: 8rem;       /* 128px */
+
+  /* --- Section Padding (responsive, generous) --- */
+  --ds-section-padding: clamp(80px, 12vw, 160px);
+
+  /* --- Container --- */
+  --ds-container-max: 1200px;
+  --ds-container-padding: clamp(20px, 5vw, 80px);
+  --ds-container-sm: 640px;
+  --ds-container-md: 768px;
+  --ds-container-lg: 1024px;
+
+  /* --- Border Radius (refined, slightly larger) --- */
+  --ds-radius-none: 0;
+  --ds-radius-sm: 6px;
+  --ds-radius-md: 8px;
+  --ds-radius-lg: 12px;
+  --ds-radius-xl: 16px;
+  --ds-radius-2xl: 20px;
+  --ds-radius-full: 9999px;
+
+  /* --- Z-Index Scale --- */
+  --ds-z-base: 0;
+  --ds-z-dropdown: 50;
+  --ds-z-sticky: 60;
+  --ds-z-overlay: 80;
+  --ds-z-modal: 100;
+  --ds-z-toast: 150;
+  --ds-z-tooltip: 200;
+}
+
+/* ==========================================================================
+   Design Tokens: Effects & Transitions
+   Expo easing, smooth editorial motion.
+   Shadows are defined per-theme in colors.css.
+   ========================================================================== */
+
+:root {
+  /* --- Focus Ring --- */
+  --ds-ring-width: 2px;
+  --ds-ring-offset: 2px;
+  --ds-ring-color: var(--ds-color-border-active);
+
+  /* --- Transitions --- */
+  --ds-duration-fast: 100ms;
+  --ds-duration-normal: 200ms;
+  --ds-duration-slow: 400ms;
+  --ds-duration-slower: 800ms;
+
+  --ds-ease-default: ease;
+  --ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ds-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ds-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* --- Opacity --- */
+  --ds-opacity-disabled: 0.5;
+}
+
+
+/* ==========================================================================
+   Base: Reset
+   Clean, modern, antialiased.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+
+html, body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  min-height: 100dvh;
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-base);
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-bg);
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+input, button, textarea, select {
+  font: inherit;
+  color: inherit;
+}
+
+button,
+[role="button"],
+select,
+summary {
+  cursor: pointer;
+}
+
+button {
+  background: none;
+  border: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul, ol {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Hide number input spinners */
+input[type="number"] { -moz-appearance: textfield; }
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Focus: subtle ring */
+*:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
+/* Selection — inverted */
+::selection {
+  background-color: var(--ds-color-selection-bg);
+  color: var(--ds-color-selection-text);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--ds-scrollbar-thumb);
+  border-radius: var(--ds-radius-sm);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ds-scrollbar-thumb-hover);
+}
+
+.ds-no-scrollbar::-webkit-scrollbar { display: none; }
+.ds-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ==========================================================================
+   Base: Typography
+   Display font for headings, generous sizes, editorial hierarchy.
+   ========================================================================== */
+
+/* Display font utility — use on headings to get the display typeface */
+.ds-font-display {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  line-height: var(--ds-leading-tight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+}
+
+h1 { font-size: var(--ds-text-5xl); }
+h2 { font-size: var(--ds-text-4xl); }
+h3 { font-size: var(--ds-text-2xl); }
+h4 { font-size: var(--ds-text-xl); }
+h5 { font-size: var(--ds-text-lg); }
+h6 { font-size: var(--ds-text-base); font-weight: var(--ds-weight-medium); }
+
+p {
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text-secondary);
+}
+
+p + p {
+  margin-top: var(--ds-space-4);
+}
+
+small {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}
+
+strong, b {
+  font-weight: var(--ds-weight-semibold);
+}
+
+/* Overline / label style (like "PRODUCT DESIGNER & DEVELOPER") */
+.ds-overline {
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  letter-spacing: var(--ds-tracking-wide);
+  text-transform: uppercase;
+  color: var(--ds-color-text-secondary);
+}
+
+/* Section title style */
+.ds-section-title {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-3xl);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+}
+
+@media (min-width: 640px) {
+  .ds-section-title { font-size: var(--ds-text-4xl); }
+}
+
+/* Hero title — large editorial display */
+.ds-hero-title {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-4xl);
+  line-height: var(--ds-leading-tight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+}
+
+@media (min-width: 640px) {
+  .ds-hero-title { font-size: var(--ds-text-5xl); }
+}
+@media (min-width: 768px) {
+  .ds-hero-title { font-size: var(--ds-text-6xl); }
+}
+@media (min-width: 1024px) {
+  .ds-hero-title { font-size: var(--ds-text-7xl); }
+}
+
+code, kbd, samp {
+  font-family: var(--ds-font-mono);
+  font-size: 0.9em;
+  background-color: var(--ds-color-bg-elevated);
+  padding: 2px 6px;
+  border-radius: var(--ds-radius-sm);
+}
+
+pre {
+  font-family: var(--ds-font-mono);
+  font-size: var(--ds-text-sm);
+  line-height: var(--ds-leading-relaxed);
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  padding: var(--ds-space-4);
+  border-radius: var(--ds-radius-lg);
+  overflow-x: auto;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+blockquote {
+  padding-left: var(--ds-space-4);
+  border-left: 2px solid var(--ds-color-border-hover);
+  color: var(--ds-color-text-secondary);
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--ds-color-border);
+  margin: var(--ds-space-8) 0;
+}
+
+/* Prose: opt-in rich text styling */
+.ds-prose a {
+  color: var(--ds-color-info);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-prose a:hover {
+  opacity: 0.8;
+}
+
+.ds-prose ul, .ds-prose ol {
+  padding-left: var(--ds-space-6);
+  margin-top: var(--ds-space-2);
+  margin-bottom: var(--ds-space-2);
+}
+.ds-prose ul { list-style-type: disc; }
+.ds-prose ol { list-style-type: decimal; }
+
+.ds-prose li {
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text-secondary);
+}
+.ds-prose li + li {
+  margin-top: var(--ds-space-1);
+}
+
+/* Tabular figures for numbers */
+.ds-tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Stat numbers — display font, large */
+.ds-stat-number {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--ds-text-2xl);
+  color: var(--ds-color-text);
+}
+
+
+/* === Core === */
+/* ==========================================================================
+   Component: Button
+   Inverted primary, rounded-full CTAs, refined sizing.
+   ========================================================================== */
+
+.ds-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-2) var(--ds-space-4);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-none);
+  white-space: nowrap;
+  border-radius: var(--ds-radius-lg);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all var(--ds-duration-fast) ease;
+
+  /* Default: inverted (dark bg in light mode, light bg in dark mode) */
+  background-color: var(--ds-color-inverted);
+  color: var(--ds-color-on-inverted);
+}
+
+.ds-btn:hover {
+  opacity: 0.9;
+}
+
+.ds-btn:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
+.ds-btn:disabled,
+.ds-btn[aria-disabled="true"] {
+  opacity: var(--ds-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* --- Variants --- */
+
+.ds-btn--secondary {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+  border-color: var(--ds-color-border);
+}
+.ds-btn--secondary:hover {
+  border-color: var(--ds-color-border-hover);
+  background-color: var(--ds-color-surface);
+  opacity: 1;
+}
+
+.ds-btn--outline {
+  background-color: transparent;
+  color: var(--ds-color-text-secondary);
+  border-color: var(--ds-color-border);
+}
+.ds-btn--outline:hover {
+  color: var(--ds-color-text);
+  border-color: var(--ds-color-border-hover);
+  opacity: 1;
+}
+
+.ds-btn--ghost {
+  background-color: transparent;
+  color: var(--ds-color-text-secondary);
+}
+.ds-btn--ghost:hover {
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-bg-elevated);
+  opacity: 1;
+}
+
+.ds-btn--danger {
+  background-color: var(--ds-color-error-subtle);
+  color: var(--ds-color-error);
+  border-color: var(--ds-color-error-border);
+}
+.ds-btn--danger:hover {
+  background-color: var(--ds-color-error);
+  color: #fff;
+  opacity: 1;
+}
+
+.ds-btn--success {
+  background-color: var(--ds-color-success-subtle);
+  color: var(--ds-color-success);
+  border-color: var(--ds-color-success-border);
+}
+.ds-btn--success:hover {
+  background-color: var(--ds-color-success);
+  color: #fff;
+  opacity: 1;
+}
+
+/* --- Sizes --- */
+
+.ds-btn--sm {
+  padding: var(--ds-space-1-5) var(--ds-space-3);
+  font-size: var(--ds-text-sm);
+  gap: var(--ds-space-1-5);
+  border-radius: var(--ds-radius-md);
+}
+
+.ds-btn--lg {
+  padding: var(--ds-space-3) var(--ds-space-6);
+  font-size: var(--ds-text-base);
+  border-radius: var(--ds-radius-lg);
+}
+
+/* --- Pill (rounded-full, like hero CTAs) --- */
+.ds-btn--pill {
+  border-radius: var(--ds-radius-full);
+  padding: var(--ds-space-3) var(--ds-space-6);
+}
+
+.ds-btn--pill.ds-btn--sm {
+  padding: var(--ds-space-2) var(--ds-space-5);
+}
+
+/* --- Full Width --- */
+.ds-btn--full { width: 100%; }
+
+/* --- Icon Only --- */
+.ds-btn--icon {
+  padding: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--ds-radius-md);
+}
+
+.ds-btn--icon.ds-btn--sm {
+  width: 2rem;
+  height: 2rem;
+}
+
+/* --- Button Group --- */
+.ds-btn-group {
+  display: inline-flex;
+}
+.ds-btn-group .ds-btn { border-radius: 0; }
+.ds-btn-group .ds-btn:first-child { border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg); }
+.ds-btn-group .ds-btn:last-child { border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0; }
+.ds-btn-group .ds-btn + .ds-btn { margin-left: -1px; }
+
+/* --- Loading spinner --- */
+.ds-btn--loading {
+  position: relative;
+  color: transparent !important;
+  pointer-events: none;
+}
+.ds-btn--loading::after {
+  content: '';
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--ds-radius-full);
+  animation: ds-btn-spin 0.6s linear infinite;
+  color: var(--ds-color-on-inverted);
+}
+@keyframes ds-btn-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ==========================================================================
+   Component: Card
+   Surface + border, hover with shadow lift, rounded-xl.
+   ========================================================================== */
+
+.ds-card {
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  overflow: hidden;
+  transition: all var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+/* Interactive card — lifts on hover (like ProjectCard) */
+.ds-card--interactive {
+  cursor: pointer;
+}
+.ds-card--interactive:hover {
+  border-color: var(--ds-color-border-hover);
+  box-shadow: var(--ds-shadow-lg);
+  transform: translateY(-4px);
+}
+
+/* Elevated card — visible shadow */
+.ds-card--elevated {
+  background-color: var(--ds-color-bg-elevated);
+  box-shadow: var(--ds-shadow-lg);
+}
+
+/* Hover card — subtle bg change */
+.ds-card--hover:hover {
+  border-color: var(--ds-color-border-hover);
+}
+
+.ds-card__header {
+  padding: var(--ds-space-5);
+  border-bottom: 1px solid var(--ds-color-border);
+}
+
+.ds-card__header h3,
+.ds-card__header .ds-card__title {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-lg);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+}
+
+.ds-card__description {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+  margin-top: var(--ds-space-1);
+}
+
+.ds-card__body {
+  padding: var(--ds-space-5);
+}
+
+.ds-card__footer {
+  padding: var(--ds-space-4) var(--ds-space-5);
+  border-top: 1px solid var(--ds-color-border);
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+}
+
+.ds-card__media {
+  width: 100%;
+  aspect-ratio: 16/10;
+  object-fit: cover;
+  background-color: var(--ds-color-bg-elevated);
+}
+
+/* Compact */
+.ds-card--compact .ds-card__header,
+.ds-card--compact .ds-card__body,
+.ds-card--compact .ds-card__footer {
+  padding: var(--ds-space-3) var(--ds-space-4);
+}
+
+/* Flush — no internal dividers */
+.ds-card--flush .ds-card__header { border-bottom: none; }
+.ds-card--flush .ds-card__footer { border-top: none; }
+
+/* Stat card (like StatCard component) */
+.ds-stat-card {
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  padding: var(--ds-space-5);
+}
+
+.ds-stat-card__label {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+}
+
+.ds-stat-card__value {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-2xl);
+  color: var(--ds-color-text);
+  margin-top: var(--ds-space-1);
+}
+
+.ds-stat-card__detail {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-top: var(--ds-space-0-5);
+}
+
+.ds-stat-card__icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--ds-radius-xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text-secondary);
+}
+
+/* ==========================================================================
+   Component: Form Inputs
+   Surface bg, clean borders, focus ring.
+   ========================================================================== */
+
+.ds-label {
+  display: block;
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-secondary);
+  margin-bottom: var(--ds-space-1-5);
+}
+
+.ds-input,
+.ds-textarea,
+.ds-select {
+  width: 100%;
+  padding: var(--ds-space-2-5) var(--ds-space-4);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  transition: all var(--ds-duration-fast) ease;
+}
+
+.ds-input:hover,
+.ds-textarea:hover,
+.ds-select:hover {
+  border-color: var(--ds-color-border-hover);
+}
+
+.ds-input:focus,
+.ds-textarea:focus,
+.ds-select:focus {
+  border-color: var(--ds-color-border-active);
+  box-shadow: 0 0 0 1px var(--ds-color-border-active);
+  outline: none;
+}
+
+.ds-input::placeholder,
+.ds-textarea::placeholder {
+  color: var(--ds-color-text-tertiary);
+}
+
+/* States */
+.ds-input--error,
+.ds-textarea--error {
+  border-color: var(--ds-color-error);
+}
+.ds-input--error:focus,
+.ds-textarea--error:focus {
+  box-shadow: 0 0 0 1px var(--ds-color-error);
+}
+
+.ds-input--success {
+  border-color: var(--ds-color-success);
+}
+
+/* Sizes */
+.ds-input--sm {
+  padding: var(--ds-space-1) var(--ds-space-2);
+  font-size: var(--ds-text-xs);
+  border-radius: var(--ds-radius-md);
+}
+
+.ds-input--lg {
+  padding: var(--ds-space-3) var(--ds-space-4);
+  font-size: var(--ds-text-base);
+}
+
+/* Textarea */
+.ds-textarea {
+  min-height: 6rem;
+  padding: var(--ds-space-2-5) var(--ds-space-4);
+  resize: vertical;
+}
+
+/* Select */
+.ds-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--ds-space-3) center;
+  padding-right: var(--ds-space-8);
+}
+
+/* Help text */
+.ds-help {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-top: var(--ds-space-1-5);
+}
+.ds-help--error { color: var(--ds-color-error); }
+
+/* Form Group */
+.ds-form-group { margin-bottom: var(--ds-space-4); }
+
+/* Checkbox / Radio */
+.ds-checkbox,
+.ds-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  cursor: pointer;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+}
+.ds-checkbox input,
+.ds-radio input {
+  accent-color: var(--ds-color-interactive);
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* ==========================================================================
+   Component: Badge
+   Pill shape, border + subtle bg, clean and refined.
+   ========================================================================== */
+
+.ds-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-0-5) var(--ds-space-2-5);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-snug);
+  border-radius: var(--ds-radius-full);
+  white-space: nowrap;
+  border: 1px solid var(--ds-color-border);
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text-secondary);
+}
+
+/* Semantic variants — subtle bg + bright text + subtle border */
+.ds-badge--primary {
+  background-color: var(--ds-color-info-subtle);
+  color: var(--ds-color-info);
+  border-color: var(--ds-color-info-border);
+}
+
+.ds-badge--success {
+  background-color: var(--ds-color-success-subtle);
+  color: var(--ds-color-success);
+  border-color: var(--ds-color-success-border);
+}
+
+.ds-badge--warning {
+  background-color: var(--ds-color-warning-subtle);
+  color: var(--ds-color-warning);
+  border-color: var(--ds-color-warning-border);
+}
+
+.ds-badge--error {
+  background-color: var(--ds-color-error-subtle);
+  color: var(--ds-color-error);
+  border-color: var(--ds-color-error-border);
+}
+
+.ds-badge--info {
+  background-color: var(--ds-color-accent-blue-subtle);
+  color: var(--ds-color-accent-blue);
+  border-color: rgba(37, 99, 235, 0.2);
+}
+
+.ds-badge--purple {
+  background-color: var(--ds-color-accent-purple-subtle);
+  color: var(--ds-color-accent-purple);
+  border-color: rgba(124, 58, 237, 0.2);
+}
+
+/* Outline (no bg) */
+.ds-badge--outline {
+  background-color: transparent;
+  border-color: var(--ds-color-border);
+  color: var(--ds-color-text-secondary);
+}
+
+/* Dot indicator */
+.ds-badge--dot::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: var(--ds-radius-full);
+  background-color: currentColor;
+}
+
+/* Uppercase badge (like "NEW", "BETA") */
+.ds-badge--upper {
+  text-transform: uppercase;
+  font-size: 10px;
+  font-weight: var(--ds-weight-semibold);
+  letter-spacing: var(--ds-tracking-wide);
+}
+
+/* ==========================================================================
+   Component: Navigation
+   Fixed glass header, backdrop-blur, h-16. Clean links.
+   ========================================================================== */
+
+.ds-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--ds-z-sticky);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--ds-container-padding);
+  height: 4rem;
+  background-color: var(--ds-color-nav-bg);
+  border-bottom: 1px solid var(--ds-color-nav-border);
+  backdrop-filter: blur(20px) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
+}
+
+.ds-nav--static {
+  position: relative;
+}
+
+.ds-nav__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: var(--ds-container-max);
+  margin-inline: auto;
+}
+
+.ds-nav__brand {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-lg);
+  color: var(--ds-color-text);
+  letter-spacing: var(--ds-tracking-tight);
+}
+
+.ds-nav__menu {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-8);
+}
+
+.ds-nav__link {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  transition: color var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-nav__link:hover {
+  color: var(--ds-color-text);
+}
+
+.ds-nav__link--active {
+  color: var(--ds-color-text);
+}
+
+/* Nav actions (theme toggle, etc) */
+.ds-nav__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+}
+
+/* Icon button in nav */
+.ds-nav__icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--ds-radius-md);
+  color: var(--ds-color-text-secondary);
+  transition: all var(--ds-duration-normal) var(--ds-ease-default);
+}
+.ds-nav__icon-btn:hover {
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-overlay-hover);
+}
+
+/* --- Mobile nav overlay --- */
+.ds-nav__mobile {
+  overflow: hidden;
+  max-height: 0;
+  border-bottom: 0 solid var(--ds-color-nav-border);
+  background-color: var(--ds-color-nav-bg);
+  backdrop-filter: blur(20px);
+  transition: all var(--ds-duration-slow) var(--ds-ease-out-expo);
+}
+
+.ds-nav__mobile--open {
+  max-height: 16rem;
+  border-bottom-width: 1px;
+}
+
+.ds-nav__mobile-links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-4);
+  padding: var(--ds-space-4) var(--ds-container-padding);
+}
+
+/* --- Sidebar --- */
+
+.ds-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 16rem;
+  padding: var(--ds-space-5);
+  background-color: var(--ds-color-surface);
+  border-right: 1px solid var(--ds-color-border);
+  height: 100%;
+}
+
+.ds-sidebar__section {
+  margin-bottom: var(--ds-space-6);
+}
+
+.ds-sidebar__title {
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--ds-tracking-wide);
+  color: var(--ds-color-text-tertiary);
+  margin-bottom: var(--ds-space-3);
+}
+
+.ds-sidebar__link {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-2) var(--ds-space-3);
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  border-radius: var(--ds-radius-md);
+  transition: all var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-sidebar__link:hover {
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-overlay-hover);
+}
+
+.ds-sidebar__link--active {
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-bg-elevated);
+}
+
+/* ==========================================================================
+   Component: Modal
+   Backdrop blur, shadow-2xl, rounded-xl. Smooth scale transition.
+   ========================================================================== */
+
+.ds-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ds-space-4);
+  background-color: var(--ds-color-overlay);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--ds-duration-slow) var(--ds-ease-default),
+    visibility var(--ds-duration-slow) var(--ds-ease-default);
+}
+
+.ds-modal[open],
+.ds-modal--open {
+  opacity: 1;
+  visibility: visible;
+}
+
+.ds-modal__content {
+  width: 100%;
+  max-width: 28rem;
+  max-height: 90dvh;
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transform: scale(0.96);
+  transition: transform var(--ds-duration-slow) var(--ds-ease-out-expo);
+}
+
+.ds-modal[open] .ds-modal__content,
+.ds-modal--open .ds-modal__content {
+  transform: scale(1);
+}
+
+.ds-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--ds-space-4) var(--ds-space-5);
+  border-bottom: 1px solid var(--ds-color-border);
+}
+
+.ds-modal__header h3 {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-lg);
+  color: var(--ds-color-text);
+}
+
+.ds-modal__header p {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+  margin-top: var(--ds-space-1);
+}
+
+.ds-modal__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  color: var(--ds-color-text-tertiary);
+  border-radius: var(--ds-radius-md);
+  transition: all var(--ds-duration-fast) var(--ds-ease-default);
+  flex-shrink: 0;
+}
+.ds-modal__close:hover {
+  color: var(--ds-color-text);
+}
+
+.ds-modal__body {
+  padding: var(--ds-space-5);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.ds-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-4) var(--ds-space-5);
+  border-top: 1px solid var(--ds-color-border);
+}
+
+/* Size variants */
+.ds-modal--md .ds-modal__content { max-width: var(--ds-container-md); }
+.ds-modal--lg .ds-modal__content { max-width: var(--ds-container-lg); }
+
+/* ==========================================================================
+   Component: Toast
+   ========================================================================== */
+
+.ds-toast-container {
+  position: fixed;
+  z-index: var(--ds-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-4);
+  pointer-events: none;
+}
+
+.ds-toast-container--top-right    { top: 0; right: 0; }
+.ds-toast-container--bottom-right { bottom: 0; right: 0; }
+.ds-toast-container--bottom-center {
+  bottom: 0; left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.ds-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-3) var(--ds-space-4);
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  box-shadow: var(--ds-shadow-lg);
+  pointer-events: auto;
+  min-width: 18rem;
+  max-width: 28rem;
+  animation: ds-toast-in var(--ds-duration-slow) var(--ds-ease-out-expo) forwards;
+}
+
+.ds-toast--info    { border-left: 3px solid var(--ds-color-info); }
+.ds-toast--success { border-left: 3px solid var(--ds-color-success); }
+.ds-toast--warning { border-left: 3px solid var(--ds-color-warning); }
+.ds-toast--error   { border-left: 3px solid var(--ds-color-error); }
+
+.ds-toast__message {
+  flex: 1;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text);
+}
+
+.ds-toast__close {
+  color: var(--ds-color-text-tertiary);
+  padding: var(--ds-space-1);
+  border-radius: var(--ds-radius-sm);
+  transition: color var(--ds-duration-fast) ease;
+}
+.ds-toast__close:hover {
+  color: var(--ds-color-text);
+}
+
+@keyframes ds-toast-in {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.ds-toast--exit {
+  animation: ds-toast-out var(--ds-duration-normal) var(--ds-ease-default) forwards;
+}
+
+@keyframes ds-toast-out {
+  to { opacity: 0; transform: translateX(100%); }
+}
+
+/* ==========================================================================
+   Component: Table
+   ========================================================================== */
+
+.ds-table {
+  width: 100%;
+  text-align: left;
+  font-size: var(--ds-text-sm);
+}
+
+.ds-table th {
+  padding: var(--ds-space-3) var(--ds-space-4);
+  font-weight: var(--ds-weight-medium);
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: var(--ds-tracking-wide);
+  border-bottom: 1px solid var(--ds-color-border);
+}
+
+.ds-table td {
+  padding: var(--ds-space-3) var(--ds-space-4);
+  color: var(--ds-color-text);
+  border-bottom: 1px solid var(--ds-color-border-subtle);
+}
+
+.ds-table tbody tr {
+  transition: background-color var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-table tbody tr:hover {
+  background-color: var(--ds-color-overlay-subtle);
+}
+
+.ds-table--compact th,
+.ds-table--compact td {
+  padding: var(--ds-space-2) var(--ds-space-3);
+  font-size: var(--ds-text-xs);
+}
+
+.ds-table-wrapper {
+  overflow-x: auto;
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  background-color: var(--ds-color-surface);
+}
+
+.ds-table-wrapper .ds-table { margin: 0; }
+
+
+/* === Tier 1 — Essential === */
+/* ==========================================================================
+   Component: Tabs
+   Horizontal/vertical tab navigation with pill, small, and full-width variants.
+   ========================================================================== */
+
+.ds-tabs {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  border-bottom: 1px solid var(--ds-color-border);
+  gap: var(--ds-space-0);
+}
+
+/* --- Pill variant --- */
+
+.ds-tabs--pills {
+  border-bottom: none;
+  gap: var(--ds-space-1);
+  background-color: var(--ds-color-bg-elevated);
+  border-radius: var(--ds-radius-lg);
+  padding: var(--ds-space-1);
+}
+
+.ds-tabs--pills .ds-tab {
+  border-bottom: none;
+  border-radius: var(--ds-radius-md);
+  padding: var(--ds-space-1-5) var(--ds-space-3);
+}
+
+.ds-tabs--pills .ds-tab:hover {
+  background-color: var(--ds-color-overlay-hover);
+}
+
+.ds-tabs--pills .ds-tab--active {
+  background-color: var(--ds-color-surface);
+  color: var(--ds-color-text);
+  box-shadow: var(--ds-shadow-sm);
+  border-bottom: none;
+}
+
+/* --- Vertical variant --- */
+
+.ds-tabs--vertical {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 1px solid var(--ds-color-border);
+  gap: var(--ds-space-0-5);
+}
+
+.ds-tabs--vertical .ds-tab {
+  border-bottom: none;
+  border-right: 2px solid transparent;
+  padding: var(--ds-space-2) var(--ds-space-4);
+  text-align: left;
+}
+
+.ds-tabs--vertical .ds-tab--active {
+  border-bottom: none;
+  border-right-color: var(--ds-color-interactive);
+  color: var(--ds-color-text);
+}
+
+/* --- Small variant --- */
+
+.ds-tabs--sm .ds-tab {
+  padding: var(--ds-space-1-5) var(--ds-space-3);
+  font-size: var(--ds-text-xs);
+}
+
+/* --- Full width variant --- */
+
+.ds-tabs--full {
+  width: 100%;
+}
+
+.ds-tabs--full .ds-tab {
+  flex: 1;
+  justify-content: center;
+}
+
+/* --- Individual Tab --- */
+
+.ds-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-2) var(--ds-space-4);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-snug);
+  color: var(--ds-color-text-secondary);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  white-space: nowrap;
+  transition: all var(--ds-duration-fast) ease;
+  margin-bottom: -1px;
+}
+
+.ds-tab:hover {
+  color: var(--ds-color-text);
+}
+
+.ds-tab:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+  border-radius: var(--ds-radius-sm);
+}
+
+.ds-tab--active {
+  color: var(--ds-color-text);
+  border-bottom-color: var(--ds-color-interactive);
+}
+
+.ds-tab:disabled,
+.ds-tab[aria-disabled="true"] {
+  opacity: var(--ds-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* --- Tab Icon --- */
+
+.ds-tab__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: currentColor;
+}
+
+/* --- Tab Count Badge --- */
+
+.ds-tab__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ds-space-0) var(--ds-space-1-5);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-snug);
+  color: var(--ds-color-text-tertiary);
+  background-color: var(--ds-color-bg-elevated);
+  border-radius: var(--ds-radius-full);
+  min-width: 1.25rem;
+}
+
+.ds-tab--active .ds-tab__count {
+  color: var(--ds-color-text-secondary);
+  background-color: var(--ds-color-overlay-active);
+}
+
+/* --- Tab Panel --- */
+
+.ds-tab-panel {
+  padding-top: var(--ds-space-5);
+}
+
+/* ==========================================================================
+   Component: Alert
+   Contextual feedback banners with semantic variants and dismissibility.
+   ========================================================================== */
+
+.ds-alert {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-4);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  background-color: var(--ds-color-surface);
+  border-left: 3px solid var(--ds-color-border);
+}
+
+/* --- Semantic Variants --- */
+
+.ds-alert--info {
+  background-color: var(--ds-color-info-subtle);
+  border-color: var(--ds-color-info-border);
+  border-left-color: var(--ds-color-info);
+}
+
+.ds-alert--success {
+  background-color: var(--ds-color-success-subtle);
+  border-color: var(--ds-color-success-border);
+  border-left-color: var(--ds-color-success);
+}
+
+.ds-alert--warning {
+  background-color: var(--ds-color-warning-subtle);
+  border-color: var(--ds-color-warning-border);
+  border-left-color: var(--ds-color-warning);
+}
+
+.ds-alert--error {
+  background-color: var(--ds-color-error-subtle);
+  border-color: var(--ds-color-error-border);
+  border-left-color: var(--ds-color-error);
+}
+
+/* --- Icon --- */
+
+.ds-alert__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-alert--info .ds-alert__icon    { color: var(--ds-color-info); }
+.ds-alert--success .ds-alert__icon { color: var(--ds-color-success); }
+.ds-alert--warning .ds-alert__icon { color: var(--ds-color-warning); }
+.ds-alert--error .ds-alert__icon   { color: var(--ds-color-error); }
+
+/* --- Content --- */
+
+.ds-alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.ds-alert__title {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-snug);
+  color: var(--ds-color-text);
+}
+
+.ds-alert__description {
+  font-size: var(--ds-text-sm);
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text-secondary);
+  margin-top: var(--ds-space-1);
+}
+
+.ds-alert__title + .ds-alert__description {
+  margin-top: var(--ds-space-1);
+}
+
+/* --- Close Button --- */
+
+.ds-alert__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--ds-color-text-tertiary);
+  border-radius: var(--ds-radius-sm);
+  cursor: pointer;
+  transition: color var(--ds-duration-fast) ease;
+}
+
+.ds-alert__close:hover {
+  color: var(--ds-color-text);
+}
+
+.ds-alert__close:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
+/* --- Compact Variant --- */
+
+.ds-alert--compact {
+  padding: var(--ds-space-2) var(--ds-space-3);
+  border-radius: var(--ds-radius-none);
+}
+
+/* --- Banner Variant --- */
+
+.ds-alert--banner {
+  border-radius: var(--ds-radius-none);
+  border-left: none;
+  border-right: none;
+  border-top: 1px solid var(--ds-color-border);
+  border-bottom: 1px solid var(--ds-color-border);
+  width: 100%;
+}
+
+.ds-alert--banner.ds-alert--info {
+  border-top-color: var(--ds-color-info-border);
+  border-bottom-color: var(--ds-color-info-border);
+}
+
+.ds-alert--banner.ds-alert--success {
+  border-top-color: var(--ds-color-success-border);
+  border-bottom-color: var(--ds-color-success-border);
+}
+
+.ds-alert--banner.ds-alert--warning {
+  border-top-color: var(--ds-color-warning-border);
+  border-bottom-color: var(--ds-color-warning-border);
+}
+
+.ds-alert--banner.ds-alert--error {
+  border-top-color: var(--ds-color-error-border);
+  border-bottom-color: var(--ds-color-error-border);
+}
+
+/* ==========================================================================
+   Component: Divider
+   Horizontal and vertical separators with optional centered label.
+   ========================================================================== */
+
+.ds-divider {
+  border: none;
+  border-top: 1px solid var(--ds-color-border);
+  margin-block: var(--ds-space-4);
+  width: 100%;
+}
+
+/* --- Vertical --- */
+
+.ds-divider--vertical {
+  border-top: none;
+  border-left: 1px solid var(--ds-color-border);
+  display: inline-block;
+  width: auto;
+  height: auto;
+  min-height: 1rem;
+  align-self: stretch;
+  margin-block: var(--ds-space-0);
+  margin-inline: var(--ds-space-3);
+}
+
+/* --- Subtle --- */
+
+.ds-divider--subtle {
+  border-color: var(--ds-color-border-subtle);
+}
+
+/* --- Spacious --- */
+
+.ds-divider--spacious {
+  margin-block: var(--ds-space-8);
+}
+
+.ds-divider--spacious.ds-divider--vertical {
+  margin-block: var(--ds-space-0);
+  margin-inline: var(--ds-space-6);
+}
+
+/* --- Label (centered text with lines on either side) --- */
+
+.ds-divider--label {
+  border-top: none;
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: var(--ds-tracking-wide);
+  white-space: nowrap;
+}
+
+.ds-divider--label::before,
+.ds-divider--label::after {
+  content: '';
+  flex: 1;
+  height: 0;
+  border-top: 1px solid var(--ds-color-border);
+}
+
+/* ==========================================================================
+   Component: Dropdown
+   Floating menu with surface bg, scale transition, keyboard-friendly items.
+   ========================================================================== */
+
+.ds-dropdown {
+  position: relative;
+}
+
+.ds-dropdown__trigger {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+/* --- Menu panel --- */
+
+.ds-dropdown__menu {
+  position: absolute;
+  top: calc(100% + var(--ds-space-1));
+  left: 0;
+  z-index: var(--ds-z-dropdown);
+  min-width: 12rem;
+  padding-block: var(--ds-space-1);
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  box-shadow: var(--ds-shadow-lg);
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.96);
+  transform-origin: top left;
+  transition:
+    opacity var(--ds-duration-normal) var(--ds-ease-default),
+    visibility var(--ds-duration-normal) var(--ds-ease-default),
+    transform var(--ds-duration-normal) var(--ds-ease-out-expo);
+}
+
+/* Open state — modifier on menu or parent */
+
+.ds-dropdown__menu--open,
+.ds-dropdown--open .ds-dropdown__menu {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+
+/* --- Alignment variants --- */
+
+.ds-dropdown__menu--right {
+  left: auto;
+  right: 0;
+  transform-origin: top right;
+}
+
+.ds-dropdown__menu--up {
+  top: auto;
+  bottom: calc(100% + var(--ds-space-1));
+  transform-origin: bottom left;
+}
+
+.ds-dropdown__menu--up.ds-dropdown__menu--right {
+  transform-origin: bottom right;
+}
+
+/* --- Menu item --- */
+
+.ds-dropdown__item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-1-5) var(--ds-space-3);
+  margin-inline: var(--ds-space-1);
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  cursor: pointer;
+  border-radius: var(--ds-radius-md);
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-dropdown__item:hover {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+.ds-dropdown__item--active {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+.ds-dropdown__item--danger:hover {
+  color: var(--ds-color-error);
+}
+
+.ds-dropdown__item--disabled {
+  opacity: var(--ds-opacity-disabled);
+  pointer-events: none;
+}
+
+/* --- Item slots --- */
+
+.ds-dropdown__item-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.ds-dropdown__item-label {
+  flex: 1;
+}
+
+.ds-dropdown__item-shortcut {
+  margin-left: auto;
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}
+
+/* --- Divider --- */
+
+.ds-dropdown__divider {
+  margin-block: var(--ds-space-1);
+  border: 0;
+  border-top: 1px solid var(--ds-color-border);
+}
+
+/* --- Section header --- */
+
+.ds-dropdown__header {
+  padding: var(--ds-space-2) var(--ds-space-3);
+  margin-inline: var(--ds-space-1);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--ds-tracking-wide);
+  color: var(--ds-color-text-tertiary);
+}
+
+/* ==========================================================================
+   Component: Tooltip
+   Inverted bubble with arrow, positioned via modifier classes.
+   Default placement: top.
+   ========================================================================== */
+
+.ds-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+/* --- Tooltip bubble --- */
+
+.ds-tooltip__content {
+  position: absolute;
+  z-index: var(--ds-z-tooltip);
+  background-color: var(--ds-color-inverted);
+  color: var(--ds-color-on-inverted);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-snug);
+  padding: var(--ds-space-1) var(--ds-space-2);
+  border-radius: var(--ds-radius-md);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--ds-duration-fast) var(--ds-ease-default),
+    visibility var(--ds-duration-fast) var(--ds-ease-default),
+    transform var(--ds-duration-fast) var(--ds-ease-out);
+}
+
+/* --- Arrow (shared base) --- */
+
+.ds-tooltip__content::after {
+  content: '';
+  position: absolute;
+  border: 4px solid transparent;
+}
+
+/* --- Show on hover --- */
+
+.ds-tooltip:hover .ds-tooltip__content {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* --- Delay modifier --- */
+
+.ds-tooltip--delay .ds-tooltip__content {
+  transition-delay: 0ms;
+}
+
+.ds-tooltip--delay:hover .ds-tooltip__content {
+  transition-delay: 200ms;
+}
+
+/* =============================================
+   Placement: Top (default)
+   ============================================= */
+
+.ds-tooltip .ds-tooltip__content,
+.ds-tooltip--top .ds-tooltip__content {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+}
+
+.ds-tooltip:hover .ds-tooltip__content,
+.ds-tooltip--top:hover .ds-tooltip__content {
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Arrow — points down */
+.ds-tooltip .ds-tooltip__content::after,
+.ds-tooltip--top .ds-tooltip__content::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--ds-color-inverted);
+}
+
+/* =============================================
+   Placement: Bottom
+   ============================================= */
+
+.ds-tooltip--bottom .ds-tooltip__content {
+  top: calc(100% + 8px);
+  bottom: auto;
+  left: 50%;
+  transform: translateX(-50%) translateY(-4px);
+}
+
+.ds-tooltip--bottom:hover .ds-tooltip__content {
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Arrow — points up */
+.ds-tooltip--bottom .ds-tooltip__content::after {
+  bottom: 100%;
+  top: auto;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: transparent;
+  border-bottom-color: var(--ds-color-inverted);
+}
+
+/* =============================================
+   Placement: Left
+   ============================================= */
+
+.ds-tooltip--left .ds-tooltip__content {
+  right: calc(100% + 8px);
+  left: auto;
+  bottom: auto;
+  top: 50%;
+  transform: translateY(-50%) translateX(4px);
+}
+
+.ds-tooltip--left:hover .ds-tooltip__content {
+  transform: translateY(-50%) translateX(0);
+}
+
+/* Arrow — points right */
+.ds-tooltip--left .ds-tooltip__content::after {
+  left: 100%;
+  top: 50%;
+  bottom: auto;
+  right: auto;
+  transform: translateY(-50%);
+  border-top-color: transparent;
+  border-left-color: var(--ds-color-inverted);
+}
+
+/* =============================================
+   Placement: Right
+   ============================================= */
+
+.ds-tooltip--right .ds-tooltip__content {
+  left: calc(100% + 8px);
+  right: auto;
+  bottom: auto;
+  top: 50%;
+  transform: translateY(-50%) translateX(-4px);
+}
+
+.ds-tooltip--right:hover .ds-tooltip__content {
+  transform: translateY(-50%) translateX(0);
+}
+
+/* Arrow — points left */
+.ds-tooltip--right .ds-tooltip__content::after {
+  right: 100%;
+  left: auto;
+  top: 50%;
+  bottom: auto;
+  transform: translateY(-50%);
+  border-top-color: transparent;
+  border-right-color: var(--ds-color-inverted);
+}
+
+/* ==========================================================================
+   Component: Avatar
+   User photos, token images, initials. Stackable in groups.
+   ========================================================================== */
+
+.ds-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text-secondary);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-none);
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.ds-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* --- Sizes --- */
+
+.ds-avatar--xs {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: var(--ds-text-xs);
+}
+
+.ds-avatar--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: var(--ds-text-xs);
+}
+
+.ds-avatar--md {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: var(--ds-text-sm);
+}
+
+.ds-avatar--lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: var(--ds-text-base);
+}
+
+.ds-avatar--xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: var(--ds-text-lg);
+}
+
+/* --- Shape variants --- */
+
+.ds-avatar--square {
+  border-radius: var(--ds-radius-lg);
+}
+
+.ds-avatar--bordered {
+  border: 2px solid var(--ds-color-surface);
+}
+
+/* --- Avatar Group --- */
+
+.ds-avatar-group {
+  display: flex;
+  align-items: center;
+}
+
+.ds-avatar-group > .ds-avatar + .ds-avatar {
+  margin-left: -0.5rem;
+}
+
+.ds-avatar-group--sm > .ds-avatar + .ds-avatar {
+  margin-left: -0.375rem;
+}
+
+/* --- Status indicator --- */
+
+.ds-avatar__status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: var(--ds-radius-full);
+  border: 2px solid var(--ds-color-surface);
+}
+
+.ds-avatar__status--online {
+  background-color: var(--ds-color-success);
+}
+
+.ds-avatar__status--offline {
+  background-color: var(--ds-color-text-tertiary);
+}
+
+.ds-avatar__status--busy {
+  background-color: var(--ds-color-error);
+}
+
+/* ==========================================================================
+   Component: Skeleton
+   Loading placeholders with a subtle pulse animation.
+   ========================================================================== */
+
+.ds-skeleton {
+  display: block;
+  background-color: var(--ds-color-bg-muted);
+  border-radius: var(--ds-radius-md);
+  animation: ds-skeleton-pulse var(--ds-duration-slower) var(--ds-ease-default) infinite;
+}
+
+/* --- Text variants --- */
+
+.ds-skeleton--text {
+  height: 1rem;
+  width: 100%;
+  border-radius: var(--ds-radius-sm);
+  margin-bottom: var(--ds-space-2);
+}
+
+.ds-skeleton--text-sm {
+  height: 0.75rem;
+  width: 100%;
+  border-radius: var(--ds-radius-sm);
+  margin-bottom: var(--ds-space-2);
+}
+
+.ds-skeleton--text-lg {
+  height: 1.5rem;
+  width: 100%;
+  border-radius: var(--ds-radius-sm);
+  margin-bottom: var(--ds-space-2);
+}
+
+.ds-skeleton--heading {
+  height: 2rem;
+  width: 60%;
+  border-radius: var(--ds-radius-md);
+  margin-bottom: var(--ds-space-3);
+}
+
+/* --- Shape variants --- */
+
+.ds-skeleton--circle,
+.ds-skeleton--avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--ds-radius-full);
+}
+
+.ds-skeleton--card {
+  height: 12rem;
+  width: 100%;
+  border-radius: var(--ds-radius-xl);
+}
+
+/* --- UI element variants --- */
+
+.ds-skeleton--btn {
+  height: 2.25rem;
+  width: 6rem;
+  border-radius: var(--ds-radius-lg);
+}
+
+.ds-skeleton--input {
+  height: 2.5rem;
+  width: 100%;
+  border-radius: var(--ds-radius-lg);
+}
+
+/* --- Width modifiers --- */
+
+.ds-skeleton--w-1\/2 {
+  width: 50%;
+}
+
+.ds-skeleton--w-3\/4 {
+  width: 75%;
+}
+
+.ds-skeleton--w-1\/3 {
+  width: 33%;
+}
+
+/* --- Pulse animation --- */
+
+@keyframes ds-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* ==========================================================================
+   Component: Empty State
+   Centered message for when there's no data to display.
+   ========================================================================== */
+
+.ds-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--ds-space-12);
+  gap: var(--ds-space-4);
+}
+
+.ds-empty-state__icon {
+  width: 3rem;
+  height: 3rem;
+  color: var(--ds-color-text-tertiary);
+  margin-bottom: var(--ds-space-2);
+}
+
+.ds-empty-state__title {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-lg);
+  color: var(--ds-color-text);
+  letter-spacing: var(--ds-tracking-tight);
+  line-height: var(--ds-leading-tight);
+}
+
+.ds-empty-state__description {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  max-width: 20rem;
+  line-height: var(--ds-leading-relaxed);
+}
+
+.ds-empty-state__actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-3);
+  margin-top: var(--ds-space-2);
+}
+
+/* --- Compact variant --- */
+
+.ds-empty-state--compact {
+  padding: var(--ds-space-8);
+}
+
+.ds-empty-state--compact .ds-empty-state__icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+.ds-empty-state--compact .ds-empty-state__title {
+  font-size: var(--ds-text-base);
+}
+
+/* --- Card variant --- */
+
+.ds-empty-state--card {
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+}
+
+
+/* === Tier 2 — Common === */
+/* ==========================================================================
+   Toggle / Switch Component
+   ==========================================================================
+   A toggle (switch) control for binary on/off states.
+   Supports aria-checked attribute and modifier-class driven states.
+
+   Usage:
+     <button class="ds-toggle" role="switch" aria-checked="false"></button>
+
+     <label class="ds-toggle-label">
+       <button class="ds-toggle" role="switch" aria-checked="true"></button>
+       <span class="ds-toggle-label__text">Dark mode</span>
+     </label>
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Track
+   --------------------------------------------------------------------------- */
+
+.ds-toggle {
+  display: inline-flex;
+  position: relative;
+  width: 2.75rem;
+  height: 1.5rem;
+  padding: 2px;
+  border: none;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-bg-muted);
+  cursor: pointer;
+  transition: background-color var(--ds-duration-normal) var(--ds-ease-out);
+  -webkit-appearance: none;
+  appearance: none;
+  flex-shrink: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Thumb (pseudo-element)
+   --------------------------------------------------------------------------- */
+
+.ds-toggle::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 50%;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--ds-radius-full);
+  background-color: #fff;
+  box-shadow: var(--ds-shadow-sm);
+  transform: translateY(-50%);
+  transition: transform var(--ds-duration-normal) var(--ds-ease-out);
+}
+
+/* ---------------------------------------------------------------------------
+   Checked state
+   --------------------------------------------------------------------------- */
+
+.ds-toggle[aria-checked="true"],
+.ds-toggle--checked {
+  background-color: var(--ds-color-interactive);
+}
+
+.ds-toggle[aria-checked="true"]::after,
+.ds-toggle--checked::after {
+  transform: translateX(1.25rem) translateY(-50%);
+}
+
+/* ---------------------------------------------------------------------------
+   Hover
+   --------------------------------------------------------------------------- */
+
+.ds-toggle:hover {
+  background-color: var(--ds-color-border-hover);
+}
+
+.ds-toggle[aria-checked="true"]:hover,
+.ds-toggle--checked:hover {
+  background-color: var(--ds-color-interactive-hover);
+}
+
+/* ---------------------------------------------------------------------------
+   Focus
+   --------------------------------------------------------------------------- */
+
+.ds-toggle:focus-visible {
+  outline: 2px solid var(--ds-color-interactive);
+  outline-offset: 2px;
+}
+
+/* ---------------------------------------------------------------------------
+   Disabled
+   --------------------------------------------------------------------------- */
+
+.ds-toggle:disabled,
+.ds-toggle--disabled {
+  opacity: var(--ds-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Size: Small
+   --------------------------------------------------------------------------- */
+
+.ds-toggle--sm {
+  width: 2rem;
+  height: 1.125rem;
+}
+
+.ds-toggle--sm::after {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.ds-toggle--sm[aria-checked="true"]::after,
+.ds-toggle--sm.ds-toggle--checked::after {
+  transform: translateX(0.875rem) translateY(-50%);
+}
+
+/* ---------------------------------------------------------------------------
+   Label wrapper
+   --------------------------------------------------------------------------- */
+
+.ds-toggle-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  cursor: pointer;
+  font-size: var(--ds-text-sm);
+  font-family: var(--ds-font-sans);
+}
+
+.ds-toggle-label__text {
+  color: var(--ds-color-text-secondary);
+}
+
+/* ==========================================================================
+   Breadcrumb Navigation
+   ==========================================================================
+   A horizontal breadcrumb trail for hierarchical navigation.
+
+   Usage:
+     <nav class="ds-breadcrumb" aria-label="Breadcrumb">
+       <span class="ds-breadcrumb__item">
+         <a href="/" class="ds-breadcrumb__link">Home</a>
+       </span>
+       <span class="ds-breadcrumb__item">
+         <a href="/products" class="ds-breadcrumb__link">Products</a>
+       </span>
+       <span class="ds-breadcrumb__item">
+         <span class="ds-breadcrumb__current" aria-current="page">Widget</span>
+       </span>
+     </nav>
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-breadcrumb {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ds-space-1);
+  font-size: var(--ds-text-sm);
+  font-family: var(--ds-font-sans);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Item
+   --------------------------------------------------------------------------- */
+
+.ds-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+}
+
+/* Separator — rendered via ::after on every item except the last */
+.ds-breadcrumb__item:not(:last-child)::after {
+  content: "/";
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
+  user-select: none;
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Link
+   --------------------------------------------------------------------------- */
+
+.ds-breadcrumb__link {
+  color: var(--ds-color-text-tertiary);
+  text-decoration: none;
+  transition: color var(--ds-duration-fast) var(--ds-ease-out);
+}
+
+.ds-breadcrumb__link:hover {
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--ds-color-interactive);
+  outline-offset: 2px;
+  border-radius: var(--ds-radius-sm);
+}
+
+/* ---------------------------------------------------------------------------
+   Current page (non-interactive)
+   --------------------------------------------------------------------------- */
+
+.ds-breadcrumb__current {
+  color: var(--ds-color-text);
+  font-weight: var(--ds-weight-medium);
+}
+
+/* ---------------------------------------------------------------------------
+   Modifier: Compact
+   --------------------------------------------------------------------------- */
+
+.ds-breadcrumb--compact {
+  gap: var(--ds-space-0-5, 0.125rem);
+  font-size: var(--ds-text-xs);
+}
+
+.ds-breadcrumb--compact .ds-breadcrumb__item {
+  gap: var(--ds-space-0-5, 0.125rem);
+}
+
+/* ==========================================================================
+   Pagination Component
+   ==========================================================================
+   A row of page-number controls for navigating multi-page content.
+
+   Usage:
+     <nav class="ds-pagination" aria-label="Pagination">
+       <button class="ds-pagination__prev" aria-label="Previous page">&lsaquo;</button>
+       <button class="ds-pagination__item">1</button>
+       <button class="ds-pagination__item ds-pagination__item--active" aria-current="page">2</button>
+       <span class="ds-pagination__ellipsis">&hellip;</span>
+       <button class="ds-pagination__item">10</button>
+       <button class="ds-pagination__next" aria-label="Next page">&rsaquo;</button>
+     </nav>
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ds-space-1);
+  font-family: var(--ds-font-sans);
+}
+
+/* ---------------------------------------------------------------------------
+   Item (page number)
+   --------------------------------------------------------------------------- */
+
+.ds-pagination__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 var(--ds-space-1);
+  border: none;
+  border-radius: var(--ds-radius-md);
+  background: transparent;
+  color: var(--ds-color-text-secondary);
+  font-size: var(--ds-text-sm);
+  font-family: var(--ds-font-sans);
+  cursor: pointer;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-out),
+    color var(--ds-duration-fast) var(--ds-ease-out);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ds-pagination__item:hover {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+.ds-pagination__item:focus-visible {
+  outline: 2px solid var(--ds-color-interactive);
+  outline-offset: 2px;
+}
+
+/* ---------------------------------------------------------------------------
+   Active page
+   --------------------------------------------------------------------------- */
+
+.ds-pagination__item--active,
+.ds-pagination__item--active:hover {
+  background-color: var(--ds-color-inverted);
+  color: var(--ds-color-on-inverted);
+  cursor: default;
+}
+
+/* ---------------------------------------------------------------------------
+   Disabled item
+   --------------------------------------------------------------------------- */
+
+.ds-pagination__item--disabled,
+.ds-pagination__item--disabled:hover {
+  opacity: var(--ds-opacity-disabled);
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Previous / Next navigation buttons
+   --------------------------------------------------------------------------- */
+
+.ds-pagination__prev,
+.ds-pagination__next {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--ds-radius-md);
+  background: transparent;
+  color: var(--ds-color-text-secondary);
+  font-size: var(--ds-text-sm);
+  font-family: var(--ds-font-sans);
+  cursor: pointer;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-out),
+    color var(--ds-duration-fast) var(--ds-ease-out);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ds-pagination__prev:hover,
+.ds-pagination__next:hover {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+.ds-pagination__prev:focus-visible,
+.ds-pagination__next:focus-visible {
+  outline: 2px solid var(--ds-color-interactive);
+  outline-offset: 2px;
+}
+
+.ds-pagination__prev:disabled,
+.ds-pagination__next:disabled {
+  opacity: var(--ds-opacity-disabled);
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Ellipsis
+   --------------------------------------------------------------------------- */
+
+.ds-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  color: var(--ds-color-text-tertiary);
+  font-size: var(--ds-text-sm);
+  user-select: none;
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Page info text (e.g. "Page 1 of 10")
+   --------------------------------------------------------------------------- */
+
+.ds-pagination__info {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+  white-space: nowrap;
+}
+
+/* ---------------------------------------------------------------------------
+   Modifier: Compact
+   --------------------------------------------------------------------------- */
+
+.ds-pagination--compact .ds-pagination__item,
+.ds-pagination--compact .ds-pagination__prev,
+.ds-pagination--compact .ds-pagination__next,
+.ds-pagination--compact .ds-pagination__ellipsis {
+  min-width: 1.75rem;
+  height: 1.75rem;
+  font-size: var(--ds-text-xs);
+}
+
+/* ==========================================================================
+   Tag / Chip Component
+   ==========================================================================
+   Interactive, optionally removable tag for categorisation and filtering.
+
+   Usage:
+     <span class="ds-tag">Default</span>
+     <span class="ds-tag ds-tag--success">Approved</span>
+     <span class="ds-tag ds-tag--removable">
+       Removable
+       <button class="ds-tag__remove" aria-label="Remove">&times;</button>
+     </span>
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Base
+   --------------------------------------------------------------------------- */
+
+.ds-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-1) var(--ds-space-2-5, 0.625rem);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  font-family: var(--ds-font-sans);
+  line-height: 1;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-bg-elevated);
+  border: 1px solid var(--ds-color-border);
+  color: var(--ds-color-text-secondary);
+  white-space: nowrap;
+  transition:
+    border-color var(--ds-duration-fast) var(--ds-ease-out),
+    background-color var(--ds-duration-fast) var(--ds-ease-out);
+}
+
+.ds-tag:hover {
+  border-color: var(--ds-color-border-hover);
+}
+
+/* ---------------------------------------------------------------------------
+   Color variants — subtle background + vivid text + subtle border
+   --------------------------------------------------------------------------- */
+
+.ds-tag--primary {
+  background-color: var(--ds-color-interactive-subtle, var(--ds-color-bg-elevated));
+  color: var(--ds-color-interactive);
+  border-color: var(--ds-color-interactive-border, var(--ds-color-interactive));
+}
+
+.ds-tag--success {
+  background-color: var(--ds-color-success-subtle, var(--ds-color-bg-elevated));
+  color: var(--ds-color-success);
+  border-color: var(--ds-color-success-border, var(--ds-color-success));
+}
+
+.ds-tag--warning {
+  background-color: var(--ds-color-warning-subtle, var(--ds-color-bg-elevated));
+  color: var(--ds-color-warning);
+  border-color: var(--ds-color-warning-border, var(--ds-color-warning));
+}
+
+.ds-tag--error {
+  background-color: var(--ds-color-error-subtle, var(--ds-color-bg-elevated));
+  color: var(--ds-color-error);
+  border-color: var(--ds-color-error-border, var(--ds-color-error));
+}
+
+.ds-tag--info {
+  background-color: var(--ds-color-info-subtle, var(--ds-color-bg-elevated));
+  color: var(--ds-color-info);
+  border-color: var(--ds-color-info-border, var(--ds-color-info));
+}
+
+.ds-tag--purple {
+  background-color: var(--ds-color-purple-subtle, var(--ds-color-bg-elevated));
+  color: var(--ds-color-purple, var(--ds-color-interactive));
+  border-color: var(--ds-color-purple-border, var(--ds-color-purple, var(--ds-color-interactive)));
+}
+
+/* ---------------------------------------------------------------------------
+   Removable — tighter right padding for the close button
+   --------------------------------------------------------------------------- */
+
+.ds-tag--removable {
+  padding-right: var(--ds-space-1);
+}
+
+/* ---------------------------------------------------------------------------
+   Remove button
+   --------------------------------------------------------------------------- */
+
+.ds-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--ds-radius-full);
+  background: transparent;
+  color: currentColor;
+  font-size: inherit;
+  line-height: 1;
+  opacity: 0.6;
+  cursor: pointer;
+  transition:
+    opacity var(--ds-duration-fast) var(--ds-ease-out),
+    background-color var(--ds-duration-fast) var(--ds-ease-out);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ds-tag__remove:hover {
+  opacity: 1;
+  background-color: var(--ds-color-overlay-hover);
+}
+
+.ds-tag__remove:focus-visible {
+  outline: 2px solid var(--ds-color-interactive);
+  outline-offset: 1px;
+  opacity: 1;
+}
+
+/* ---------------------------------------------------------------------------
+   Variant: Outline
+   --------------------------------------------------------------------------- */
+
+.ds-tag--outline {
+  background-color: transparent;
+}
+
+/* ---------------------------------------------------------------------------
+   Size: Small
+   --------------------------------------------------------------------------- */
+
+.ds-tag--sm {
+  padding: var(--ds-space-0-5, 0.125rem) var(--ds-space-2, 0.5rem);
+  font-size: 0.625rem;
+}
+
+.ds-tag--sm.ds-tag--removable {
+  padding-right: var(--ds-space-0-5, 0.125rem);
+}
+
+/* ---------------------------------------------------------------------------
+   Size: Large
+   --------------------------------------------------------------------------- */
+
+.ds-tag--lg {
+  padding: var(--ds-space-1-5, 0.375rem) var(--ds-space-3);
+  font-size: var(--ds-text-sm);
+}
+
+.ds-tag--lg.ds-tag--removable {
+  padding-right: var(--ds-space-1-5, 0.375rem);
+}
+
+/* ==========================================================================
+ * Accordion / Collapse
+ * ==========================================================================
+ *
+ * A vertically stacked set of collapsible sections. Supports CSS-only
+ * open/close via the `.ds-accordion__item--open` modifier.
+ *
+ * Variants:
+ *   --flush      – borderless, full-bleed style
+ *   --separated  – visually detached items with individual borders
+ *
+ * Markup:
+ *   <div class="ds-accordion">
+ *     <div class="ds-accordion__item ds-accordion__item--open">
+ *       <button class="ds-accordion__trigger">Section</button>
+ *       <div class="ds-accordion__content">
+ *         <div class="ds-accordion__body">…</div>
+ *       </div>
+ *     </div>
+ *   </div>
+ * ========================================================================== */
+
+/* Container
+ * -------------------------------------------------------------------------- */
+
+.ds-accordion {
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  overflow: hidden;
+}
+
+/* Item
+ * -------------------------------------------------------------------------- */
+
+.ds-accordion__item {
+  border-top: 1px solid var(--ds-color-border);
+}
+
+.ds-accordion__item:first-child {
+  border-top: 0;
+}
+
+/* Trigger (button)
+ * -------------------------------------------------------------------------- */
+
+.ds-accordion__trigger {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: var(--ds-space-4);
+  text-align: left;
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+/* Chevron indicator (CSS border-arrow) */
+.ds-accordion__trigger::after {
+  content: "";
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-right: 2px solid var(--ds-color-text-secondary);
+  border-bottom: 2px solid var(--ds-color-text-secondary);
+  transform: rotate(45deg);
+  flex-shrink: 0;
+  margin-left: var(--ds-space-3);
+  transition: transform var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-accordion__trigger:hover {
+  background-color: var(--ds-color-overlay);
+}
+
+/* Open state – rotate chevron */
+.ds-accordion__item--open .ds-accordion__trigger::after {
+  transform: rotate(225deg);
+}
+
+/* Collapsible content wrapper
+ * -------------------------------------------------------------------------- */
+
+.ds-accordion__content {
+  max-height: 0;
+  overflow: hidden;
+  transition:
+    max-height var(--ds-duration-normal) var(--ds-ease-default),
+    padding var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-accordion__item--open .ds-accordion__content {
+  max-height: 80rem;
+}
+
+/* Inner body (visible content)
+ * -------------------------------------------------------------------------- */
+
+.ds-accordion__body {
+  padding: var(--ds-space-4);
+  padding-top: 0;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  line-height: 1.625;
+}
+
+/* ==========================================================================
+ * Variant: Flush
+ * ========================================================================== */
+
+.ds-accordion--flush {
+  border: 0;
+  border-radius: 0;
+}
+
+.ds-accordion--flush .ds-accordion__item {
+  border-top: 0;
+  border-bottom: 1px solid var(--ds-color-border);
+}
+
+.ds-accordion--flush .ds-accordion__item:last-child {
+  border-bottom: 0;
+}
+
+/* ==========================================================================
+ * Variant: Separated
+ * ========================================================================== */
+
+.ds-accordion--separated {
+  border: 0;
+  border-radius: 0;
+  overflow: visible;
+}
+
+.ds-accordion--separated .ds-accordion__item {
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  margin-bottom: var(--ds-space-3);
+  overflow: hidden;
+}
+
+.ds-accordion--separated .ds-accordion__item:last-child {
+  margin-bottom: 0;
+}
+
+/* ==========================================================================
+ * Drawer / Sheet
+ * ==========================================================================
+ *
+ * A sliding overlay panel anchored to the edge of the viewport.
+ * Default direction is right; use `--left` or `--bottom` modifiers
+ * to change the slide origin.
+ *
+ * Sizes:
+ *   --sm   18 rem
+ *   (default)  24 rem
+ *   --lg   36 rem
+ *
+ * Markup:
+ *   <div class="ds-drawer ds-drawer--right ds-drawer--open">
+ *     <div class="ds-drawer__content">
+ *       <div class="ds-drawer__header">
+ *         <h3>Title</h3>
+ *         <button class="ds-drawer__close" aria-label="Close">&times;</button>
+ *       </div>
+ *       <div class="ds-drawer__body">…</div>
+ *       <div class="ds-drawer__footer">…</div>
+ *     </div>
+ *   </div>
+ * ========================================================================== */
+
+/* Overlay backdrop
+ * -------------------------------------------------------------------------- */
+
+.ds-drawer {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-overlay);
+  background-color: var(--ds-color-overlay);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--ds-duration-normal) var(--ds-ease-default),
+    visibility var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-drawer--open {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Sliding panel
+ * -------------------------------------------------------------------------- */
+
+.ds-drawer__content {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--ds-color-surface);
+  box-shadow: var(--ds-shadow-lg);
+  overflow-y: auto;
+  transition: transform var(--ds-duration-normal) var(--ds-ease-out-expo);
+}
+
+/* ==========================================================================
+ * Direction: Right (default)
+ * ========================================================================== */
+
+.ds-drawer__content,
+.ds-drawer--right .ds-drawer__content {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 24rem;
+  max-width: 90vw;
+  border-left: 1px solid var(--ds-color-border);
+  transform: translateX(100%);
+}
+
+.ds-drawer--open .ds-drawer__content,
+.ds-drawer--right.ds-drawer--open .ds-drawer__content {
+  transform: translateX(0);
+}
+
+/* ==========================================================================
+ * Direction: Left
+ * ========================================================================== */
+
+.ds-drawer--left .ds-drawer__content {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: auto;
+  width: 24rem;
+  max-width: 90vw;
+  border-left: 0;
+  border-right: 1px solid var(--ds-color-border);
+  transform: translateX(-100%);
+}
+
+.ds-drawer--left.ds-drawer--open .ds-drawer__content {
+  transform: translateX(0);
+}
+
+/* ==========================================================================
+ * Direction: Bottom
+ * ========================================================================== */
+
+.ds-drawer--bottom .ds-drawer__content {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: auto;
+  width: auto;
+  max-height: 90dvh;
+  border-left: 0;
+  border-top: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
+  transform: translateY(100%);
+}
+
+.ds-drawer--bottom.ds-drawer--open .ds-drawer__content {
+  transform: translateY(0);
+}
+
+/* ==========================================================================
+ * Sizes
+ * ========================================================================== */
+
+.ds-drawer--sm .ds-drawer__content {
+  width: 18rem;
+}
+
+.ds-drawer--lg .ds-drawer__content {
+  width: 36rem;
+}
+
+/* Bottom drawers should not have a fixed width */
+.ds-drawer--bottom.ds-drawer--sm .ds-drawer__content,
+.ds-drawer--bottom.ds-drawer--lg .ds-drawer__content {
+  width: auto;
+}
+
+/* ==========================================================================
+ * Header
+ * ========================================================================== */
+
+.ds-drawer__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: var(--ds-space-4) var(--ds-space-5);
+  border-bottom: 1px solid var(--ds-color-border);
+}
+
+.ds-drawer__header h3 {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-lg);
+  color: var(--ds-color-text);
+  margin: 0;
+}
+
+/* ==========================================================================
+ * Close button
+ * ========================================================================== */
+
+.ds-drawer__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ds-radius-md);
+  background-color: transparent;
+  color: var(--ds-color-text-tertiary);
+  font-size: var(--ds-text-lg);
+  line-height: 1;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-drawer__close:hover {
+  background-color: var(--ds-color-overlay);
+  color: var(--ds-color-text);
+}
+
+/* ==========================================================================
+ * Body
+ * ========================================================================== */
+
+.ds-drawer__body {
+  padding: var(--ds-space-5);
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* ==========================================================================
+ * Footer
+ * ========================================================================== */
+
+.ds-drawer__footer {
+  padding: var(--ds-space-4) var(--ds-space-5);
+  border-top: 1px solid var(--ds-color-border);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ds-space-2);
+}
+
+/* ==========================================================================
+ * Progress Bar & Step Indicator
+ * ==========================================================================
+ *
+ * Two related components for communicating progress:
+ *
+ * 1. **Progress bar** — a horizontal fill bar with optional label row.
+ *    Sizes: --sm, (default), --lg
+ *    Statuses: --success, --warning, --error, --info
+ *
+ * 2. **Step indicator** — a numbered sequence of steps with connectors.
+ *    States: --completed, --current, --error
+ *    Layout: horizontal (default), --vertical
+ *
+ * Progress bar markup:
+ *   <div class="ds-progress__label">
+ *     <span>Uploading…</span><span>64 %</span>
+ *   </div>
+ *   <div class="ds-progress">
+ *     <div class="ds-progress__bar" style="width: 64%"></div>
+ *   </div>
+ *
+ * Step indicator markup:
+ *   <div class="ds-steps">
+ *     <div class="ds-step ds-step--completed">
+ *       <div class="ds-step__indicator">1</div>
+ *       <div class="ds-step__content">
+ *         <span class="ds-step__title">Account</span>
+ *         <span class="ds-step__description">Create your account</span>
+ *       </div>
+ *     </div>
+ *     <div class="ds-step__connector"></div>
+ *     <div class="ds-step ds-step--current">…</div>
+ *   </div>
+ * ========================================================================== */
+
+/* ==========================================================================
+ * Progress Bar
+ * ========================================================================== */
+
+/* Label row (sits above the bar) */
+.ds-progress__label {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-bottom: var(--ds-space-1-5);
+}
+
+/* Track */
+.ds-progress {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--ds-color-bg-muted);
+  border-radius: var(--ds-radius-full);
+  overflow: hidden;
+}
+
+/* Fill */
+.ds-progress__bar {
+  height: 100%;
+  min-width: 0.25rem;
+  background-color: var(--ds-color-inverted);
+  border-radius: var(--ds-radius-full);
+  transition: width var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+/* Sizes
+ * -------------------------------------------------------------------------- */
+
+.ds-progress--sm {
+  height: 0.25rem;
+}
+
+.ds-progress--lg {
+  height: 0.75rem;
+}
+
+/* Status colours
+ * -------------------------------------------------------------------------- */
+
+.ds-progress--success .ds-progress__bar {
+  background-color: var(--ds-color-success);
+}
+
+.ds-progress--warning .ds-progress__bar {
+  background-color: var(--ds-color-warning);
+}
+
+.ds-progress--error .ds-progress__bar {
+  background-color: var(--ds-color-error);
+}
+
+.ds-progress--info .ds-progress__bar {
+  background-color: var(--ds-color-info);
+}
+
+/* ==========================================================================
+ * Step Indicator
+ * ========================================================================== */
+
+/* Steps container (horizontal by default) */
+.ds-steps {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0;
+}
+
+/* Vertical variant */
+.ds-steps--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* Single step
+ * -------------------------------------------------------------------------- */
+
+.ds-step {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+}
+
+/* Circle indicator */
+.ds-step__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--ds-radius-full);
+  border: 2px solid var(--ds-color-border);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-tertiary);
+  background-color: var(--ds-color-surface);
+  flex-shrink: 0;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    border-color var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+/* Completed step */
+.ds-step--completed .ds-step__indicator {
+  background-color: var(--ds-color-inverted);
+  border-color: var(--ds-color-inverted);
+  color: var(--ds-color-on-inverted);
+}
+
+/* Current step */
+.ds-step--current .ds-step__indicator {
+  border-color: var(--ds-color-interactive);
+  color: var(--ds-color-text);
+}
+
+/* Error step */
+.ds-step--error .ds-step__indicator {
+  border-color: var(--ds-color-error);
+  color: var(--ds-color-error);
+}
+
+/* Step content
+ * -------------------------------------------------------------------------- */
+
+.ds-step__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.ds-step__title {
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+}
+
+.ds-step__description {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}
+
+/* Connector (line between steps)
+ * -------------------------------------------------------------------------- */
+
+/* Horizontal connector */
+.ds-step__connector {
+  flex: 1;
+  height: 2px;
+  min-width: var(--ds-space-4);
+  background-color: var(--ds-color-border);
+  margin-inline: var(--ds-space-2);
+}
+
+/* Filled connector after a completed step */
+.ds-step--completed + .ds-step__connector {
+  background-color: var(--ds-color-inverted);
+}
+
+/* Vertical connector */
+.ds-steps--vertical .ds-step__connector {
+  flex: none;
+  width: 2px;
+  height: 2rem;
+  min-width: auto;
+  margin-inline: 0;
+  margin-left: calc(1rem - 1px); /* center under the 2 rem indicator */
+  margin-block: var(--ds-space-1);
+  background-color: var(--ds-color-border-subtle);
+}
+
+.ds-steps--vertical .ds-step--completed + .ds-step__connector {
+  background-color: var(--ds-color-inverted);
+}
+
+
+/* === Tier 3 — Advanced === */
+/* ==========================================================================
+ * Popover
+ * ==========================================================================
+ *
+ * Flexible popover component for displaying complex content anchored to a
+ * trigger element. Supports four placement directions (top, bottom, left,
+ * right) and multiple size variants. Default placement is bottom.
+ *
+ * Usage:
+ *   <div class="ds-popover ds-popover--open">
+ *     <button>Trigger</button>
+ *     <div class="ds-popover__content">...</div>
+ *   </div>
+ *
+ * Modifiers:
+ *   .ds-popover--open         — Shows the popover content
+ *   .ds-popover--top          — Places content above the trigger
+ *   .ds-popover--bottom       — Places content below the trigger (default)
+ *   .ds-popover--left         — Places content to the left of the trigger
+ *   .ds-popover--right        — Places content to the right of the trigger
+ *   .ds-popover__content--sm  — Smaller popover (12rem min-width)
+ *   .ds-popover__content--lg  — Larger popover (24rem min-width)
+ * ========================================================================== */
+
+.ds-popover {
+  position: relative;
+  display: inline-flex;
+}
+
+.ds-popover__content {
+  position: absolute;
+  z-index: var(--ds-z-dropdown);
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  box-shadow: var(--ds-shadow-lg);
+  padding: var(--ds-space-4);
+  min-width: 16rem;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.96);
+  transition:
+    opacity var(--ds-duration-fast) var(--ds-ease),
+    visibility var(--ds-duration-fast) var(--ds-ease),
+    transform var(--ds-duration-fast) var(--ds-ease-out-expo);
+}
+
+/* Open state */
+.ds-popover--open .ds-popover__content {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+
+/* Placement: bottom (default) */
+.ds-popover__content,
+.ds-popover--bottom .ds-popover__content {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) scale(0.96);
+}
+
+.ds-popover--open .ds-popover__content,
+.ds-popover--bottom.ds-popover--open .ds-popover__content {
+  transform: translateX(-50%) scale(1);
+}
+
+/* Placement: top */
+.ds-popover--top .ds-popover__content {
+  bottom: calc(100% + 8px);
+  top: auto;
+  left: 50%;
+  transform: translateX(-50%) scale(0.96);
+}
+
+.ds-popover--top.ds-popover--open .ds-popover__content {
+  transform: translateX(-50%) scale(1);
+}
+
+/* Placement: left */
+.ds-popover--left .ds-popover__content {
+  right: calc(100% + 8px);
+  top: 50%;
+  left: auto;
+  transform: translateY(-50%) scale(0.96);
+}
+
+.ds-popover--left.ds-popover--open .ds-popover__content {
+  transform: translateY(-50%) scale(1);
+}
+
+/* Placement: right */
+.ds-popover--right .ds-popover__content {
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%) scale(0.96);
+}
+
+.ds-popover--right.ds-popover--open .ds-popover__content {
+  transform: translateY(-50%) scale(1);
+}
+
+/* Size: small */
+.ds-popover__content--sm {
+  min-width: 12rem;
+  padding: var(--ds-space-3);
+}
+
+/* Size: large */
+.ds-popover__content--lg {
+  min-width: 24rem;
+}
+
+/* ==========================================================================
+ * Slider
+ * ==========================================================================
+ *
+ * Range slider input component with customizable thumb and track styling.
+ * Supports labels, value display, size variants, and disabled state.
+ *
+ * Usage:
+ *   <div class="ds-slider">
+ *     <input type="range" min="0" max="100" value="50" />
+ *     <div class="ds-slider__labels">
+ *       <span>0</span>
+ *       <span>100</span>
+ *     </div>
+ *   </div>
+ *
+ * Modifiers:
+ *   .ds-slider--sm        — Smaller track and thumb
+ *   .ds-slider--disabled  — Reduced opacity, no interaction
+ * ========================================================================== */
+
+.ds-slider {
+  width: 100%;
+  position: relative;
+}
+
+.ds-slider input[type="range"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 0.375rem;
+  background-color: var(--ds-color-bg-muted);
+  border-radius: var(--ds-radius-full);
+  outline: none;
+  cursor: pointer;
+}
+
+/* Webkit thumb */
+.ds-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-inverted);
+  border: 2px solid var(--ds-color-surface);
+  box-shadow: var(--ds-shadow-sm);
+  cursor: pointer;
+  transition: transform var(--ds-duration-fast) var(--ds-ease);
+}
+
+/* Firefox thumb */
+.ds-slider input[type="range"]::-moz-range-thumb {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-inverted);
+  border: 2px solid var(--ds-color-surface);
+  box-shadow: var(--ds-shadow-sm);
+  cursor: pointer;
+  transition: transform var(--ds-duration-fast) var(--ds-ease);
+}
+
+/* Hover: scale up thumb */
+.ds-slider input[type="range"]:hover::-webkit-slider-thumb {
+  transform: scale(1.1);
+}
+
+.ds-slider input[type="range"]:hover::-moz-range-thumb {
+  transform: scale(1.1);
+}
+
+/* Focus ring */
+.ds-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
+.ds-slider input[type="range"]:focus-visible::-moz-range-thumb {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
+/* Labels row */
+.ds-slider__labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-top: var(--ds-space-1);
+}
+
+/* Current value display */
+.ds-slider__value {
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+}
+
+/* Size: small */
+.ds-slider--sm input[type="range"] {
+  height: 0.25rem;
+}
+
+.ds-slider--sm input[type="range"]::-webkit-slider-thumb {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ds-slider--sm input[type="range"]::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Disabled state */
+.ds-slider--disabled {
+  opacity: var(--ds-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.ds-slider--disabled input[type="range"] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ==========================================================================
+ * Timeline
+ * ==========================================================================
+ *
+ * Vertical timeline component for roadmaps, activity feeds, and step-based
+ * flows. Each item has a dot indicator on a vertical line with support for
+ * completed, current, and error states.
+ *
+ * Usage:
+ *   <div class="ds-timeline">
+ *     <div class="ds-timeline__item ds-timeline__item--completed">
+ *       <div class="ds-timeline__dot"></div>
+ *       <div class="ds-timeline__content">
+ *         <div class="ds-timeline__title">Step one</div>
+ *         <div class="ds-timeline__description">Details here.</div>
+ *         <div class="ds-timeline__time">2 hours ago</div>
+ *       </div>
+ *     </div>
+ *   </div>
+ *
+ * Modifiers:
+ *   .ds-timeline__item--completed  — Green dot (success)
+ *   .ds-timeline__item--current    — Inverted dot (active)
+ *   .ds-timeline__item--error      — Red dot (error)
+ *   .ds-timeline--compact          — Tighter spacing, smaller dots
+ * ========================================================================== */
+
+.ds-timeline {
+  position: relative;
+  padding-left: var(--ds-space-8);
+}
+
+/* Vertical line */
+.ds-timeline::before {
+  content: "";
+  position: absolute;
+  left: 0.9rem;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--ds-color-border);
+}
+
+/* Item */
+.ds-timeline__item {
+  position: relative;
+  padding-bottom: var(--ds-space-6);
+}
+
+.ds-timeline__item:last-child {
+  padding-bottom: 0;
+}
+
+/* Dot */
+.ds-timeline__dot {
+  position: absolute;
+  left: calc(-1 * var(--ds-space-8) + 0.5rem);
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-bg-elevated);
+  border: 2px solid var(--ds-color-border);
+  z-index: 1;
+}
+
+/* Dot state: completed */
+.ds-timeline__item--completed .ds-timeline__dot {
+  background-color: var(--ds-color-success);
+  border-color: var(--ds-color-success);
+}
+
+/* Dot state: current */
+.ds-timeline__item--current .ds-timeline__dot {
+  background-color: var(--ds-color-inverted);
+  border-color: var(--ds-color-inverted);
+}
+
+/* Dot state: error */
+.ds-timeline__item--error .ds-timeline__dot {
+  background-color: var(--ds-color-error);
+  border-color: var(--ds-color-error);
+}
+
+/* Content area */
+.ds-timeline__content {
+  /* no additional layout needed; flows naturally after the dot */
+}
+
+/* Title */
+.ds-timeline__title {
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+}
+
+/* Description */
+.ds-timeline__description {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  margin-top: var(--ds-space-1);
+}
+
+/* Timestamp */
+.ds-timeline__time {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-top: var(--ds-space-0-5);
+}
+
+/* Compact variant */
+.ds-timeline--compact {
+  padding-left: var(--ds-space-6);
+}
+
+.ds-timeline--compact::before {
+  left: 0.6rem;
+}
+
+.ds-timeline--compact .ds-timeline__item {
+  padding-bottom: var(--ds-space-4);
+}
+
+.ds-timeline--compact .ds-timeline__item:last-child {
+  padding-bottom: 0;
+}
+
+.ds-timeline--compact .ds-timeline__dot {
+  left: calc(-1 * var(--ds-space-6) + 0.25rem);
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* ==========================================================================
+ * Kbd
+ * ==========================================================================
+ *
+ * Keyboard shortcut display component with a raised 3D key appearance.
+ * Use individually or group multiple keys with ds-kbd-group for combos
+ * like "Cmd + K".
+ *
+ * Usage:
+ *   <kbd class="ds-kbd">Esc</kbd>
+ *
+ *   <span class="ds-kbd-group">
+ *     <kbd class="ds-kbd">Cmd</kbd>
+ *     <span class="ds-kbd-group__separator">+</span>
+ *     <kbd class="ds-kbd">K</kbd>
+ *   </span>
+ *
+ * Modifiers:
+ *   .ds-kbd--lg  — Larger key display
+ * ========================================================================== */
+
+.ds-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-0-5) var(--ds-space-1-5);
+  font-family: var(--ds-font-mono);
+  font-size: var(--ds-text-xs);
+  background-color: var(--ds-color-bg-elevated);
+  border: 1px solid var(--ds-color-border);
+  border-bottom-width: 2px;
+  border-radius: var(--ds-radius-sm);
+  color: var(--ds-color-text-secondary);
+  line-height: 1;
+  vertical-align: baseline;
+}
+
+/* Large variant */
+.ds-kbd--lg {
+  font-size: var(--ds-text-sm);
+  padding: var(--ds-space-1) var(--ds-space-2);
+}
+
+/* Key group (for combos like Cmd + K) */
+.ds-kbd-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+}
+
+/* Separator between keys */
+.ds-kbd-group__separator {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}
+
+/* ==========================================================================
+ * Command
+ * ==========================================================================
+ *
+ * Command palette / search overlay following the Cmd+K pattern. Provides a
+ * full-screen overlay with a centered search dialog, grouped results,
+ * keyboard-navigable items, and a footer with shortcut hints.
+ *
+ * Usage:
+ *   <div class="ds-command ds-command--open">
+ *     <div class="ds-command__content">
+ *       <div class="ds-command__input-wrapper">
+ *         <span class="ds-command__input-icon">...</span>
+ *         <input class="ds-command__input" placeholder="Search..." />
+ *       </div>
+ *       <div class="ds-command__list">
+ *         <div class="ds-command__group">
+ *           <div class="ds-command__group-heading">Results</div>
+ *           <div class="ds-command__item ds-command__item--active">
+ *             <span class="ds-command__item-icon">...</span>
+ *             <span class="ds-command__item-label">Item</span>
+ *             <span class="ds-command__item-shortcut">Ctrl+N</span>
+ *           </div>
+ *         </div>
+ *         <div class="ds-command__empty">No results found.</div>
+ *       </div>
+ *       <div class="ds-command__footer">...</div>
+ *     </div>
+ *   </div>
+ *
+ * Modifiers:
+ *   .ds-command--open  — Shows the command palette
+ * ========================================================================== */
+
+/* Overlay */
+.ds-command {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-modal);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 20vh;
+  background-color: var(--ds-color-overlay);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--ds-duration-fast) var(--ds-ease),
+    visibility var(--ds-duration-fast) var(--ds-ease);
+}
+
+/* Open state */
+.ds-command--open {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Content panel */
+.ds-command__content {
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  box-shadow: var(--ds-shadow-lg);
+  width: 100%;
+  max-width: 32rem;
+  overflow: hidden;
+  transform: scale(0.96) translateY(-8px);
+  transition:
+    transform var(--ds-duration-fast) var(--ds-ease-out-expo);
+}
+
+.ds-command--open .ds-command__content {
+  transform: scale(1) translateY(0);
+}
+
+/* Input wrapper */
+.ds-command__input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-3) var(--ds-space-4);
+  border-bottom: 1px solid var(--ds-color-border);
+}
+
+/* Search icon */
+.ds-command__input-icon {
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
+}
+
+/* Search input */
+.ds-command__input {
+  flex: 1;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  font-size: var(--ds-text-base);
+  color: var(--ds-color-text);
+  font-family: var(--ds-font-sans);
+}
+
+.ds-command__input::placeholder {
+  color: var(--ds-color-text-tertiary);
+}
+
+/* Results list */
+.ds-command__list {
+  max-height: 20rem;
+  overflow-y: auto;
+  padding: var(--ds-space-2);
+}
+
+/* Group of results */
+.ds-command__group {
+  /* structural grouping — no additional visual styles needed */
+}
+
+/* Group heading */
+.ds-command__group-heading {
+  font-size: var(--ds-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ds-color-text-tertiary);
+  padding: var(--ds-space-2) var(--ds-space-3);
+  font-weight: var(--ds-weight-medium);
+}
+
+/* Individual item */
+.ds-command__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-2-5) var(--ds-space-3);
+  border-radius: var(--ds-radius-lg);
+  cursor: pointer;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease),
+    color var(--ds-duration-fast) var(--ds-ease);
+}
+
+/* Item hover & active states */
+.ds-command__item:hover,
+.ds-command__item--active {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+/* Item icon */
+.ds-command__item-icon {
+  flex-shrink: 0;
+  color: var(--ds-color-text-tertiary);
+}
+
+/* Item label */
+.ds-command__item-label {
+  flex: 1;
+}
+
+/* Item shortcut hint */
+.ds-command__item-shortcut {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
+}
+
+/* Empty state */
+.ds-command__empty {
+  padding: var(--ds-space-8);
+  text-align: center;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+}
+
+/* Footer */
+.ds-command__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-4);
+  padding: var(--ds-space-2) var(--ds-space-3);
+  border-top: 1px solid var(--ds-color-border);
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}
+
+
+/* ==========================================================================
+   Utilities: Layout
+   Container with clamp padding, generous responsive grid.
+   ========================================================================== */
+
+/* --- Container --- */
+.ds-container {
+  width: 100%;
+  max-width: var(--ds-container-max);
+  margin-inline: auto;
+  padding-inline: var(--ds-container-padding);
+}
+
+/* --- Section (generous vertical rhythm) --- */
+.ds-section {
+  padding-block: var(--ds-section-padding);
+}
+
+/* --- Flex --- */
+.ds-flex       { display: flex; }
+.ds-inline-flex { display: inline-flex; }
+.ds-flex-col   { flex-direction: column; }
+.ds-flex-row   { flex-direction: row; }
+.ds-flex-wrap  { flex-wrap: wrap; }
+.ds-flex-1     { flex: 1 1 0%; }
+.ds-flex-auto  { flex: 1 1 auto; }
+.ds-flex-none  { flex: none; }
+.ds-shrink-0   { flex-shrink: 0; }
+
+/* --- Alignment --- */
+.ds-items-start    { align-items: flex-start; }
+.ds-items-center   { align-items: center; }
+.ds-items-end      { align-items: flex-end; }
+.ds-items-stretch  { align-items: stretch; }
+.ds-items-baseline { align-items: baseline; }
+
+.ds-justify-start   { justify-content: flex-start; }
+.ds-justify-center  { justify-content: center; }
+.ds-justify-end     { justify-content: flex-end; }
+.ds-justify-between { justify-content: space-between; }
+.ds-justify-around  { justify-content: space-around; }
+.ds-justify-evenly  { justify-content: space-evenly; }
+
+.ds-self-start  { align-self: flex-start; }
+.ds-self-center { align-self: center; }
+.ds-self-end    { align-self: flex-end; }
+
+/* --- Grid --- */
+.ds-grid {
+  display: grid;
+  gap: var(--ds-space-6);
+}
+
+.ds-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
+.ds-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.ds-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.ds-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+@media (min-width: 640px) {
+  .ds-sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ds-sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (min-width: 768px) {
+  .ds-md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ds-md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .ds-md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+  .ds-md\:flex-row { flex-direction: row; }
+}
+
+@media (min-width: 1024px) {
+  .ds-lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .ds-lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+}
+
+/* --- Gap --- */
+.ds-gap-0  { gap: var(--ds-space-0); }
+.ds-gap-1  { gap: var(--ds-space-1); }
+.ds-gap-2  { gap: var(--ds-space-2); }
+.ds-gap-3  { gap: var(--ds-space-3); }
+.ds-gap-4  { gap: var(--ds-space-4); }
+.ds-gap-5  { gap: var(--ds-space-5); }
+.ds-gap-6  { gap: var(--ds-space-6); }
+.ds-gap-8  { gap: var(--ds-space-8); }
+.ds-gap-12 { gap: var(--ds-space-12); }
+
+/* --- Display --- */
+.ds-block        { display: block; }
+.ds-inline-block { display: inline-block; }
+.ds-inline       { display: inline; }
+.ds-hidden       { display: none; }
+
+@media (min-width: 768px) {
+  .ds-md\:hidden { display: none; }
+  .ds-md\:block  { display: block; }
+  .ds-md\:flex   { display: flex; }
+}
+
+/* --- Position --- */
+.ds-relative { position: relative; }
+.ds-absolute { position: absolute; }
+.ds-fixed    { position: fixed; }
+.ds-sticky   { position: sticky; top: 0; }
+
+/* --- Overflow --- */
+.ds-overflow-hidden { overflow: hidden; }
+.ds-overflow-auto   { overflow: auto; }
+.ds-overflow-x-auto { overflow-x: auto; }
+
+/* --- Width/Height --- */
+.ds-w-full    { width: 100%; }
+.ds-h-full    { height: 100%; }
+.ds-h-screen  { height: 100dvh; }
+.ds-min-h-screen { min-height: 100dvh; }
+
+/* --- Stack (vertical spacing) --- */
+.ds-stack > * + * {
+  margin-top: var(--ds-space-4);
+}
+
+.ds-stack--sm > * + * { margin-top: var(--ds-space-2); }
+.ds-stack--lg > * + * { margin-top: var(--ds-space-8); }
+
+/* --- Center content --- */
+.ds-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* --- Aspect Ratio --- */
+.ds-aspect-square { aspect-ratio: 1; }
+.ds-aspect-video  { aspect-ratio: 16/9; }
+.ds-aspect-card   { aspect-ratio: 16/10; }
+
+/* ==========================================================================
+   Utilities: Spacing (margin & padding)
+   Pattern: ds-{m|p}{side}-{size}
+   ========================================================================== */
+
+/* --- Padding --- */
+.ds-p-0  { padding: var(--ds-space-0); }
+.ds-p-1  { padding: var(--ds-space-1); }
+.ds-p-2  { padding: var(--ds-space-2); }
+.ds-p-3  { padding: var(--ds-space-3); }
+.ds-p-4  { padding: var(--ds-space-4); }
+.ds-p-5  { padding: var(--ds-space-5); }
+.ds-p-6  { padding: var(--ds-space-6); }
+.ds-p-8  { padding: var(--ds-space-8); }
+.ds-p-10 { padding: var(--ds-space-10); }
+.ds-p-12 { padding: var(--ds-space-12); }
+
+.ds-px-0  { padding-inline: var(--ds-space-0); }
+.ds-px-2  { padding-inline: var(--ds-space-2); }
+.ds-px-3  { padding-inline: var(--ds-space-3); }
+.ds-px-4  { padding-inline: var(--ds-space-4); }
+.ds-px-5  { padding-inline: var(--ds-space-5); }
+.ds-px-6  { padding-inline: var(--ds-space-6); }
+.ds-px-8  { padding-inline: var(--ds-space-8); }
+
+.ds-py-0  { padding-block: var(--ds-space-0); }
+.ds-py-2  { padding-block: var(--ds-space-2); }
+.ds-py-3  { padding-block: var(--ds-space-3); }
+.ds-py-4  { padding-block: var(--ds-space-4); }
+.ds-py-5  { padding-block: var(--ds-space-5); }
+.ds-py-6  { padding-block: var(--ds-space-6); }
+.ds-py-8  { padding-block: var(--ds-space-8); }
+.ds-py-10 { padding-block: var(--ds-space-10); }
+.ds-py-12 { padding-block: var(--ds-space-12); }
+.ds-py-16 { padding-block: var(--ds-space-16); }
+.ds-py-20 { padding-block: var(--ds-space-20); }
+
+.ds-pt-4  { padding-top: var(--ds-space-4); }
+.ds-pt-8  { padding-top: var(--ds-space-8); }
+.ds-pt-12 { padding-top: var(--ds-space-12); }
+.ds-pt-16 { padding-top: var(--ds-space-16); }
+
+.ds-pb-4  { padding-bottom: var(--ds-space-4); }
+.ds-pb-8  { padding-bottom: var(--ds-space-8); }
+
+/* --- Margin --- */
+.ds-m-0    { margin: var(--ds-space-0); }
+.ds-m-auto { margin: auto; }
+
+.ds-mx-auto { margin-inline: auto; }
+.ds-mx-2   { margin-inline: var(--ds-space-2); }
+.ds-mx-4   { margin-inline: var(--ds-space-4); }
+
+.ds-my-0  { margin-block: var(--ds-space-0); }
+.ds-my-2  { margin-block: var(--ds-space-2); }
+.ds-my-4  { margin-block: var(--ds-space-4); }
+.ds-my-6  { margin-block: var(--ds-space-6); }
+.ds-my-8  { margin-block: var(--ds-space-8); }
+
+.ds-mt-0  { margin-top: var(--ds-space-0); }
+.ds-mt-1  { margin-top: var(--ds-space-1); }
+.ds-mt-2  { margin-top: var(--ds-space-2); }
+.ds-mt-4  { margin-top: var(--ds-space-4); }
+.ds-mt-6  { margin-top: var(--ds-space-6); }
+.ds-mt-8  { margin-top: var(--ds-space-8); }
+
+.ds-mb-0  { margin-bottom: var(--ds-space-0); }
+.ds-mb-1  { margin-bottom: var(--ds-space-1); }
+.ds-mb-2  { margin-bottom: var(--ds-space-2); }
+.ds-mb-4  { margin-bottom: var(--ds-space-4); }
+.ds-mb-6  { margin-bottom: var(--ds-space-6); }
+.ds-mb-8  { margin-bottom: var(--ds-space-8); }
+
+.ds-ml-auto { margin-left: auto; }
+.ds-mr-auto { margin-right: auto; }
+
+/* ==========================================================================
+   Utilities: Text, Visual & style helpers
+   ========================================================================== */
+
+/* --- Text Size --- */
+.ds-text-xs   { font-size: var(--ds-text-xs); }
+.ds-text-sm   { font-size: var(--ds-text-sm); }
+.ds-text-base { font-size: var(--ds-text-base); }
+.ds-text-lg   { font-size: var(--ds-text-lg); }
+.ds-text-xl   { font-size: var(--ds-text-xl); }
+.ds-text-2xl  { font-size: var(--ds-text-2xl); }
+.ds-text-3xl  { font-size: var(--ds-text-3xl); }
+.ds-text-4xl  { font-size: var(--ds-text-4xl); }
+.ds-text-5xl  { font-size: var(--ds-text-5xl); }
+
+/* --- Text Weight --- */
+.ds-font-light    { font-weight: var(--ds-weight-light); }
+.ds-font-normal   { font-weight: var(--ds-weight-normal); }
+.ds-font-medium   { font-weight: var(--ds-weight-medium); }
+.ds-font-semibold { font-weight: var(--ds-weight-semibold); }
+.ds-font-bold     { font-weight: var(--ds-weight-bold); }
+
+/* --- Text Alignment --- */
+.ds-text-left   { text-align: left; }
+.ds-text-center { text-align: center; }
+.ds-text-right  { text-align: right; }
+.ds-text-balance { text-wrap: balance; }
+
+/* --- Text Color --- */
+.ds-text-primary   { color: var(--ds-color-text); }
+.ds-text-secondary { color: var(--ds-color-text-secondary); }
+.ds-text-tertiary  { color: var(--ds-color-text-tertiary); }
+.ds-text-success   { color: var(--ds-color-success); }
+.ds-text-warning   { color: var(--ds-color-warning); }
+.ds-text-error     { color: var(--ds-color-error); }
+.ds-text-info      { color: var(--ds-color-info); }
+
+/* --- Background Color --- */
+.ds-bg-base     { background-color: var(--ds-color-bg); }
+.ds-bg-surface  { background-color: var(--ds-color-surface); }
+.ds-bg-subtle   { background-color: var(--ds-color-bg-subtle); }
+.ds-bg-elevated { background-color: var(--ds-color-bg-elevated); }
+.ds-bg-inverted { background-color: var(--ds-color-inverted); color: var(--ds-color-on-inverted); }
+
+/* --- Surface Card --- */
+.ds-surface {
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+}
+
+.ds-surface--hover {
+  transition:
+    background-color var(--ds-duration-normal) var(--ds-ease-default),
+    border-color var(--ds-duration-normal) var(--ds-ease-default);
+}
+.ds-surface--hover:hover {
+  border-color: var(--ds-color-border-hover);
+}
+
+/* --- Text Decoration --- */
+.ds-underline    { text-decoration: underline; text-underline-offset: 2px; }
+.ds-no-underline { text-decoration: none; }
+
+/* --- Text Transform --- */
+.ds-uppercase  { text-transform: uppercase; letter-spacing: var(--ds-tracking-wide); }
+.ds-lowercase  { text-transform: lowercase; }
+.ds-capitalize { text-transform: capitalize; }
+
+/* --- Line Height --- */
+.ds-leading-tight   { line-height: var(--ds-leading-tight); }
+.ds-leading-snug    { line-height: var(--ds-leading-snug); }
+.ds-leading-normal  { line-height: var(--ds-leading-normal); }
+.ds-leading-relaxed { line-height: var(--ds-leading-relaxed); }
+
+/* --- Tracking --- */
+.ds-tracking-tighter { letter-spacing: var(--ds-tracking-tighter); }
+.ds-tracking-tight   { letter-spacing: var(--ds-tracking-tight); }
+.ds-tracking-normal  { letter-spacing: var(--ds-tracking-normal); }
+.ds-tracking-wide    { letter-spacing: var(--ds-tracking-wide); }
+
+/* --- Truncation --- */
+.ds-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ds-line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* --- Border --- */
+.ds-border      { border: 1px solid var(--ds-color-border); }
+.ds-border-t    { border-top: 1px solid var(--ds-color-border); }
+.ds-border-b    { border-bottom: 1px solid var(--ds-color-border); }
+.ds-border-none { border: none; }
+
+/* --- Border Radius --- */
+.ds-rounded-none { border-radius: var(--ds-radius-none); }
+.ds-rounded-sm   { border-radius: var(--ds-radius-sm); }
+.ds-rounded      { border-radius: var(--ds-radius-md); }
+.ds-rounded-lg   { border-radius: var(--ds-radius-lg); }
+.ds-rounded-xl   { border-radius: var(--ds-radius-xl); }
+.ds-rounded-2xl  { border-radius: var(--ds-radius-2xl); }
+.ds-rounded-full { border-radius: var(--ds-radius-full); }
+
+/* --- Shadow --- */
+.ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
+.ds-shadow    { box-shadow: var(--ds-shadow-md); }
+.ds-shadow-lg { box-shadow: var(--ds-shadow-lg); }
+.ds-shadow-none { box-shadow: none; }
+
+/* --- Opacity --- */
+.ds-opacity-0   { opacity: 0; }
+.ds-opacity-50  { opacity: 0.5; }
+.ds-opacity-100 { opacity: 1; }
+
+/* --- Cursor --- */
+.ds-cursor-pointer     { cursor: pointer; }
+.ds-cursor-default     { cursor: default; }
+.ds-cursor-not-allowed { cursor: not-allowed; }
+
+/* --- Transitions --- */
+.ds-tr-colors {
+  transition:
+    color var(--ds-duration-normal) var(--ds-ease-default),
+    background-color var(--ds-duration-normal) var(--ds-ease-default),
+    border-color var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-tr-all {
+  transition: all var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-tr-opacity {
+  transition: opacity var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+/* --- Animations --- */
+@keyframes ds-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes ds-slide-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes ds-scale-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes ds-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes ds-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.ds-animate-fade-in  { animation: ds-fade-in var(--ds-duration-fast) ease; }
+.ds-animate-slide-up { animation: ds-slide-up var(--ds-duration-normal) var(--ds-ease-out-expo); }
+.ds-animate-scale-in { animation: ds-scale-in var(--ds-duration-normal) var(--ds-ease-out-expo); }
+.ds-animate-spin     { animation: ds-spin 1s linear infinite; }
+.ds-animate-pulse    { animation: ds-pulse 2s ease-in-out infinite; }
+
+/* --- Scroll Reveal --- */
+.ds-reveal {
+  opacity: 0;
+  transform: translateY(32px);
+  transition:
+    opacity var(--ds-duration-slower) var(--ds-ease-out-expo),
+    transform var(--ds-duration-slower) var(--ds-ease-out-expo);
+}
+
+.ds-reveal.ds-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.ds-reveal-delay-1 { transition-delay: 100ms; }
+.ds-reveal-delay-2 { transition-delay: 200ms; }
+.ds-reveal-delay-3 { transition-delay: 300ms; }
+.ds-reveal-delay-4 { transition-delay: 400ms; }
+
+/* --- Grain Overlay (optional) --- */
+.ds-grain::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0.03;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+/* --- Accessibility --- */
+.ds-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+