@adamarant/designsystem 0.11.2

package/src/utilities/states.css

@@ -0,0 +1,182 @@
+/* ==========================================================================
+   Utilities: State Variants
+   Comprehensive hover, focus, active, disabled, focus-within, placeholder,
+   and group-hover modifiers for DS utility classes.
+
+   Pattern: {state}\:ds-{utility}:{pseudo} { property: value; }
+   Usage:   <div class="ds-bg-surface hover:ds-bg-hover">
+
+   Only semantic DS tokens are used — no hardcoded values.
+   ========================================================================== */
+
+/* --- Group Marker (enables group-hover on descendants) ---
+   Supports both .group and .ds-group for compatibility. */
+.ds-group { /* marker — no styles */ }
+
+/* ==========================================================================
+   HOVER
+   ========================================================================== */
+
+/* --- Hover: Background --- */
+.hover\:ds-bg-base:hover            { background-color: var(--ds-color-bg); }
+.hover\:ds-bg-subtle:hover          { background-color: var(--ds-color-surface); }
+.hover\:ds-bg-muted:hover           { background-color: var(--ds-color-surface-muted); }
+.hover\:ds-bg-elevated:hover        { background-color: var(--ds-color-surface-elevated); }
+.hover\:ds-bg-surface:hover         { background-color: var(--ds-color-surface); }
+.hover\:ds-bg-hover:hover           { background-color: var(--ds-color-surface-hover); }
+.hover\:ds-bg-inverted:hover        { background-color: var(--ds-color-inverted); }
+.hover\:ds-bg-overlay:hover         { background-color: var(--ds-color-overlay-hover); }
+.hover\:ds-bg-success:hover         { background-color: var(--ds-color-success); }
+.hover\:ds-bg-success-subtle:hover  { background-color: var(--ds-color-success-subtle); }
+.hover\:ds-bg-error:hover           { background-color: var(--ds-color-error); }
+.hover\:ds-bg-error-subtle:hover    { background-color: var(--ds-color-error-subtle); }
+.hover\:ds-bg-warning:hover         { background-color: var(--ds-color-warning); }
+.hover\:ds-bg-warning-subtle:hover  { background-color: var(--ds-color-warning-subtle); }
+.hover\:ds-bg-info:hover            { background-color: var(--ds-color-info); }
+.hover\:ds-bg-info-subtle:hover     { background-color: var(--ds-color-info-subtle); }
+.hover\:ds-bg-accent-blue:hover         { background-color: var(--ds-color-accent-blue); }
+.hover\:ds-bg-accent-blue-subtle:hover  { background-color: var(--ds-color-accent-blue-subtle); }
+.hover\:ds-bg-accent-purple:hover       { background-color: var(--ds-color-accent-purple); }
+.hover\:ds-bg-accent-purple-subtle:hover { background-color: var(--ds-color-accent-purple-subtle); }
+
+/* --- Hover: Text --- */
+.hover\:ds-text-primary:hover       { color: var(--ds-color-text); }
+.hover\:ds-text-secondary:hover     { color: var(--ds-color-text-secondary); }
+.hover\:ds-text-tertiary:hover      { color: var(--ds-color-text-tertiary); }
+.hover\:ds-text-on-inverted:hover   { color: var(--ds-color-on-inverted); }
+.hover\:ds-text-interactive:hover   { color: var(--ds-color-interactive-hover); }
+.hover\:ds-text-success:hover       { color: var(--ds-color-success); }
+.hover\:ds-text-error:hover         { color: var(--ds-color-error); }
+.hover\:ds-text-warning:hover       { color: var(--ds-color-warning); }
+.hover\:ds-text-info:hover          { color: var(--ds-color-info); }
+
+/* --- Hover: Border --- */
+.hover\:ds-border-default:hover     { border-color: var(--ds-color-border); }
+.hover\:ds-border-hover:hover       { border-color: var(--ds-color-border-hover); }
+.hover\:ds-border-active:hover      { border-color: var(--ds-color-border-active); }
+.hover\:ds-border-interactive:hover { border-color: var(--ds-color-interactive); }
+.hover\:ds-border-success:hover     { border-color: var(--ds-color-success); }
+.hover\:ds-border-error:hover       { border-color: var(--ds-color-error); }
+.hover\:ds-border-info:hover        { border-color: var(--ds-color-info); }
+
+/* --- Hover: Opacity --- */
+.hover\:ds-opacity-0:hover    { opacity: 0; }
+.hover\:ds-opacity-50:hover   { opacity: 0.5; }
+.hover\:ds-opacity-75:hover   { opacity: 0.75; }
+.hover\:ds-opacity-100:hover  { opacity: 1; }
+
+/* --- Hover: Transform --- */
+.hover\:ds-scale-105:hover    { transform: scale(1.05); }
+.hover\:ds-scale-110:hover    { transform: scale(1.10); }
+
+/* --- Hover: Decoration --- */
+.hover\:ds-underline:hover    { text-decoration: underline; text-underline-offset: 2px; }
+.hover\:ds-no-underline:hover { text-decoration: none; }
+
+/* --- Hover: Shadow --- */
+.hover\:ds-shadow:hover       { box-shadow: var(--ds-shadow-md); }
+.hover\:ds-shadow-lg:hover    { box-shadow: var(--ds-shadow-lg); }
+.hover\:ds-shadow-none:hover  { box-shadow: none; }
+
+/* ==========================================================================
+   FOCUS
+   ========================================================================== */
+
+.focus\:ds-outline-none:focus       { outline: none; }
+.focus\:ds-ring-0:focus             { box-shadow: none; }
+.focus\:ds-ring-2:focus             { box-shadow: 0 0 0 var(--ds-ring-width, 2px) var(--ds-color-interactive); }
+.focus\:ds-border-interactive:focus { border-color: var(--ds-color-interactive); }
+
+/* --- Focus-Visible (keyboard only) --- */
+.focus-visible\:ds-outline-none:focus-visible { outline: none; }
+.focus-visible\:ds-ring-2:focus-visible       { box-shadow: 0 0 0 var(--ds-ring-width, 2px) var(--ds-color-interactive); }
+
+/* --- Focus-Within --- */
+.focus-within\:ds-border-interactive:focus-within { border-color: var(--ds-color-interactive); }
+.focus-within\:ds-border-error:focus-within       { border-color: var(--ds-color-error); }
+
+/* ==========================================================================
+   ACTIVE
+   ========================================================================== */
+
+.active\:ds-bg-hover:active         { background-color: var(--ds-color-surface-hover); }
+.active\:ds-bg-muted:active         { background-color: var(--ds-color-surface-muted); }
+.active\:ds-bg-elevated:active      { background-color: var(--ds-color-surface-elevated); }
+.active\:ds-scale-95:active         { transform: scale(0.95); }
+.active\:ds-scale-98:active         { transform: scale(0.98); }
+
+/* ==========================================================================
+   DISABLED
+   ========================================================================== */
+
+.disabled\:ds-opacity-30:disabled,
+.disabled\:ds-opacity-30[aria-disabled="true"]  { opacity: 0.3; }
+
+.disabled\:ds-opacity-50:disabled,
+.disabled\:ds-opacity-50[aria-disabled="true"]  { opacity: 0.5; }
+
+.disabled\:ds-cursor-not-allowed:disabled,
+.disabled\:ds-cursor-not-allowed[aria-disabled="true"] { cursor: not-allowed; }
+
+.disabled\:ds-bg-subtle:disabled,
+.disabled\:ds-bg-subtle[aria-disabled="true"]   { background-color: var(--ds-color-surface); }
+
+.disabled\:ds-pointer-events-none:disabled,
+.disabled\:ds-pointer-events-none[aria-disabled="true"] { pointer-events: none; }
+
+/* ==========================================================================
+   PLACEHOLDER
+   ========================================================================== */
+
+.placeholder\:ds-text-tertiary::placeholder  { color: var(--ds-color-text-tertiary); }
+.placeholder\:ds-text-secondary::placeholder { color: var(--ds-color-text-secondary); }
+
+/* ==========================================================================
+   GROUP-HOVER
+   Descendants of .group or .ds-group, activated on parent hover.
+   Uses both direct-child and any-descendant for flexibility.
+   ========================================================================== */
+
+/* Text */
+.group:hover .group-hover\:ds-text-primary,
+.ds-group:hover .group-hover\:ds-text-primary { color: var(--ds-color-text); }
+
+.group:hover .group-hover\:ds-text-secondary,
+.ds-group:hover .group-hover\:ds-text-secondary { color: var(--ds-color-text-secondary); }
+
+.group:hover .group-hover\:ds-text-interactive,
+.ds-group:hover .group-hover\:ds-text-interactive { color: var(--ds-color-interactive-hover); }
+
+.group:hover .group-hover\:ds-text-success,
+.ds-group:hover .group-hover\:ds-text-success { color: var(--ds-color-success); }
+
+.group:hover .group-hover\:ds-text-info,
+.ds-group:hover .group-hover\:ds-text-info { color: var(--ds-color-info); }
+
+/* Opacity */
+.group:hover .group-hover\:ds-opacity-100,
+.ds-group:hover .group-hover\:ds-opacity-100 { opacity: 1; }
+
+.group:hover .group-hover\:ds-opacity-0,
+.ds-group:hover .group-hover\:ds-opacity-0 { opacity: 0; }
+
+/* Transform */
+.group:hover .group-hover\:ds-scale-105,
+.ds-group:hover .group-hover\:ds-scale-105 { transform: scale(1.05); }
+
+.group:hover .group-hover\:ds-scale-110,
+.ds-group:hover .group-hover\:ds-scale-110 { transform: scale(1.10); }
+
+.group:hover .group-hover\:ds-translate-x-1,
+.ds-group:hover .group-hover\:ds-translate-x-1 { transform: translateX(0.25rem); }
+
+.group:hover .group-hover\:ds-translate-y-0,
+.ds-group:hover .group-hover\:ds-translate-y-0 { transform: translateY(0); }
+
+/* Border */
+.group:hover .group-hover\:ds-border-active,
+.ds-group:hover .group-hover\:ds-border-active { border-color: var(--ds-color-border-active); }
+
+/* Visibility */
+.group:hover .group-hover\:ds-visible,
+.ds-group:hover .group-hover\:ds-visible { visibility: visible; }

package/src/utilities/text.css

@@ -0,0 +1,381 @@
+/* ==========================================================================
+   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); }
+.ds-text-6xl  { font-size: var(--ds-text-6xl); }
+.ds-text-7xl  { font-size: var(--ds-text-7xl); }
+
+/* --- Text Size (responsive) --- */
+@media (min-width: 640px) {
+  .ds-sm\:text-4xl { font-size: var(--ds-text-4xl); }
+  .ds-sm\:text-5xl { font-size: var(--ds-text-5xl); }
+}
+@media (min-width: 768px) {
+  .ds-md\:text-lg  { font-size: var(--ds-text-lg); }
+  .ds-md\:text-xl  { font-size: var(--ds-text-xl); }
+  .ds-md\:text-2xl { font-size: var(--ds-text-2xl); }
+  .ds-md\:text-3xl { font-size: var(--ds-text-3xl); }
+  .ds-md\:text-4xl { font-size: var(--ds-text-4xl); }
+  .ds-md\:text-6xl { font-size: var(--ds-text-6xl); }
+}
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
+  .ds-lg\:text-xl  { font-size: var(--ds-text-xl); }
+  .ds-lg\:text-2xl { font-size: var(--ds-text-2xl); }
+  .ds-lg\:text-3xl { font-size: var(--ds-text-3xl); }
+  .ds-lg\:text-4xl { font-size: var(--ds-text-4xl); }
+  .ds-lg\:text-5xl { font-size: var(--ds-text-5xl); }
+  .ds-lg\:text-7xl { font-size: var(--ds-text-7xl); }
+}
+
+/* --- 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: start; }
+.ds-text-center { text-align: center; }
+.ds-text-right  { text-align: end; }
+.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); }
+
+/* --- Text Color (extended) --- */
+.ds-text-interactive { color: var(--ds-color-interactive); }
+.ds-text-on-inverted { color: var(--ds-color-on-inverted); }
+
+/* --- Theme-independent colors (ignore light/dark toggle) --- */
+.ds-text-always-white { color: var(--ds-color-static-white); }
+.ds-text-always-black { color: var(--ds-color-static-black); }
+
+/* --- 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-surface); }
+.ds-bg-elevated { background-color: var(--ds-color-surface-elevated); }
+.ds-bg-inverted { background-color: var(--ds-color-inverted); color: var(--ds-color-on-inverted); }
+.ds-bg-hover    { background-color: var(--ds-color-surface-hover); }
+.ds-bg-muted    { background-color: var(--ds-color-surface-muted); }
+.ds-bg-overlay  { background-color: var(--ds-color-overlay); }
+.ds-bg-nav      { background-color: var(--ds-color-nav-bg); }
+
+/* Status backgrounds */
+.ds-bg-error          { background-color: var(--ds-color-error); }
+.ds-bg-success        { background-color: var(--ds-color-success); }
+.ds-bg-warning        { background-color: var(--ds-color-warning); }
+.ds-bg-info           { background-color: var(--ds-color-info); }
+.ds-bg-error-subtle   { background-color: var(--ds-color-error-subtle); }
+.ds-bg-success-subtle { background-color: var(--ds-color-success-subtle); }
+.ds-bg-warning-subtle { background-color: var(--ds-color-warning-subtle); }
+.ds-bg-info-subtle    { background-color: var(--ds-color-info-subtle); }
+
+/* Accent backgrounds */
+.ds-bg-accent-blue          { background-color: var(--ds-color-accent-blue); }
+.ds-bg-accent-purple        { background-color: var(--ds-color-accent-purple); }
+.ds-bg-accent-green         { background-color: var(--ds-color-accent-green); }
+.ds-bg-accent-orange        { background-color: var(--ds-color-accent-orange); }
+.ds-bg-accent-blue-subtle   { background-color: var(--ds-color-accent-blue-subtle); }
+.ds-bg-accent-purple-subtle { background-color: var(--ds-color-accent-purple-subtle); }
+.ds-bg-accent-green-subtle  { background-color: var(--ds-color-accent-green-subtle); }
+.ds-bg-accent-orange-subtle { background-color: var(--ds-color-accent-orange-subtle); }
+
+/* Accent text */
+.ds-text-accent-blue   { color: var(--ds-color-accent-blue); }
+.ds-text-accent-purple { color: var(--ds-color-accent-purple); }
+.ds-text-accent-green  { color: var(--ds-color-accent-green); }
+.ds-text-accent-orange { color: var(--ds-color-accent-orange); }
+
+/* --- 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); }
+.ds-tracking-wider   { letter-spacing: var(--ds-tracking-wider); }
+
+/* --- 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-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ds-line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* --- Text Extras --- */
+.ds-line-through { text-decoration: line-through; }
+.ds-break-all    { word-break: break-all; }
+.ds-list-disc    { list-style-type: disc; }
+.ds-list-inside  { list-style-position: inside; }
+
+/* --- Font Family --- */
+.ds-font-mono { font-family: var(--ds-font-mono); }
+.ds-font-sans { font-family: var(--ds-font-sans); }
+
+/* --- Border --- */
+.ds-border      { border: 1px solid var(--ds-color-border); }
+.ds-border-t    { border-block-start: 1px solid var(--ds-color-border); }
+.ds-border-b    { border-block-end: 1px solid var(--ds-color-border); }
+.ds-border-l    { border-inline-start: 1px solid var(--ds-color-border); }
+.ds-border-r    { border-inline-end: 1px solid var(--ds-color-border); }
+.ds-border-y    { border-block-start: 1px solid var(--ds-color-border); border-block-end: 1px solid var(--ds-color-border); }
+.ds-border-none { border: none; }
+
+/* --- Border Color --- */
+.ds-border-error       { border-color: var(--ds-color-error); }
+.ds-border-success     { border-color: var(--ds-color-success); }
+.ds-border-interactive { border-color: var(--ds-color-interactive); }
+.ds-border-hover       { border-color: var(--ds-color-border-hover); }
+.ds-border-active      { border-color: var(--ds-color-border-active); }
+.ds-border-nav         { border-color: var(--ds-color-nav-border); }
+
+/* --- Divide --- */
+.ds-divide-y > * + * { border-block-start: 1px solid var(--ds-color-border); }
+
+/* --- 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-3xl  { border-radius: 1.5rem; }
+.ds-rounded-full { border-radius: var(--ds-radius-full); }
+
+/* --- Border Radius (directional) --- */
+.ds-rounded-t     { border-start-start-radius: var(--ds-radius-md); border-start-end-radius: var(--ds-radius-md); }
+.ds-rounded-b     { border-end-start-radius: var(--ds-radius-md); border-end-end-radius: var(--ds-radius-md); }
+.ds-rounded-t-2xl { border-start-start-radius: var(--ds-radius-2xl); border-start-end-radius: var(--ds-radius-2xl); }
+.ds-rounded-b-2xl { border-end-start-radius: var(--ds-radius-2xl); border-end-end-radius: var(--ds-radius-2xl); }
+
+/* --- 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-25  { opacity: 0.25; }
+.ds-opacity-50  { opacity: 0.5; }
+.ds-opacity-60  { opacity: 0.6; }
+.ds-opacity-70  { opacity: 0.7; }
+.ds-opacity-75  { opacity: 0.75; }
+.ds-opacity-100 { opacity: 1; }
+
+/* --- Cursor --- */
+.ds-cursor-pointer     { cursor: pointer; }
+.ds-cursor-default     { cursor: default; }
+.ds-cursor-not-allowed { cursor: not-allowed; }
+.ds-cursor-grab        { cursor: grab; }
+.ds-cursor-grabbing    { cursor: grabbing; }
+
+/* --- Interaction --- */
+.ds-pointer-events-none { pointer-events: none; }
+.ds-select-none         { user-select: none; }
+.ds-whitespace-nowrap   { white-space: nowrap; }
+.ds-whitespace-pre-wrap { white-space: pre-wrap; }
+
+/* --- Backdrop --- */
+.ds-backdrop-blur {
+  backdrop-filter: blur(20px) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
+}
+
+.ds-backdrop-blur-sm {
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* --- Outline --- */
+.ds-outline-none { outline: none; }
+
+/* --- Transform --- */
+.-ds-translate-y-1\/2 { transform: translateY(-50%); }
+.-ds-translate-x-1\/2 { transform: translateX(-50%); }
+.ds-translate-y-full  { transform: translateY(100%); }
+.ds-scale-105         { transform: scale(1.05); }
+.ds-rotate-180        { transform: rotate(180deg); }
+
+/* --- Placeholder --- */
+.ds-placeholder-tertiary::placeholder { color: var(--ds-color-text-tertiary); }
+
+/* --- 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);
+}
+
+.ds-tr-transform {
+  transition: transform var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+/* --- Duration --- */
+.ds-duration-fast   { transition-duration: var(--ds-duration-fast); }
+.ds-duration-normal { transition-duration: var(--ds-duration-normal); }
+.ds-duration-slow   { transition-duration: var(--ds-duration-slow); }
+.ds-duration-slower { transition-duration: var(--ds-duration-slower); }
+
+/* --- Easing --- */
+.ds-ease-default  { transition-timing-function: var(--ds-ease-default); }
+.ds-ease-out      { transition-timing-function: var(--ds-ease-out); }
+.ds-ease-out-expo { transition-timing-function: var(--ds-ease-out-expo); }
+
+/* --- 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;
+}
+
+/* --- Responsive: md (768px) — small text sizes --- */
+@media (min-width: 768px) {
+  .ds-md\:text-xs   { font-size: var(--ds-text-xs); }
+  .ds-md\:text-sm   { font-size: var(--ds-text-sm); }
+  .ds-md\:text-base { font-size: var(--ds-text-base); }
+  .ds-md\:text-5xl  { font-size: var(--ds-text-5xl); }
+}