origam 2.5.0 → 2.6.2

package/dist/src/assets/css/tokens/light.css

@@ -1,71 +1,71 @@
 :root,
 [data-theme="light"] {
-  --origam-color__surface---default: #ffffff;
-  --origam-color__surface---raised: #ffffff;
-  --origam-color__surface---overlay: #f5f5f5;
-  --origam-color__surface---sunken: #fafafa;
-  --origam-color__surface---disabled: #e6e6e6;
-  --origam-color__text---primary: #171717;
-  --origam-color__text---secondary: #525252;
-  --origam-color__text---disabled: #a3a3a3;
-  --origam-color__text---inverse: #ffffff;
-  --origam-color__text---onColor: #ffffff;
-  --origam-color__border---default: #a3a3a3;
-  --origam-color__border---subtle: #d4d4d4;
-  --origam-color__border---strong: #404040;
-  --origam-color__border---focus: #7c3aed;
-  --origam-color__action--primary---bg: #7c3aed;
-  --origam-color__action--primary---bgHover: #6d28d9;
-  --origam-color__action--primary---bgSubtle: #f5f3ff;
-  --origam-color__action--primary---bgDisabled: #e6e6e6;
-  --origam-color__action--primary---fg: #ffffff;
-  --origam-color__action--primary---fgSubtle: #6d28d9;
-  --origam-color__action--primary---fgDisabled: #a3a3a3;
-  --origam-color__action--secondary---bg: #e6e6e6;
-  --origam-color__action--secondary---bgHover: #d4d4d4;
-  --origam-color__action--secondary---bgDisabled: #f5f5f5;
-  --origam-color__action--secondary---fg: #262626;
-  --origam-color__action--secondary---fgDisabled: #a3a3a3;
+  --origam-color__surface---default: var(--origam-color__neutral---0);
+  --origam-color__surface---raised: var(--origam-color__neutral---0);
+  --origam-color__surface---overlay: var(--origam-color__neutral---100);
+  --origam-color__surface---sunken: var(--origam-color__neutral---50);
+  --origam-color__surface---disabled: var(--origam-color__neutral---200);
+  --origam-color__text---primary: var(--origam-color__neutral---900);
+  --origam-color__text---secondary: var(--origam-color__neutral---600);
+  --origam-color__text---disabled: var(--origam-color__neutral---400);
+  --origam-color__text---inverse: var(--origam-color__neutral---0);
+  --origam-color__text---onColor: var(--origam-color__neutral---0);
+  --origam-color__border---default: var(--origam-color__neutral---400);
+  --origam-color__border---subtle: var(--origam-color__neutral---300);
+  --origam-color__border---strong: var(--origam-color__neutral---700);
+  --origam-color__border---focus: var(--origam-color__primary---600);
+  --origam-color__action--primary---bg: var(--origam-color__primary---600);
+  --origam-color__action--primary---bgHover: var(--origam-color__primary---700);
+  --origam-color__action--primary---bgSubtle: var(--origam-color__primary---50);
+  --origam-color__action--primary---bgDisabled: var(--origam-color__neutral---200);
+  --origam-color__action--primary---fg: var(--origam-color__neutral---0);
+  --origam-color__action--primary---fgSubtle: var(--origam-color__primary---700);
+  --origam-color__action--primary---fgDisabled: var(--origam-color__neutral---400);
+  --origam-color__action--secondary---bg: var(--origam-color__neutral---200);
+  --origam-color__action--secondary---bgHover: var(--origam-color__neutral---300);
+  --origam-color__action--secondary---bgDisabled: var(--origam-color__neutral---100);
+  --origam-color__action--secondary---fg: var(--origam-color__neutral---800);
+  --origam-color__action--secondary---fgDisabled: var(--origam-color__neutral---400);
   --origam-color__action--ghost---bg: rgba(0, 0, 0, 0);
-  --origam-color__action--ghost---bgHover: #f5f5f5;
+  --origam-color__action--ghost---bgHover: var(--origam-color__neutral---100);
   --origam-color__action--ghost---bgDisabled: rgba(0, 0, 0, 0);
-  --origam-color__action--ghost---fg: #7c3aed;
-  --origam-color__action--ghost---fgDisabled: #a3a3a3;
-  --origam-color__feedback--success---bg: #4caf50;
-  --origam-color__feedback--success---bgSubtle: #f0fdf4;
-  --origam-color__feedback--success---fg: #ffffff;
-  --origam-color__feedback--success---fgSubtle: #16a34a;
-  --origam-color__feedback--success---border: #4caf50;
-  --origam-color__feedback--warning---bg: #fb8c00;
-  --origam-color__feedback--warning---bgSubtle: #fffbeb;
-  --origam-color__feedback--warning---fg: #ffffff;
-  --origam-color__feedback--warning---fgSubtle: #b45309;
-  --origam-color__feedback--warning---border: #fb8c00;
-  --origam-color__feedback--danger---bg: #ef4444;
-  --origam-color__feedback--danger---bgSubtle: #fff1f2;
-  --origam-color__feedback--danger---fg: #ffffff;
-  --origam-color__feedback--danger---fgSubtle: #b91c1c;
-  --origam-color__feedback--danger---border: #cf6679;
-  --origam-color__feedback--info---bg: #2196f3;
-  --origam-color__feedback--info---bgSubtle: #eff6ff;
-  --origam-color__feedback--info---fg: #ffffff;
-  --origam-color__feedback--info---fgSubtle: #1e40af;
-  --origam-color__feedback--info---border: #2196f3;
-  --origam-color__overlay---scrim: #ffffff;
+  --origam-color__action--ghost---fg: var(--origam-color__primary---600);
+  --origam-color__action--ghost---fgDisabled: var(--origam-color__neutral---400);
+  --origam-color__feedback--success---bg: var(--origam-color__green---500);
+  --origam-color__feedback--success---bgSubtle: var(--origam-color__green---50);
+  --origam-color__feedback--success---fg: var(--origam-color__neutral---0);
+  --origam-color__feedback--success---fgSubtle: var(--origam-color__green---600);
+  --origam-color__feedback--success---border: var(--origam-color__green---500);
+  --origam-color__feedback--warning---bg: var(--origam-color__amber---600);
+  --origam-color__feedback--warning---bgSubtle: var(--origam-color__amber---50);
+  --origam-color__feedback--warning---fg: var(--origam-color__neutral---0);
+  --origam-color__feedback--warning---fgSubtle: var(--origam-color__amber---700);
+  --origam-color__feedback--warning---border: var(--origam-color__amber---600);
+  --origam-color__feedback--danger---bg: var(--origam-color__red---500);
+  --origam-color__feedback--danger---bgSubtle: var(--origam-color__red---50);
+  --origam-color__feedback--danger---fg: var(--origam-color__neutral---0);
+  --origam-color__feedback--danger---fgSubtle: var(--origam-color__red---700);
+  --origam-color__feedback--danger---border: var(--origam-color__red---400);
+  --origam-color__feedback--info---bg: var(--origam-color__blue---500);
+  --origam-color__feedback--info---bgSubtle: var(--origam-color__blue---50);
+  --origam-color__feedback--info---fg: var(--origam-color__neutral---0);
+  --origam-color__feedback--info---fgSubtle: var(--origam-color__blue---700);
+  --origam-color__feedback--info---border: var(--origam-color__blue---500);
+  --origam-color__overlay---scrim: var(--origam-color---white);
   --origam-gradient---sunset: linear-gradient(135deg, #ff7e5f, #feb47b);
   --origam-gradient---ocean: linear-gradient(135deg, #2193b0, #6dd5ed);
   --origam-gradient---forest: linear-gradient(135deg, #134e5e, #71b280);
   --origam-gradient---fire: linear-gradient(135deg, #f12711, #f5af19);
   --origam-gradient---midnight: linear-gradient(135deg, #232526, #414345);
-  --origam-btn---background-color: #e6e6e6;
-  --origam-btn---color: #262626;
-  --origam-btn---background-color-hover: #d4d4d4;
-  --origam-btn---background-color-disabled: #e6e6e6;
-  --origam-btn---color-disabled: #a3a3a3;
-  --origam-btn---border-radius: 4px;
-  --origam-btn---border-radius-icon: 9999px;
-  --origam-btn---border-radius-rounded: 24px;
-  --origam-btn---border-width: 0px;
+  --origam-btn---background-color: var(--origam-color__action--secondary---bg);
+  --origam-btn---color: var(--origam-color__action--secondary---fg);
+  --origam-btn---background-color-hover: var(--origam-color__action--secondary---bgHover);
+  --origam-btn---background-color-disabled: var(--origam-color__action--primary---bgDisabled);
+  --origam-btn---color-disabled: var(--origam-color__action--primary---fgDisabled);
+  --origam-btn---border-radius: var(--origam-radius---sm);
+  --origam-btn---border-radius-icon: var(--origam-radius---full);
+  --origam-btn---border-radius-rounded: var(--origam-radius---2xl);
+  --origam-btn---border-width: var(--origam-border__width---0);
   --origam-btn---border-style: solid;
   --origam-btn---border-color: currentColor;
   --origam-btn---position: relative;
@@ -80,182 +80,183 @@
   --origam-btn---height-md: 36px;
   --origam-btn---height-lg: 44px;
   --origam-btn---height-xl: 52px;
-  --origam-btn---padding-xs: 8px;
-  --origam-btn---padding-sm: 12px;
-  --origam-btn---padding-md: 16px;
-  --origam-btn---padding-lg: 20px;
-  --origam-btn---padding-xl: 24px;
-  --origam-btn---font-size: 0.875rem;
-  --origam-btn---font-weight: 500;
-  --origam-btn---letter-spacing: 0.0893em;
+  --origam-btn---padding-xs: var(--origam-space---2);
+  --origam-btn---padding-sm: var(--origam-space---3);
+  --origam-btn---padding-md: var(--origam-space---4);
+  --origam-btn---padding-lg: var(--origam-space---5);
+  --origam-btn---padding-xl: var(--origam-space---6);
+  --origam-btn---font-size: var(--origam-font__size---md);
+  --origam-btn---font-weight: var(--origam-font__weight---medium);
+  --origam-btn---letter-spacing: var(--origam-font__letterSpacing---widest);
   --origam-btn---line-height: 1;
   --origam-btn---text-decoration: none;
-  --origam-btn---text-indent: 0.0893em;
+  --origam-btn---text-indent: var(--origam-font__letterSpacing---widest);
   --origam-btn---opacity: 1;
-  --origam-btn---opacity-disabled: 0.5;
-  --origam-btn---opacity-plain: 0.7;
-  --origam-btn---overlay-opacity-hover: 0.12;
-  --origam-btn---box-shadow-elevated: 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
-  --origam-btn---background-color-tonal: #f5f5f5;
-  --origam-btn---border-width-outlined: 1px;
-  --origam-btn---border-width-ghost: 1px;
+  --origam-btn---opacity-disabled: var(--origam-opacity---50);
+  --origam-btn---opacity-plain: var(--origam-opacity---70);
+  --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
+  --origam-btn---box-shadow-elevated: var(--origam-shadow---md);
+  --origam-btn---background-color-tonal: var(--origam-color__surface---overlay);
+  --origam-btn---background-color-tonal-active: var(--origam-color__surface---raised);
+  --origam-btn---box-shadow-tonal-active: var(--origam-shadow---xs);
+  --origam-btn---border-width-outlined: var(--origam-border__width---thin);
+  --origam-btn---border-width-ghost: var(--origam-border__width---thin);
   --origam-btn---backdrop-filter-ghost: blur(8px);
-  --origam-btn---transition-duration: 280ms;
-  --origam-btn---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-btn--primary---background-color: #7c3aed;
-  --origam-btn--primary---color: #ffffff;
-  --origam-btn--primary---background-color-hover: #6d28d9;
-  --origam-btn--ghost---background-color: rgba(0, 0, 0, 0);
-  --origam-btn--ghost---color: #7c3aed;
-  --origam-btn--ghost---background-color-hover: #f5f5f5;
-  --origam-btn--success---background-color: #4caf50;
-  --origam-btn--success---color: #ffffff;
-  --origam-btn--warning---background-color: #fb8c00;
-  --origam-btn--warning---color: #ffffff;
-  --origam-btn--danger---background-color: #ef4444;
-  --origam-btn--danger---color: #ffffff;
-  --origam-btn--info---background-color: #2196f3;
-  --origam-btn--info---color: #ffffff;
-  --origam-btn-group---border-width: 0px;
+  --origam-btn---transition-duration: var(--origam-motion__duration---slow);
+  --origam-btn---transition-easing: var(--origam-motion__easing---standard);
+  --origam-btn--primary---background-color: var(--origam-color__action--primary---bg);
+  --origam-btn--primary---color: var(--origam-color__action--primary---fg);
+  --origam-btn--primary---background-color-hover: var(--origam-color__action--primary---bgHover);
+  --origam-btn--ghost---background-color: var(--origam-color__action--ghost---bg);
+  --origam-btn--ghost---color: var(--origam-color__action--ghost---fg);
+  --origam-btn--ghost---background-color-hover: var(--origam-color__action--ghost---bgHover);
+  --origam-btn--success---background-color: var(--origam-color__feedback--success---bg);
+  --origam-btn--success---color: var(--origam-color__feedback--success---fg);
+  --origam-btn--warning---background-color: var(--origam-color__feedback--warning---bg);
+  --origam-btn--warning---color: var(--origam-color__feedback--warning---fg);
+  --origam-btn--danger---background-color: var(--origam-color__feedback--danger---bg);
+  --origam-btn--danger---color: var(--origam-color__feedback--danger---fg);
+  --origam-btn--info---background-color: var(--origam-color__feedback--info---bg);
+  --origam-btn--info---color: var(--origam-color__feedback--info---fg);
+  --origam-btn-group---border-width: var(--origam-border__width---0);
   --origam-btn-group---border-style: solid;
-  --origam-btn-group---border-color: #d4d4d4;
-  --origam-btn-group---border-radius: 4px;
+  --origam-btn-group---border-color: var(--origam-color__border---subtle);
+  --origam-btn-group---border-radius: var(--origam-radius---sm);
   --origam-card---display: block;
   --origam-card---overflow: hidden;
   --origam-card---overflow-wrap: break-word;
   --origam-card---position: relative;
-  --origam-card---z-index: 0;
-  --origam-card---background: #ffffff;
-  --origam-card---color: #171717;
-  --origam-card---box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
-  --origam-card---box-shadow-hover: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
-  --origam-card---box-shadow-elevated: 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
-  --origam-card---opacity: 1;
-  --origam-card---opacity-disabled: 0.6;
+  --origam-card---z-index: var(--origam-zIndex---base);
+  --origam-card---background: var(--origam-color__surface---raised);
+  --origam-card---color: var(--origam-color__text---primary);
+  --origam-card---box-shadow: var(--origam-shadow---sm);
+  --origam-card---box-shadow-hover: var(--origam-shadow---lg);
+  --origam-card---box-shadow-elevated: var(--origam-shadow---md);
+  --origam-card---opacity: var(--origam-opacity---100);
+  --origam-card---opacity-disabled: var(--origam-opacity---60);
   --origam-card---density: 0px;
   --origam-card---pointer-events: auto;
   --origam-card---user-select: auto;
-  --origam-card---cursor: auto;
+  --origam-card---cursor: inherit;
   --origam-card---text-decoration: none;
-  --origam-card---transition-duration: 280ms;
+  --origam-card---transition-duration: var(--origam-motion__duration---slow);
   --origam-card---transition-property: box-shadow, opacity, background;
-  --origam-card---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-card---border-color: #d4d4d4;
+  --origam-card---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-card---border-color: var(--origam-color__border---subtle);
   --origam-card---border-style: solid;
-  --origam-card---border-top-width: 0px;
-  --origam-card---border-left-width: 0px;
-  --origam-card---border-bottom-width: 0px;
-  --origam-card---border-right-width: 0px;
-  --origam-card---border-start-start-radius: 0px;
-  --origam-card---border-start-end-radius: 0px;
-  --origam-card---border-end-start-radius: 0px;
-  --origam-card---border-end-end-radius: 0px;
-  --origam-card---border-radius-rounded: 8px;
-  --origam-card---padding-block-start: 0px;
-  --origam-card---padding-block-end: 0px;
-  --origam-card---padding-inline-start: 0px;
-  --origam-card---padding-inline-end: 0px;
-  --origam-card---margin-block-start: 0px;
-  --origam-card---margin-block-end: 0px;
-  --origam-card---margin-inline-start: 0px;
-  --origam-card---margin-inline-end: 0px;
-  --origam-card---overlay-opacity-hover: 0.12;
-  --origam-card---overlay-opacity-disabled: 0;
-  --origam-card__overlay---background-color: #ffffff;
+  --origam-card---border-top-width: var(--origam-border__width---0);
+  --origam-card---border-left-width: var(--origam-border__width---0);
+  --origam-card---border-bottom-width: var(--origam-border__width---0);
+  --origam-card---border-right-width: var(--origam-border__width---0);
+  --origam-card---border-start-start-radius: var(--origam-radius---none);
+  --origam-card---border-start-end-radius: var(--origam-radius---none);
+  --origam-card---border-end-start-radius: var(--origam-radius---none);
+  --origam-card---border-end-end-radius: var(--origam-radius---none);
+  --origam-card---border-radius-rounded: var(--origam-radius---md);
+  --origam-card---padding-block-start: var(--origam-space---0);
+  --origam-card---padding-block-end: var(--origam-space---0);
+  --origam-card---padding-inline-start: var(--origam-space---0);
+  --origam-card---padding-inline-end: var(--origam-space---0);
+  --origam-card---margin-block-start: var(--origam-space---0);
+  --origam-card---margin-block-end: var(--origam-space---0);
+  --origam-card---margin-inline-start: var(--origam-space---0);
+  --origam-card---margin-inline-end: var(--origam-space---0);
+  --origam-card---overlay-opacity-hover: var(--origam-opacity---12);
+  --origam-card---overlay-opacity-disabled: var(--origam-opacity---0);
+  --origam-card__overlay---background-color: var(--origam-color__overlay---scrim);
   --origam-card__overlay---border-radius: inherit;
-  --origam-card__overlay---opacity: 0;
+  --origam-card__overlay---opacity: var(--origam-opacity---0);
   --origam-card__overlay---pointer-events: none;
   --origam-card__overlay---position: absolute;
-  --origam-card__overlay---position-bottom: 0px;
-  --origam-card__overlay---position-left: 0px;
-  --origam-card__overlay---position-right: 0px;
-  --origam-card__overlay---position-top: 0px;
+  --origam-card__overlay---position-bottom: var(--origam-space---0);
+  --origam-card__overlay---position-left: var(--origam-space---0);
+  --origam-card__overlay---position-right: var(--origam-space---0);
+  --origam-card__overlay---position-top: var(--origam-space---0);
   --origam-card__overlay---transition-property: opacity;
-  --origam-card__overlay---transition-duration: 200ms;
-  --origam-card__overlay---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-card__overlay---transition-duration: var(--origam-motion__duration---medium);
+  --origam-card__overlay---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-card__underlay---position: absolute;
   --origam-card__before---border-radius: inherit;
-  --origam-card__before---bottom: 0px;
+  --origam-card__before---bottom: var(--origam-space---0);
   --origam-card__before---content: "";
   --origam-card__before---display: block;
-  --origam-card__before---left: 0px;
+  --origam-card__before---left: var(--origam-space---0);
   --origam-card__before---pointer-events: none;
   --origam-card__before---position: absolute;
-  --origam-card__before---right: 0px;
-  --origam-card__before---top: 0px;
+  --origam-card__before---right: var(--origam-space---0);
+  --origam-card__before---top: var(--origam-space---0);
   --origam-card__before---transition: inherit;
-  --origam-card__before---opacity: 1;
+  --origam-card__before---opacity: var(--origam-opacity---100);
   --origam-card__before---z-index: -1;
-  --origam-card__before---box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
+  --origam-card__before---box-shadow: var(--origam-shadow---sm);
   --origam-card__after---border-radius: inherit;
-  --origam-card__after---bottom: 0px;
+  --origam-card__after---bottom: var(--origam-space---0);
   --origam-card__after---content: "";
   --origam-card__after---display: block;
-  --origam-card__after---left: 0px;
+  --origam-card__after---left: var(--origam-space---0);
   --origam-card__after---pointer-events: none;
   --origam-card__after---position: absolute;
-  --origam-card__after---right: 0px;
-  --origam-card__after---top: 0px;
+  --origam-card__after---right: var(--origam-space---0);
+  --origam-card__after---top: var(--origam-space---0);
   --origam-card__after---transition: inherit;
   --origam-card__after---z-index: 1;
-  --origam-card__after---opacity: 0;
-  --origam-card__after---box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
-  --origam-chip---background-color: #f5f5f5;
-  --origam-chip---color: #171717;
+  --origam-card__after---opacity: var(--origam-opacity---0);
+  --origam-card__after---box-shadow: var(--origam-shadow---lg);
+  --origam-chip---background-color: var(--origam-color__surface---overlay);
+  --origam-chip---color: var(--origam-color__text---primary);
   --origam-chip---border-color: currentColor;
   --origam-chip---border-style: solid;
-  --origam-chip---border-width: 0px;
-  --origam-chip---border-radius: 9999px;
-  --origam-chip---border-radius-label: 4px;
-  --origam-chip---font-weight: 400;
-  --origam-chip---font-size: 0.875rem;
-  --origam-chip---opacity-disabled: 0.32;
+  --origam-chip---border-width: var(--origam-border__width---0);
+  --origam-chip---border-radius: var(--origam-radius---full);
+  --origam-chip---border-radius-label: var(--origam-radius---sm);
+  --origam-chip---font-weight: var(--origam-font__weight---regular);
+  --origam-chip---opacity-disabled: var(--origam-opacity---32);
   --origam-chip---density: 0px;
-  --origam-chip---overlay-opacity: 0;
+  --origam-chip---overlay-opacity: var(--origam-opacity---0);
   --origam-chip---overlay-opacity-hover: 0.24;
-  --origam-chip---overlay-opacity-focus: 0.12;
-  --origam-chip---overlay-opacity-active: 0.12;
-  --origam-chip---transition-duration: 200ms;
-  --origam-chip---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-chip---font-size-xs: 0.625rem;
-  --origam-chip---font-size-sm: 0.75rem;
-  --origam-chip---font-size-md: 0.875rem;
-  --origam-chip---font-size-lg: 1rem;
-  --origam-chip---font-size-xl: 1.125rem;
-  --origam-chip---padding-xs: 8px;
+  --origam-chip---overlay-opacity-focus: var(--origam-opacity---12);
+  --origam-chip---overlay-opacity-active: var(--origam-opacity---12);
+  --origam-chip---transition-duration: var(--origam-motion__duration---medium);
+  --origam-chip---transition-easing: var(--origam-motion__easing---standard);
+  --origam-chip---font-size-xs: var(--origam-font__size---xs);
+  --origam-chip---font-size-sm: var(--origam-font__size---sm);
+  --origam-chip---font-size-md: var(--origam-font__size---md);
+  --origam-chip---font-size-lg: var(--origam-font__size---lg);
+  --origam-chip---font-size-xl: var(--origam-font__size---xl);
+  --origam-chip---padding-xs: var(--origam-space---2);
   --origam-chip---padding-sm: 10px;
-  --origam-chip---padding-md: 12px;
+  --origam-chip---padding-md: var(--origam-space---3);
   --origam-chip---padding-lg: 14px;
   --origam-chip---padding-xl: 17px;
-  --origam-chip--selected---background-color: #7c3aed;
-  --origam-chip--selected---color: #ffffff;
-  --origam-chip--success---background-color: #f0fdf4;
-  --origam-chip--success---color: #16a34a;
-  --origam-chip--success---border-color: #4caf50;
-  --origam-chip--warning---background-color: #fffbeb;
-  --origam-chip--warning---color: #b45309;
-  --origam-chip--warning---border-color: #fb8c00;
-  --origam-chip--danger---background-color: #fff1f2;
-  --origam-chip--danger---color: #b91c1c;
-  --origam-chip--danger---border-color: #cf6679;
-  --origam-chip--info---background-color: #eff6ff;
-  --origam-chip--info---color: #1e40af;
-  --origam-chip--info---border-color: #2196f3;
+  --origam-chip--selected---background-color: var(--origam-color__action--primary---bg);
+  --origam-chip--selected---color: var(--origam-color__action--primary---fg);
+  --origam-chip--success---background-color: var(--origam-color__feedback--success---bgSubtle);
+  --origam-chip--success---color: var(--origam-color__feedback--success---fgSubtle);
+  --origam-chip--success---border-color: var(--origam-color__feedback--success---border);
+  --origam-chip--warning---background-color: var(--origam-color__feedback--warning---bgSubtle);
+  --origam-chip--warning---color: var(--origam-color__feedback--warning---fgSubtle);
+  --origam-chip--warning---border-color: var(--origam-color__feedback--warning---border);
+  --origam-chip--danger---background-color: var(--origam-color__feedback--danger---bgSubtle);
+  --origam-chip--danger---color: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-chip--danger---border-color: var(--origam-color__feedback--danger---border);
+  --origam-chip--info---background-color: var(--origam-color__feedback--info---bgSubtle);
+  --origam-chip--info---color: var(--origam-color__feedback--info---fgSubtle);
+  --origam-chip--info---border-color: var(--origam-color__feedback--info---border);
   --origam-chip--outlined---background-color: rgba(0, 0, 0, 0);
-  --origam-chip--outlined---border-width: 1px;
+  --origam-chip--outlined---border-width: var(--origam-border__width---thin);
   --origam-chip--outlined---border-color: currentColor;
-  --origam-chip__overlay---background-color: #ffffff;
+  --origam-chip__overlay---background-color: var(--origam-color__overlay---scrim);
   --origam-chip__overlay---border-radius: inherit;
-  --origam-chip__overlay---opacity: 0;
+  --origam-chip__overlay---opacity: var(--origam-opacity---0);
   --origam-chip__overlay---pointer-events: none;
   --origam-chip__overlay---position: absolute;
-  --origam-chip__overlay---position-top: 0px;
-  --origam-chip__overlay---position-left: 0px;
+  --origam-chip__overlay---position-top: var(--origam-space---0);
+  --origam-chip__overlay---position-left: var(--origam-space---0);
   --origam-chip__overlay---width: 100%;
   --origam-chip__overlay---height: 100%;
   --origam-chip__overlay---transition-property: opacity;
-  --origam-chip__overlay---transition-duration: 200ms;
-  --origam-chip__overlay---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-chip__overlay---transition-duration: var(--origam-motion__duration---medium);
+  --origam-chip__overlay---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-chip__underlay---position: absolute;
   --origam-chip__close---cursor: pointer;
   --origam-chip__close---font-size: 18px;
@@ -264,25 +265,25 @@
   --origam-chip__close---user-select: none;
   --origam-chip__close---flex: 0 1 auto;
   --origam-chip--filter---transition-property: transform, opacity;
-  --origam-chip--filter---transition-duration: 150ms;
-  --origam-chip--filter---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-avatar---background-color: #f5f5f5;
-  --origam-avatar---color: #525252;
+  --origam-chip--filter---transition-duration: var(--origam-motion__duration---normal);
+  --origam-chip--filter---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-avatar---background-color: var(--origam-color__surface---overlay);
+  --origam-avatar---color: var(--origam-color__text---secondary);
   --origam-avatar---border-color: currentColor;
   --origam-avatar---border-style: solid;
-  --origam-avatar---border-width: 0px;
-  --origam-avatar---border-radius: 9999px;
-  --origam-avatar---border-radius-rounded: 4px;
-  --origam-avatar---border-radius-square: 0px;
-  --origam-avatar---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-  --origam-avatar---box-shadow-elevated: 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
+  --origam-avatar---border-width: var(--origam-border__width---0);
+  --origam-avatar---border-radius: var(--origam-radius---full);
+  --origam-avatar---border-radius-rounded: var(--origam-radius---sm);
+  --origam-avatar---border-radius-square: var(--origam-radius---none);
+  --origam-avatar---box-shadow: var(--origam-shadow---none);
+  --origam-avatar---box-shadow-elevated: var(--origam-shadow---md);
   --origam-avatar---position: relative;
   --origam-avatar---overflow: hidden;
   --origam-avatar---text-align: center;
   --origam-avatar---text-transform: uppercase;
-  --origam-avatar---font-size: 1.5rem;
-  --origam-avatar---font-weight: 400;
-  --origam-avatar---letter-spacing: 0em;
+  --origam-avatar---font-size: var(--origam-font__size---3xl);
+  --origam-avatar---font-weight: var(--origam-font__weight---regular);
+  --origam-avatar---letter-spacing: var(--origam-font__letterSpacing---normal);
   --origam-avatar---line-height: 1;
   --origam-avatar---density: 0px;
   --origam-avatar---size-xs: 24px;
@@ -291,16 +292,16 @@
   --origam-avatar---size-lg: 56px;
   --origam-avatar---size-xl: 72px;
   --origam-avatar---transition-property: width, height, font-size;
-  --origam-avatar---transition-duration: 200ms;
-  --origam-avatar---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-avatar---padding-block-start: 0px;
-  --origam-avatar---padding-block-end: 0px;
-  --origam-avatar---padding-inline-start: 0px;
-  --origam-avatar---padding-inline-end: 0px;
-  --origam-avatar---margin-block-start: 0px;
-  --origam-avatar---margin-block-end: 0px;
-  --origam-avatar---margin-inline-start: 0px;
-  --origam-avatar---margin-inline-end: 0px;
+  --origam-avatar---transition-duration: var(--origam-motion__duration---medium);
+  --origam-avatar---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-avatar---padding-block-start: var(--origam-space---0);
+  --origam-avatar---padding-block-end: var(--origam-space---0);
+  --origam-avatar---padding-inline-start: var(--origam-space---0);
+  --origam-avatar---padding-inline-end: var(--origam-space---0);
+  --origam-avatar---margin-block-start: var(--origam-space---0);
+  --origam-avatar---margin-block-end: var(--origam-space---0);
+  --origam-avatar---margin-inline-start: var(--origam-space---0);
+  --origam-avatar---margin-inline-end: var(--origam-space---0);
   --origam-avatar__wrapper---width: 100%;
   --origam-avatar__wrapper---height: 100%;
   --origam-avatar__wrapper---flex: none;
@@ -308,69 +309,69 @@
   --origam-avatar__wrapper---align-items: center;
   --origam-avatar__wrapper---justify-content: center;
   --origam-avatar__wrapper---vertical-align: middle;
-  --origam-avatar__wrapper---padding-block-start: 0px;
-  --origam-avatar__wrapper---padding-block-end: 0px;
-  --origam-avatar__wrapper---padding-inline-start: 0px;
-  --origam-avatar__wrapper---padding-inline-end: 0px;
-  --origam-avatar__wrapper---margin-block-start: 0px;
-  --origam-avatar__wrapper---margin-block-end: 0px;
-  --origam-avatar__wrapper---margin-inline-start: 0px;
-  --origam-avatar__wrapper---margin-inline-end: 0px;
+  --origam-avatar__wrapper---padding-block-start: var(--origam-space---0);
+  --origam-avatar__wrapper---padding-block-end: var(--origam-space---0);
+  --origam-avatar__wrapper---padding-inline-start: var(--origam-space---0);
+  --origam-avatar__wrapper---padding-inline-end: var(--origam-space---0);
+  --origam-avatar__wrapper---margin-block-start: var(--origam-space---0);
+  --origam-avatar__wrapper---margin-block-end: var(--origam-space---0);
+  --origam-avatar__wrapper---margin-inline-start: var(--origam-space---0);
+  --origam-avatar__wrapper---margin-inline-end: var(--origam-space---0);
   --origam-avatar__image---width: 100%;
   --origam-avatar__image---height: 100%;
-  --origam-avatar--warning---background-color: #fb8c00;
-  --origam-avatar--warning---color: #ffffff;
-  --origam-avatar--success---background-color: #4caf50;
-  --origam-avatar--success---color: #ffffff;
-  --origam-avatar--info---background-color: #2196f3;
-  --origam-avatar--info---color: #ffffff;
-  --origam-avatar--danger---background-color: #ef4444;
-  --origam-avatar--danger---color: #ffffff;
-  --origam-avatar--error---background-color: #ef4444;
-  --origam-avatar--error---color: #ffffff;
+  --origam-avatar--warning---background-color: var(--origam-color__feedback--warning---bg);
+  --origam-avatar--warning---color: var(--origam-color__feedback--warning---fg);
+  --origam-avatar--success---background-color: var(--origam-color__feedback--success---bg);
+  --origam-avatar--success---color: var(--origam-color__feedback--success---fg);
+  --origam-avatar--info---background-color: var(--origam-color__feedback--info---bg);
+  --origam-avatar--info---color: var(--origam-color__feedback--info---fg);
+  --origam-avatar--danger---background-color: var(--origam-color__feedback--danger---bg);
+  --origam-avatar--danger---color: var(--origam-color__feedback--danger---fg);
+  --origam-avatar--error---background-color: var(--origam-color__feedback--danger---bg);
+  --origam-avatar--error---color: var(--origam-color__feedback--danger---fg);
   --origam-avatar-group---flex-direction: row;
   --origam-avatar-group---position: relative;
   --origam-avatar-group---density: 0px;
-  --origam-avatar-group---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-  --origam-avatar-group---box-shadow-elevated: 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
-  --origam-avatar-group---margin-inline-start: 0px;
-  --origam-avatar-group---margin-inline-end: 0px;
-  --origam-avatar-group---margin-block-start: 0px;
-  --origam-avatar-group---margin-block-end: 0px;
-  --origam-avatar-group---padding-block-start: 0px;
-  --origam-avatar-group---padding-block-end: 0px;
-  --origam-avatar-group---padding-inline-start: 0px;
-  --origam-avatar-group---padding-inline-end: 0px;
-  --origam-avatar-group__avatar---transition-duration: 200ms;
-  --origam-avatar-group__avatar---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-avatar-group---box-shadow: var(--origam-shadow---none);
+  --origam-avatar-group---box-shadow-elevated: var(--origam-shadow---md);
+  --origam-avatar-group---margin-inline-start: var(--origam-space---0);
+  --origam-avatar-group---margin-inline-end: var(--origam-space---0);
+  --origam-avatar-group---margin-block-start: var(--origam-space---0);
+  --origam-avatar-group---margin-block-end: var(--origam-space---0);
+  --origam-avatar-group---padding-block-start: var(--origam-space---0);
+  --origam-avatar-group---padding-block-end: var(--origam-space---0);
+  --origam-avatar-group---padding-inline-start: var(--origam-space---0);
+  --origam-avatar-group---padding-inline-end: var(--origam-space---0);
+  --origam-avatar-group__avatar---transition-duration: var(--origam-motion__duration---medium);
+  --origam-avatar-group__avatar---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-avatar-group__avatar---transition-property: margin;
-  --origam-avatar-group__avatar---margin-inline-start: 0px;
-  --origam-avatar-group__avatar---margin-inline-end: 0px;
-  --origam-avatar-group__avatar---margin-block-start: 0px;
-  --origam-avatar-group__avatar---margin-block-end: 0px;
+  --origam-avatar-group__avatar---margin-inline-start: var(--origam-space---0);
+  --origam-avatar-group__avatar---margin-inline-end: var(--origam-space---0);
+  --origam-avatar-group__avatar---margin-block-start: var(--origam-space---0);
+  --origam-avatar-group__avatar---margin-block-end: var(--origam-space---0);
   --origam-badge__wrapper---display: flex;
   --origam-badge__wrapper---align-items: stretch;
   --origam-badge__wrapper---justify-content: start;
-  --origam-badge__wrapper---padding-block-start: 0px;
-  --origam-badge__wrapper---padding-block-end: 0px;
-  --origam-badge__wrapper---padding-inline-start: 0px;
-  --origam-badge__wrapper---padding-inline-end: 0px;
-  --origam-badge__wrapper---margin-block-start: 0px;
-  --origam-badge__wrapper---margin-block-end: 0px;
-  --origam-badge__wrapper---margin-inline-start: 0px;
-  --origam-badge__wrapper---margin-inline-end: 0px;
-  --origam-badge__badge---background-color: #7c3aed;
-  --origam-badge__badge---color: #ffffff;
+  --origam-badge__wrapper---padding-block-start: var(--origam-space---0);
+  --origam-badge__wrapper---padding-block-end: var(--origam-space---0);
+  --origam-badge__wrapper---padding-inline-start: var(--origam-space---0);
+  --origam-badge__wrapper---padding-inline-end: var(--origam-space---0);
+  --origam-badge__wrapper---margin-block-start: var(--origam-space---0);
+  --origam-badge__wrapper---margin-block-end: var(--origam-space---0);
+  --origam-badge__wrapper---margin-inline-start: var(--origam-space---0);
+  --origam-badge__wrapper---margin-inline-end: var(--origam-space---0);
+  --origam-badge__badge---background-color: var(--origam-color__action--primary---bg);
+  --origam-badge__badge---color: var(--origam-color__action--primary---fg);
   --origam-badge__badge---border-color: currentColor;
   --origam-badge__badge---border-style: solid;
-  --origam-badge__badge---border-width: 0px;
-  --origam-badge__badge---border-top-width: 0px;
-  --origam-badge__badge---border-left-width: 0px;
-  --origam-badge__badge---border-bottom-width: 0px;
-  --origam-badge__badge---border-right-width: 0px;
-  --origam-badge__badge---border-radius: 9999px;
-  --origam-badge__badge---font-size: 0.75rem;
-  --origam-badge__badge---font-weight: 500;
+  --origam-badge__badge---border-width: var(--origam-border__width---0);
+  --origam-badge__badge---border-top-width: var(--origam-border__width---0);
+  --origam-badge__badge---border-left-width: var(--origam-border__width---0);
+  --origam-badge__badge---border-bottom-width: var(--origam-border__width---0);
+  --origam-badge__badge---border-right-width: var(--origam-border__width---0);
+  --origam-badge__badge---border-radius: var(--origam-radius---full);
+  --origam-badge__badge---font-size: var(--origam-font__size---sm);
+  --origam-badge__badge---font-weight: var(--origam-font__weight---medium);
   --origam-badge__badge---text-align: center;
   --origam-badge__badge---text-indent: 0;
   --origam-badge__badge---white-space: nowrap;
@@ -378,218 +379,218 @@
   --origam-badge__badge---min-width: 20px;
   --origam-badge__badge---pointer-events: auto;
   --origam-badge__badge---position: absolute;
-  --origam-badge__badge---padding-block-start: 0px;
-  --origam-badge__badge---padding-block-end: 0px;
-  --origam-badge__badge---padding-inline-start: 4px;
-  --origam-badge__badge---padding-inline-end: 4px;
-  --origam-badge__badge---margin-block-start: 0px;
-  --origam-badge__badge---margin-block-end: 0px;
-  --origam-badge__badge---margin-inline-start: 0px;
-  --origam-badge__badge---margin-inline-end: 0px;
+  --origam-badge__badge---padding-block-start: var(--origam-space---0);
+  --origam-badge__badge---padding-block-end: var(--origam-space---0);
+  --origam-badge__badge---padding-inline-start: var(--origam-space---1);
+  --origam-badge__badge---padding-inline-end: var(--origam-space---1);
+  --origam-badge__badge---margin-block-start: var(--origam-space---0);
+  --origam-badge__badge---margin-block-end: var(--origam-space---0);
+  --origam-badge__badge---margin-inline-start: var(--origam-space---0);
+  --origam-badge__badge---margin-inline-end: var(--origam-space---0);
   --origam-badge__badge---transition-duration: 225ms;
-  --origam-badge__badge---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-badge__badge---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-badge__badge---transition-property: all;
-  --origam-badge__badge---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-  --origam-badge__badge---box-shadow-elevated: 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
-  --origam-badge--warning---background-color: #fb8c00;
-  --origam-badge--warning---color: #ffffff;
-  --origam-badge--success---background-color: #4caf50;
-  --origam-badge--success---color: #ffffff;
-  --origam-badge--danger---background-color: #ef4444;
-  --origam-badge--danger---color: #ffffff;
-  --origam-badge--info---background-color: #2196f3;
-  --origam-badge--info---color: #ffffff;
-  --origam-badge--error---background-color: #ef4444;
-  --origam-badge--error---color: #ffffff;
-  --origam-alert---background-color: #e6e6e6;
-  --origam-alert---color: #171717;
+  --origam-badge__badge---box-shadow: var(--origam-shadow---none);
+  --origam-badge__badge---box-shadow-elevated: var(--origam-shadow---md);
+  --origam-badge--warning---background-color: var(--origam-color__feedback--warning---bg);
+  --origam-badge--warning---color: var(--origam-color__feedback--warning---fg);
+  --origam-badge--success---background-color: var(--origam-color__feedback--success---bg);
+  --origam-badge--success---color: var(--origam-color__feedback--success---fg);
+  --origam-badge--danger---background-color: var(--origam-color__feedback--danger---bg);
+  --origam-badge--danger---color: var(--origam-color__feedback--danger---fg);
+  --origam-badge--info---background-color: var(--origam-color__feedback--info---bg);
+  --origam-badge--info---color: var(--origam-color__feedback--info---fg);
+  --origam-badge--error---background-color: var(--origam-color__feedback--danger---bg);
+  --origam-badge--error---color: var(--origam-color__feedback--danger---fg);
+  --origam-alert---background-color: var(--origam-color__surface---disabled);
+  --origam-alert---color: var(--origam-color__text---primary);
   --origam-alert---border-color: rgba(0, 0, 0, 0);
   --origam-alert---border-style: solid;
-  --origam-alert---border-top-width: 0px;
-  --origam-alert---border-left-width: 0px;
-  --origam-alert---border-bottom-width: 0px;
-  --origam-alert---border-right-width: 0px;
-  --origam-alert---border-radius: 0px;
-  --origam-alert---border-radius-rounded: 4px;
+  --origam-alert---border-top-width: var(--origam-border__width---0);
+  --origam-alert---border-left-width: var(--origam-border__width---0);
+  --origam-alert---border-bottom-width: var(--origam-border__width---0);
+  --origam-alert---border-right-width: var(--origam-border__width---0);
+  --origam-alert---border-radius: var(--origam-radius---none);
+  --origam-alert---border-radius-rounded: var(--origam-radius---sm);
   --origam-alert---position: static;
-  --origam-alert---padding-block-start: 16px;
-  --origam-alert---padding-block-end: 16px;
-  --origam-alert---padding-inline-start: 16px;
-  --origam-alert---padding-inline-end: 16px;
-  --origam-alert---margin-block-start: 0px;
-  --origam-alert---margin-block-end: 0px;
-  --origam-alert---margin-inline-start: 0px;
-  --origam-alert---margin-inline-end: 0px;
+  --origam-alert---padding-block-start: var(--origam-space---4);
+  --origam-alert---padding-block-end: var(--origam-space---4);
+  --origam-alert---padding-inline-start: var(--origam-space---4);
+  --origam-alert---padding-inline-end: var(--origam-space---4);
+  --origam-alert---margin-block-start: var(--origam-space---0);
+  --origam-alert---margin-block-end: var(--origam-space---0);
+  --origam-alert---margin-inline-start: var(--origam-space---0);
+  --origam-alert---margin-inline-end: var(--origam-space---0);
   --origam-alert---density: 0px;
   --origam-alert---accent-width: 24px;
-  --origam-alert---box-shadow-elevated: 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
+  --origam-alert---box-shadow-elevated: var(--origam-shadow---md);
   --origam-alert__prepend---align-items: center;
-  --origam-alert__prepend---margin-inline-start: 0px;
-  --origam-alert__prepend---margin-inline-end: 16px;
-  --origam-alert__prepend---margin-block-start: 0px;
-  --origam-alert__prepend---margin-block-end: 0px;
-  --origam-alert__prepend---padding-block-start: 0px;
-  --origam-alert__prepend---padding-block-end: 0px;
-  --origam-alert__prepend---padding-inline-start: 0px;
-  --origam-alert__prepend---padding-inline-end: 0px;
+  --origam-alert__prepend---margin-inline-start: var(--origam-space---0);
+  --origam-alert__prepend---margin-inline-end: var(--origam-space---4);
+  --origam-alert__prepend---margin-block-start: var(--origam-space---0);
+  --origam-alert__prepend---margin-block-end: var(--origam-space---0);
+  --origam-alert__prepend---padding-block-start: var(--origam-space---0);
+  --origam-alert__prepend---padding-block-end: var(--origam-space---0);
+  --origam-alert__prepend---padding-inline-start: var(--origam-space---0);
+  --origam-alert__prepend---padding-inline-end: var(--origam-space---0);
   --origam-alert__append---align-items: center;
-  --origam-alert__append---margin-inline-start: 16px;
-  --origam-alert__append---margin-inline-end: 0px;
-  --origam-alert__append---margin-block-start: 0px;
-  --origam-alert__append---margin-block-end: 0px;
-  --origam-alert__append---padding-block-start: 0px;
-  --origam-alert__append---padding-block-end: 0px;
-  --origam-alert__append---padding-inline-start: 0px;
-  --origam-alert__append---padding-inline-end: 0px;
-  --origam-alert__close---margin-inline-start: 16px;
-  --origam-alert__close---margin-inline-end: 0px;
-  --origam-alert__close---margin-block-start: 0px;
-  --origam-alert__close---margin-block-end: 0px;
-  --origam-alert__close---padding-block-start: 0px;
-  --origam-alert__close---padding-block-end: 0px;
-  --origam-alert__close---padding-inline-start: 0px;
-  --origam-alert__close---padding-inline-end: 0px;
+  --origam-alert__append---margin-inline-start: var(--origam-space---4);
+  --origam-alert__append---margin-inline-end: var(--origam-space---0);
+  --origam-alert__append---margin-block-start: var(--origam-space---0);
+  --origam-alert__append---margin-block-end: var(--origam-space---0);
+  --origam-alert__append---padding-block-start: var(--origam-space---0);
+  --origam-alert__append---padding-block-end: var(--origam-space---0);
+  --origam-alert__append---padding-inline-start: var(--origam-space---0);
+  --origam-alert__append---padding-inline-end: var(--origam-space---0);
+  --origam-alert__close---margin-inline-start: var(--origam-space---4);
+  --origam-alert__close---margin-inline-end: var(--origam-space---0);
+  --origam-alert__close---margin-block-start: var(--origam-space---0);
+  --origam-alert__close---margin-block-end: var(--origam-space---0);
+  --origam-alert__close---padding-block-start: var(--origam-space---0);
+  --origam-alert__close---padding-block-end: var(--origam-space---0);
+  --origam-alert__close---padding-inline-start: var(--origam-space---0);
+  --origam-alert__close---padding-inline-end: var(--origam-space---0);
   --origam-alert__title---align-items: center;
-  --origam-alert__title---font-size: 1.25rem;
-  --origam-alert__title---font-weight: 500;
+  --origam-alert__title---font-size: var(--origam-font__size---2xl);
+  --origam-alert__title---font-weight: var(--origam-font__weight---medium);
   --origam-alert__title---hyphens: auto;
-  --origam-alert__title---letter-spacing: 0.0125em;
-  --origam-alert__title---line-height: 1.25;
+  --origam-alert__title---letter-spacing: var(--origam-font__letterSpacing---wider);
+  --origam-alert__title---line-height: var(--origam-font__lineHeight---tight);
   --origam-alert__title---overflow-wrap: normal;
   --origam-alert__title---text-transform: none;
   --origam-alert__title---word-break: normal;
   --origam-alert__title---word-wrap: break-word;
-  --origam-alert__text---font-size: 1rem;
-  --origam-alert__text---font-weight: 400;
-  --origam-alert__text---line-height: 1.375;
-  --origam-alert__text---letter-spacing: 0.0125em;
+  --origam-alert__text---font-size: var(--origam-font__size---lg);
+  --origam-alert__text---font-weight: var(--origam-font__weight---regular);
+  --origam-alert__text---line-height: var(--origam-font__lineHeight---snug);
+  --origam-alert__text---letter-spacing: var(--origam-font__letterSpacing---wider);
   --origam-alert__text---hyphens: auto;
   --origam-alert__text---word-break: normal;
   --origam-alert__text---word-wrap: break-word;
-  --origam-alert__underlay---border-radius: 4px;
-  --origam-alert--success---bg: #4caf50;
-  --origam-alert--success---fg: #ffffff;
-  --origam-alert--success---bg-subtle: #f0fdf4;
-  --origam-alert--success---fg-subtle: #16a34a;
-  --origam-alert--success---border: #4caf50;
-  --origam-alert--warning---bg: #fb8c00;
-  --origam-alert--warning---fg: #ffffff;
-  --origam-alert--warning---bg-subtle: #fffbeb;
-  --origam-alert--warning---fg-subtle: #b45309;
-  --origam-alert--warning---border: #fb8c00;
-  --origam-alert--danger---bg: #ef4444;
-  --origam-alert--danger---fg: #ffffff;
-  --origam-alert--danger---bg-subtle: #fff1f2;
-  --origam-alert--danger---fg-subtle: #b91c1c;
-  --origam-alert--danger---border: #cf6679;
-  --origam-alert--info---bg: #2196f3;
-  --origam-alert--info---fg: #ffffff;
-  --origam-alert--info---bg-subtle: #eff6ff;
-  --origam-alert--info---fg-subtle: #1e40af;
-  --origam-alert--info---border: #2196f3;
-  --origam-snackbar---z-index: 1060;
-  --origam-snackbar---margin: 8px;
+  --origam-alert__underlay---border-radius: var(--origam-radius---sm);
+  --origam-alert--success---bg: var(--origam-color__feedback--success---bg);
+  --origam-alert--success---fg: var(--origam-color__feedback--success---fg);
+  --origam-alert--success---bg-subtle: var(--origam-color__feedback--success---bgSubtle);
+  --origam-alert--success---fg-subtle: var(--origam-color__feedback--success---fgSubtle);
+  --origam-alert--success---border: var(--origam-color__feedback--success---border);
+  --origam-alert--warning---bg: var(--origam-color__feedback--warning---bg);
+  --origam-alert--warning---fg: var(--origam-color__feedback--warning---fg);
+  --origam-alert--warning---bg-subtle: var(--origam-color__feedback--warning---bgSubtle);
+  --origam-alert--warning---fg-subtle: var(--origam-color__feedback--warning---fgSubtle);
+  --origam-alert--warning---border: var(--origam-color__feedback--warning---border);
+  --origam-alert--danger---bg: var(--origam-color__feedback--danger---bg);
+  --origam-alert--danger---fg: var(--origam-color__feedback--danger---fg);
+  --origam-alert--danger---bg-subtle: var(--origam-color__feedback--danger---bgSubtle);
+  --origam-alert--danger---fg-subtle: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-alert--danger---border: var(--origam-color__feedback--danger---border);
+  --origam-alert--info---bg: var(--origam-color__feedback--info---bg);
+  --origam-alert--info---fg: var(--origam-color__feedback--info---fg);
+  --origam-alert--info---bg-subtle: var(--origam-color__feedback--info---bgSubtle);
+  --origam-alert--info---fg-subtle: var(--origam-color__feedback--info---fgSubtle);
+  --origam-alert--info---border: var(--origam-color__feedback--info---border);
+  --origam-snackbar---z-index: var(--origam-zIndex---toast);
+  --origam-snackbar---margin: var(--origam-space---2);
   --origam-snackbar---position: fixed;
   --origam-snackbar__wrapper---min-height: 48px;
   --origam-snackbar__wrapper---min-width: 344px;
   --origam-snackbar__wrapper---max-width: 672px;
-  --origam-snackbar__wrapper---border-width: 1px;
+  --origam-snackbar__wrapper---border-width: var(--origam-border__width---thin);
   --origam-snackbar__wrapper---border-style: solid;
-  --origam-snackbar__wrapper---border-radius: 4px;
-  --origam-snackbar__content---font-size: 0.875rem;
-  --origam-snackbar__content---font-weight: 400;
-  --origam-snackbar__content---letter-spacing: 0.0094em;
-  --origam-snackbar__content---line-height: 1.375;
+  --origam-snackbar__wrapper---border-radius: var(--origam-radius---sm);
+  --origam-snackbar__content---font-size: var(--origam-font__size---md);
+  --origam-snackbar__content---font-weight: var(--origam-font__weight---regular);
+  --origam-snackbar__content---letter-spacing: var(--origam-font__letterSpacing---wide);
+  --origam-snackbar__content---line-height: var(--origam-font__lineHeight---snug);
   --origam-snackbar__content---padding-block: 14px;
-  --origam-snackbar__content---padding-inline: 16px;
-  --origam-snackbar__prepend---margin-inline-end: 12px;
-  --origam-snackbar__actions---margin-inline-end: 8px;
-  --origam-snackbar__timer---transition-duration: 200ms;
-  --origam-snackbar__timer---transition-easing: cubic-bezier(0, 0, 1, 1);
+  --origam-snackbar__content---padding-inline: var(--origam-space---4);
+  --origam-snackbar__prepend---margin-inline-end: var(--origam-space---3);
+  --origam-snackbar__actions---margin-inline-end: var(--origam-space---2);
+  --origam-snackbar__timer---transition-duration: var(--origam-motion__duration---medium);
+  --origam-snackbar__timer---transition-easing: var(--origam-motion__easing---linear);
   --origam-snackbar---multi-line-wrapper-min-height: 68px;
-  --origam-snackbar__vertical---actions-margin-bottom: 8px;
-  --origam-snackbar__absolute---z-index: 1;
-  --origam-snackbar--success---bg: #4caf50;
-  --origam-snackbar--success---fg: #ffffff;
-  --origam-snackbar--success---border: #4caf50;
-  --origam-snackbar--warning---bg: #fb8c00;
-  --origam-snackbar--warning---fg: #ffffff;
-  --origam-snackbar--warning---border: #fb8c00;
-  --origam-snackbar--danger---bg: #ef4444;
-  --origam-snackbar--danger---fg: #ffffff;
-  --origam-snackbar--danger---border: #cf6679;
-  --origam-snackbar--info---bg: #2196f3;
-  --origam-snackbar--info---fg: #ffffff;
-  --origam-snackbar--info---border: #2196f3;
-  --origam-bottom-bar---border-top-width: 0px;
-  --origam-bottom-bar---border-left-width: 0px;
-  --origam-bottom-bar---border-bottom-width: 0px;
-  --origam-bottom-bar---border-right-width: 0px;
+  --origam-snackbar__vertical---actions-margin-bottom: var(--origam-space---2);
+  --origam-snackbar__absolute---z-index: var(--origam-zIndex---raised);
+  --origam-snackbar--success---bg: var(--origam-color__feedback--success---bg);
+  --origam-snackbar--success---fg: var(--origam-color__feedback--success---fg);
+  --origam-snackbar--success---border: var(--origam-color__feedback--success---border);
+  --origam-snackbar--warning---bg: var(--origam-color__feedback--warning---bg);
+  --origam-snackbar--warning---fg: var(--origam-color__feedback--warning---fg);
+  --origam-snackbar--warning---border: var(--origam-color__feedback--warning---border);
+  --origam-snackbar--danger---bg: var(--origam-color__feedback--danger---bg);
+  --origam-snackbar--danger---fg: var(--origam-color__feedback--danger---fg);
+  --origam-snackbar--danger---border: var(--origam-color__feedback--danger---border);
+  --origam-snackbar--info---bg: var(--origam-color__feedback--info---bg);
+  --origam-snackbar--info---fg: var(--origam-color__feedback--info---fg);
+  --origam-snackbar--info---border: var(--origam-color__feedback--info---border);
+  --origam-bottom-bar---border-top-width: var(--origam-border__width---0);
+  --origam-bottom-bar---border-left-width: var(--origam-border__width---0);
+  --origam-bottom-bar---border-bottom-width: var(--origam-border__width---0);
+  --origam-bottom-bar---border-right-width: var(--origam-border__width---0);
   --origam-bottom-bar---border-color: currentColor;
   --origam-bottom-bar---border-style: solid;
-  --origam-bottom-bar---border-radius: 0px;
+  --origam-bottom-bar---border-radius: var(--origam-radius---none);
   --origam-bottom-bar---density: 0px;
   --origam-bottom-bar---max-width: 100%;
-  --origam-bottom-bar---height: 48px;
-  --origam-bottom-bar---background: #e6e6e6;
-  --origam-bottom-bar---color: #171717;
-  --origam-bottom-bar---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-  --origam-bottom-bar---padding-block-start: 8px;
-  --origam-bottom-bar---padding-block-end: 8px;
-  --origam-bottom-bar---padding-inline-start: 8px;
-  --origam-bottom-bar---padding-inline-end: 8px;
-  --origam-bottom-bar---margin-block-start: 0px;
-  --origam-bottom-bar---margin-block-end: 0px;
-  --origam-bottom-bar---margin-inline-start: 0px;
-  --origam-bottom-bar---margin-inline-end: 0px;
+  --origam-bottom-bar---height: var(--origam-space---12);
+  --origam-bottom-bar---background: var(--origam-color__neutral---200);
+  --origam-bottom-bar---color: var(--origam-color__text---primary);
+  --origam-bottom-bar---box-shadow: var(--origam-shadow---none);
+  --origam-bottom-bar---padding-block-start: var(--origam-space---2);
+  --origam-bottom-bar---padding-block-end: var(--origam-space---2);
+  --origam-bottom-bar---padding-inline-start: var(--origam-space---2);
+  --origam-bottom-bar---padding-inline-end: var(--origam-space---2);
+  --origam-bottom-bar---margin-block-start: var(--origam-space---0);
+  --origam-bottom-bar---margin-block-end: var(--origam-space---0);
+  --origam-bottom-bar---margin-inline-start: var(--origam-space---0);
+  --origam-bottom-bar---margin-inline-end: var(--origam-space---0);
   --origam-bottom-bar---transition-duration: 0.2s, 0.1s;
-  --origam-bottom-bar---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-bottom-bar---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-bottom-bar---transition-property: transform, color;
   --origam-bottom-bar--elevated---box-shadow: 0px -6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
   --origam-bottom-bar--active---box-shadow: 0px -6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
-  --origam-bottom-bar---border-variant-border-width: 1px;
-  --origam-bottom-bar__rounded---border-radius: 4px;
-  --origam-bottom-bar---density-comfortable-density: 8px;
-  --origam-bottom-bar---density-default-density: 0px;
-  --origam-bottom-bar---density-compact-density: 8px;
+  --origam-bottom-bar---border-variant-border-width: var(--origam-border__width---thin);
+  --origam-bottom-bar__rounded---border-radius: var(--origam-radius---sm);
+  --origam-bottom-bar---density-comfortable-density: var(--origam-space---2);
+  --origam-bottom-bar---density-default-density: var(--origam-space---0);
+  --origam-bottom-bar---density-compact-density: var(--origam-space---2);
   --origam-bottom-bar__content---justify-content: center;
   --origam-bottom-bar__content---align-items: center;
   --origam-bottom-bar__content---flex-wrap: nowrap;
   --origam-bottom-bar__content---transform: none;
-  --origam-toolbar---border-top-width: 0px;
-  --origam-toolbar---border-left-width: 0px;
-  --origam-toolbar---border-bottom-width: 0px;
-  --origam-toolbar---border-right-width: 0px;
-  --origam-toolbar---border-color: #171717;
+  --origam-toolbar---border-top-width: var(--origam-border__width---0);
+  --origam-toolbar---border-left-width: var(--origam-border__width---0);
+  --origam-toolbar---border-bottom-width: var(--origam-border__width---0);
+  --origam-toolbar---border-right-width: var(--origam-border__width---0);
+  --origam-toolbar---border-color: var(--origam-color__text---primary);
   --origam-toolbar---border-style: solid;
-  --origam-toolbar---border-start-start-radius: 0px;
-  --origam-toolbar---border-start-end-radius: 0px;
-  --origam-toolbar---border-end-start-radius: 0px;
-  --origam-toolbar---border-end-end-radius: 0px;
+  --origam-toolbar---border-start-start-radius: var(--origam-radius---none);
+  --origam-toolbar---border-start-end-radius: var(--origam-radius---none);
+  --origam-toolbar---border-end-start-radius: var(--origam-radius---none);
+  --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
   --origam-toolbar---max-width: 100%;
   --origam-toolbar---width: 100%;
-  --origam-toolbar---height: 56px;
-  --origam-toolbar---height-compact: 40px;
-  --origam-toolbar---height-default: 56px;
-  --origam-toolbar---height-prominent: 80px;
+  --origam-toolbar---height: var(--origam-space---14);
+  --origam-toolbar---height-compact: var(--origam-space---10);
+  --origam-toolbar---height-default: var(--origam-space---14);
+  --origam-toolbar---height-prominent: var(--origam-space---20);
   --origam-toolbar---box-sizing: border-box;
   --origam-toolbar---overflow: hidden;
   --origam-toolbar---position: relative;
-  --origam-toolbar---z-index: 1030;
+  --origam-toolbar---z-index: var(--origam-zIndex---fixed);
   --origam-toolbar---transform: none;
-  --origam-toolbar---transition-duration: 200ms;
+  --origam-toolbar---transition-duration: var(--origam-motion__duration---medium);
   --origam-toolbar---transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow;
-  --origam-toolbar---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-toolbar---background: #ffffff;
-  --origam-toolbar---color: #171717;
-  --origam-toolbar---box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
-  --origam-toolbar---border-variant-border-width: 1px;
-  --origam-toolbar---border-variant-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-  --origam-toolbar__rounded---border-radius: 4px;
+  --origam-toolbar---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-toolbar---background: var(--origam-color__surface---default);
+  --origam-toolbar---color: var(--origam-color__text---primary);
+  --origam-toolbar---box-shadow: var(--origam-shadow---sm);
+  --origam-toolbar---border-variant-border-width: var(--origam-border__width---thin);
+  --origam-toolbar---border-variant-box-shadow: var(--origam-shadow---none);
+  --origam-toolbar__rounded---border-radius: var(--origam-radius---sm);
   --origam-toolbar__collapse---max-width: 112px;
   --origam-toolbar__collapse---overflow: hidden;
-  --origam-toolbar__collapse---border-end-end-radius: 24px;
-  --origam-toolbar__flat---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
+  --origam-toolbar__collapse---border-end-end-radius: var(--origam-radius---2xl);
+  --origam-toolbar__flat---box-shadow: var(--origam-shadow---none);
   --origam-toolbar__floating---display: inline-flex;
   --origam-toolbar__wrapper---display: flex;
   --origam-toolbar__wrapper---align-items: flex-start;
@@ -604,7 +605,7 @@
   --origam-toolbar__content---transition: inherit;
   --origam-toolbar__content---height: 100%;
   --origam-toolbar__content---flex-grow: 1;
-  --origam-toolbar__content---flex-basis: 0px;
+  --origam-toolbar__content---flex-basis: var(--origam-space---0);
   --origam-toolbar__content---max-width: 100%;
   --origam-toolbar__title---display: flex;
   --origam-toolbar__title---align-items: center;
@@ -613,20 +614,20 @@
   --origam-toolbar__title---flex-grow: 0;
   --origam-toolbar__title---flex-shrink: 0;
   --origam-toolbar__title---flex-basis: auto;
-  --origam-toolbar__title---min-width: 0px;
-  --origam-toolbar__title---font-size: 1.25rem;
-  --origam-toolbar__title---font-weight: 400;
-  --origam-toolbar__title---letter-spacing: 0em;
+  --origam-toolbar__title---min-width: var(--origam-space---0);
+  --origam-toolbar__title---font-size: var(--origam-font__size---2xl);
+  --origam-toolbar__title---font-weight: var(--origam-font__weight---regular);
+  --origam-toolbar__title---letter-spacing: var(--origam-font__letterSpacing---normal);
   --origam-toolbar__title---line-height: 1.75rem;
   --origam-toolbar__title---text-transform: none;
   --origam-toolbar__title---margin-inline-start: auto;
-  --origam-toolbar__title---margin-inline-end: 8px;
-  --origam-toolbar__title---margin-block-start: 0px;
-  --origam-toolbar__title---margin-block-end: 0px;
-  --origam-toolbar__title---padding-block-start: 0px;
-  --origam-toolbar__title---padding-block-end: 0px;
-  --origam-toolbar__title---padding-inline-start: 0px;
-  --origam-toolbar__title---padding-inline-end: 0px;
+  --origam-toolbar__title---margin-inline-end: var(--origam-space---2);
+  --origam-toolbar__title---margin-block-start: var(--origam-space---0);
+  --origam-toolbar__title---margin-block-end: var(--origam-space---0);
+  --origam-toolbar__title---padding-block-start: var(--origam-space---0);
+  --origam-toolbar__title---padding-block-end: var(--origam-space---0);
+  --origam-toolbar__title---padding-inline-start: var(--origam-space---0);
+  --origam-toolbar__title---padding-inline-end: var(--origam-space---0);
   --origam-toolbar__prepend---align-items: center;
   --origam-toolbar__prepend---align-self: stretch;
   --origam-toolbar__prepend---display: flex;
@@ -634,7 +635,7 @@
   --origam-toolbar__prepend---flex-grow: 0;
   --origam-toolbar__prepend---flex-shrink: 0;
   --origam-toolbar__prepend---flex-basis: auto;
-  --origam-toolbar__prepend---margin-inline-start: 8px;
+  --origam-toolbar__prepend---margin-inline-start: var(--origam-space---2);
   --origam-toolbar__prepend---margin-inline-end: auto;
   --origam-toolbar__append---align-items: center;
   --origam-toolbar__append---align-self: stretch;
@@ -644,26 +645,26 @@
   --origam-toolbar__append---flex-shrink: 0;
   --origam-toolbar__append---flex-basis: auto;
   --origam-toolbar__append---margin-inline-start: auto;
-  --origam-toolbar__append---margin-inline-end: 8px;
-  --origam-app---background-color: #ffffff;
-  --origam-app---color: #171717;
+  --origam-toolbar__append---margin-inline-end: var(--origam-space---2);
+  --origam-app---background-color: var(--origam-color__surface---default);
+  --origam-app---color: var(--origam-color__text---primary);
   --origam-app---min-height: 100vh;
   --origam-app---display: flex;
   --origam-app---flex-direction: column;
   --origam-app---overflow: hidden;
   --origam-app---position: relative;
-  --origam-app-bar---background-color: #ffffff;
-  --origam-app-bar---color: #171717;
-  --origam-app-bar---border-color: #d4d4d4;
-  --origam-app-bar---box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
+  --origam-app-bar---background-color: var(--origam-color__surface---raised);
+  --origam-app-bar---color: var(--origam-color__text---primary);
+  --origam-app-bar---border-color: var(--origam-color__border---subtle);
+  --origam-app-bar---box-shadow: var(--origam-shadow---sm);
   --origam-app-bar---height: 64px;
-  --origam-app-bar---z-index: 1030;
-  --origam-app-bar---transition-duration: 200ms;
-  --origam-app-bar---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-app-bar---z-index: var(--origam-zIndex---fixed);
+  --origam-app-bar---transition-duration: var(--origam-motion__duration---medium);
+  --origam-app-bar---transition-easing: var(--origam-motion__easing---standard);
   --origam-app-bar__img---height: 100%;
   --origam-app-bar__img---width: 100%;
   --origam-app-bar__img---object-fit: cover;
-  --origam-layout---background-color: #ffffff;
+  --origam-layout---background-color: var(--origam-color__surface---default);
   --origam-layout---display: flex;
   --origam-layout---flex: 1 0 auto;
   --origam-layout---flex-direction: column;
@@ -680,67 +681,67 @@
   --origam-main---height: 100%;
   --origam-main---display: flex;
   --origam-main---position: absolute;
-  --origam-main---position-top: 0px;
-  --origam-main---position-left: 0px;
-  --origam-main---transition-duration: 200ms;
+  --origam-main---position-top: var(--origam-space---0);
+  --origam-main---position-left: var(--origam-space---0);
+  --origam-main---transition-duration: var(--origam-motion__duration---medium);
   --origam-main---transition-property: all;
-  --origam-main---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-main---background-color: #ffffff;
-  --origam-main---color: #171717;
+  --origam-main---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-main---background-color: var(--origam-color__surface---default);
+  --origam-main---color: var(--origam-color__text---primary);
   --origam-main__scroller---position: relative;
   --origam-main__scroller---max-width: 100%;
-  --origam-section---background-color: #ffffff;
-  --origam-section---color: #171717;
-  --origam-section---padding: 24px;
-  --origam-section---border-radius: 8px;
+  --origam-section---background-color: var(--origam-color__surface---default);
+  --origam-section---color: var(--origam-color__text---primary);
+  --origam-section---padding: var(--origam-space---6);
+  --origam-section---border-radius: var(--origam-radius---md);
   --origam-section---display: flex;
   --origam-section---flex-direction: column;
-  --origam-section---gap: 16px;
+  --origam-section---gap: var(--origam-space---4);
   --origam-section---width: 100%;
   --origam-drawer---display: flex;
   --origam-drawer---flex-direction: column;
   --origam-drawer---position: absolute;
-  --origam-drawer---z-index: 1000;
+  --origam-drawer---z-index: var(--origam-zIndex---dropdown);
   --origam-drawer---height: 100%;
   --origam-drawer---width: 100%;
   --origam-drawer---max-width: 100%;
   --origam-drawer---pointer-events: auto;
-  --origam-drawer---background: #ffffff;
-  --origam-drawer---color: #171717;
-  --origam-drawer---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-  --origam-drawer---border-color: #171717;
+  --origam-drawer---background: var(--origam-color__surface---default);
+  --origam-drawer---color: var(--origam-color__text---primary);
+  --origam-drawer---box-shadow: var(--origam-shadow---none);
+  --origam-drawer---border-color: var(--origam-color__text---primary);
   --origam-drawer---border-style: solid;
-  --origam-drawer---border-top-width: 0px;
-  --origam-drawer---border-left-width: 0px;
-  --origam-drawer---border-bottom-width: 0px;
-  --origam-drawer---border-right-width: 0px;
-  --origam-drawer---border-start-start-radius: 0px;
-  --origam-drawer---border-start-end-radius: 0px;
-  --origam-drawer---border-end-start-radius: 0px;
-  --origam-drawer---border-end-end-radius: 0px;
-  --origam-drawer---transition-duration: 200ms;
+  --origam-drawer---border-top-width: var(--origam-border__width---0);
+  --origam-drawer---border-left-width: var(--origam-border__width---0);
+  --origam-drawer---border-bottom-width: var(--origam-border__width---0);
+  --origam-drawer---border-right-width: var(--origam-border__width---0);
+  --origam-drawer---border-start-start-radius: var(--origam-radius---none);
+  --origam-drawer---border-start-end-radius: var(--origam-radius---none);
+  --origam-drawer---border-end-start-radius: var(--origam-radius---none);
+  --origam-drawer---border-end-end-radius: var(--origam-radius---none);
+  --origam-drawer---transition-duration: var(--origam-motion__duration---medium);
   --origam-drawer---transition-property: box-shadow, transform, visibility, width, height, left, right, top, bottom;
-  --origam-drawer---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-drawer__temporary---box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
+  --origam-drawer---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-drawer__temporary---box-shadow: var(--origam-shadow---lg);
   --origam-drawer__sticky---height: auto;
   --origam-drawer__sticky---transition-property: box-shadow, transform, visibility, width, height, left, right;
-  --origam-drawer__border---border-width: 1px;
-  --origam-drawer__border---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-  --origam-drawer__top---border-bottom-width: 1px;
-  --origam-drawer__bottom---border-top-width: 1px;
-  --origam-drawer__left---border-right-width: 1px;
-  --origam-drawer__right---border-left-width: 1px;
-  --origam-drawer__scrim---background: #ffffff;
+  --origam-drawer__border---border-width: var(--origam-border__width---thin);
+  --origam-drawer__border---box-shadow: var(--origam-shadow---none);
+  --origam-drawer__top---border-bottom-width: var(--origam-border__width---thin);
+  --origam-drawer__bottom---border-top-width: var(--origam-border__width---thin);
+  --origam-drawer__left---border-right-width: var(--origam-border__width---thin);
+  --origam-drawer__right---border-left-width: var(--origam-border__width---thin);
+  --origam-drawer__scrim---background: var(--origam-color__overlay---scrim);
   --origam-drawer__scrim---opacity: 0.2;
   --origam-drawer__scrim---position: absolute;
-  --origam-drawer__scrim---position-top: 0px;
-  --origam-drawer__scrim---position-left: 0px;
+  --origam-drawer__scrim---position-top: var(--origam-space---0);
+  --origam-drawer__scrim---position-left: var(--origam-space---0);
   --origam-drawer__scrim---width: 100%;
   --origam-drawer__scrim---height: 100%;
-  --origam-drawer__scrim---z-index: 1;
+  --origam-drawer__scrim---z-index: var(--origam-zIndex---raised);
   --origam-drawer__scrim---transition-property: opacity;
-  --origam-drawer__scrim---transition-duration: 200ms;
-  --origam-drawer__scrim---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-drawer__scrim---transition-duration: var(--origam-motion__duration---medium);
+  --origam-drawer__scrim---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-drawer__content---flex: 0 1 auto;
   --origam-drawer__content---height: 100%;
   --origam-drawer__content---max-width: 100%;
@@ -753,48 +754,48 @@
   --origam-sheet---position: relative;
   --origam-sheet---display: block;
   --origam-sheet---box-sizing: border-box;
-  --origam-sheet---background: #ffffff;
-  --origam-sheet---color: #171717;
-  --origam-sheet---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
+  --origam-sheet---background: var(--origam-color__surface---default);
+  --origam-sheet---color: var(--origam-color__text---primary);
+  --origam-sheet---box-shadow: var(--origam-shadow---none);
   --origam-sheet---border-style: solid;
-  --origam-sheet---border-color: #171717;
-  --origam-sheet---border-top-width: 0px;
-  --origam-sheet---border-left-width: 0px;
-  --origam-sheet---border-bottom-width: 0px;
-  --origam-sheet---border-right-width: 0px;
-  --origam-sheet---border-start-start-radius: 0px;
-  --origam-sheet---border-start-end-radius: 0px;
-  --origam-sheet---border-end-start-radius: 0px;
-  --origam-sheet---border-end-end-radius: 0px;
+  --origam-sheet---border-color: var(--origam-color__text---primary);
+  --origam-sheet---border-top-width: var(--origam-border__width---0);
+  --origam-sheet---border-left-width: var(--origam-border__width---0);
+  --origam-sheet---border-bottom-width: var(--origam-border__width---0);
+  --origam-sheet---border-right-width: var(--origam-border__width---0);
+  --origam-sheet---border-start-start-radius: var(--origam-radius---none);
+  --origam-sheet---border-start-end-radius: var(--origam-radius---none);
+  --origam-sheet---border-end-start-radius: var(--origam-radius---none);
+  --origam-sheet---border-end-end-radius: var(--origam-radius---none);
   --origam-sheet---width: 100%;
   --origam-sheet---max-width: 100%;
-  --origam-sheet---min-width: 0px;
+  --origam-sheet---min-width: var(--origam-space---0);
   --origam-sheet---height: 100%;
   --origam-sheet---max-height: 100%;
-  --origam-sheet---min-height: 0px;
-  --origam-sheet---padding-block-start: 0px;
-  --origam-sheet---padding-block-end: 0px;
-  --origam-sheet---padding-inline-start: 0px;
-  --origam-sheet---padding-inline-end: 0px;
-  --origam-sheet---margin-block-start: 0px;
-  --origam-sheet---margin-block-end: 0px;
-  --origam-sheet---margin-inline-start: 0px;
-  --origam-sheet---margin-inline-end: 0px;
-  --origam-sheet__border---border-top-width: 1px;
-  --origam-sheet__border---border-left-width: 1px;
-  --origam-sheet__border---border-bottom-width: 1px;
-  --origam-sheet__border---border-right-width: 1px;
-  --origam-sheet__border---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-  --origam-sheet__rounded---border-radius: 4px;
-  --origam-sheet__swipeable---border-radius: 24px;
+  --origam-sheet---min-height: var(--origam-space---0);
+  --origam-sheet---padding-block-start: var(--origam-space---0);
+  --origam-sheet---padding-block-end: var(--origam-space---0);
+  --origam-sheet---padding-inline-start: var(--origam-space---0);
+  --origam-sheet---padding-inline-end: var(--origam-space---0);
+  --origam-sheet---margin-block-start: var(--origam-space---0);
+  --origam-sheet---margin-block-end: var(--origam-space---0);
+  --origam-sheet---margin-inline-start: var(--origam-space---0);
+  --origam-sheet---margin-inline-end: var(--origam-space---0);
+  --origam-sheet__border---border-top-width: var(--origam-border__width---thin);
+  --origam-sheet__border---border-left-width: var(--origam-border__width---thin);
+  --origam-sheet__border---border-bottom-width: var(--origam-border__width---thin);
+  --origam-sheet__border---border-right-width: var(--origam-border__width---thin);
+  --origam-sheet__border---box-shadow: var(--origam-shadow---none);
+  --origam-sheet__rounded---border-radius: var(--origam-radius---sm);
+  --origam-sheet__swipeable---border-radius: var(--origam-radius---2xl);
   --origam-sheet__bottom---snap-peek: 120px;
   --origam-sheet__bottom---snap-half: 50vh;
   --origam-sheet__bottom---snap-full: 90vh;
   --origam-sheet__handle---width: 32px;
   --origam-sheet__handle---height: 4px;
-  --origam-sheet__handle---color: #d4d4d4;
-  --origam-sheet__handle---border-radius: 9999px;
-  --origam-sheet__handle---margin-block: 8px;
+  --origam-sheet__handle---color: var(--origam-color__border---subtle);
+  --origam-sheet__handle---border-radius: var(--origam-radius---full);
+  --origam-sheet__handle---margin-block: var(--origam-space---2);
   --origam-system-bar---display: flex;
   --origam-system-bar---flex: 1 1 auto;
   --origam-system-bar---align-items: center;
@@ -805,443 +806,443 @@
   --origam-system-bar---width: 100%;
   --origam-system-bar---height: 24px;
   --origam-system-bar---height-window: 32px;
-  --origam-system-bar---padding-inline: 8px;
-  --origam-system-bar---background: #404040;
-  --origam-system-bar---color: #ffffff;
-  --origam-system-bar---font-size: 0.75rem;
-  --origam-system-bar---font-weight: 400;
-  --origam-system-bar---letter-spacing: 0.0094em;
+  --origam-system-bar---padding-inline: var(--origam-space---2);
+  --origam-system-bar---background: var(--origam-color__neutral---700);
+  --origam-system-bar---color: var(--origam-color__text---inverse);
+  --origam-system-bar---font-size: var(--origam-font__size---sm);
+  --origam-system-bar---font-weight: var(--origam-font__weight---regular);
+  --origam-system-bar---letter-spacing: var(--origam-font__letterSpacing---wide);
   --origam-system-bar---line-height: 1.667;
   --origam-system-bar---text-transform: none;
-  --origam-system-bar__icon---opacity: 0.7;
+  --origam-system-bar__icon---opacity: var(--origam-opacity---70);
   --origam-system-bar---border-style: solid;
-  --origam-system-bar---border-color: #a3a3a3;
-  --origam-system-bar---border-top-width: 0px;
-  --origam-system-bar---border-left-width: 0px;
-  --origam-system-bar---border-bottom-width: 0px;
-  --origam-system-bar---border-right-width: 0px;
-  --origam-system-bar---border-start-start-radius: 0px;
-  --origam-system-bar---border-start-end-radius: 0px;
-  --origam-system-bar---border-end-start-radius: 0px;
-  --origam-system-bar---border-end-end-radius: 0px;
-  --origam-confirm-wrapper---padding-start: 8px;
-  --origam-confirm-wrapper---padding-end: 8px;
-  --origam-confirm-wrapper---padding-top: 8px;
-  --origam-confirm-wrapper---padding-bottom: 16px;
+  --origam-system-bar---border-color: var(--origam-color__border---default);
+  --origam-system-bar---border-top-width: var(--origam-border__width---0);
+  --origam-system-bar---border-left-width: var(--origam-border__width---0);
+  --origam-system-bar---border-bottom-width: var(--origam-border__width---0);
+  --origam-system-bar---border-right-width: var(--origam-border__width---0);
+  --origam-system-bar---border-start-start-radius: var(--origam-radius---none);
+  --origam-system-bar---border-start-end-radius: var(--origam-radius---none);
+  --origam-system-bar---border-end-start-radius: var(--origam-radius---none);
+  --origam-system-bar---border-end-end-radius: var(--origam-radius---none);
+  --origam-confirm-wrapper---padding-start: var(--origam-space---2);
+  --origam-confirm-wrapper---padding-end: var(--origam-space---2);
+  --origam-confirm-wrapper---padding-top: var(--origam-space---2);
+  --origam-confirm-wrapper---padding-bottom: var(--origam-space---4);
   --origam-confirm-wrapper---details-min-height: 22px;
-  --origam-confirm-wrapper---details-font-size: 0.75rem;
+  --origam-confirm-wrapper---details-font-size: var(--origam-font__size---sm);
   --origam-confirm-wrapper---details-letter-spacing: 0.0333em;
   --origam-confirm-wrapper---details-line-height: 1;
-  --origam-confirm-wrapper---icon-opacity: 0.7;
-  --origam-confirm-wrapper---icon-opacity-active: 1;
-  --origam-confirm-wrapper---disabled-opacity: 0.5;
+  --origam-confirm-wrapper---icon-opacity: var(--origam-opacity---70);
+  --origam-confirm-wrapper---icon-opacity-active: var(--origam-opacity---100);
+  --origam-confirm-wrapper---disabled-opacity: var(--origam-opacity---50);
   --origam-confirm-wrapper---horizontal-gap: 1em;
-  --origam-confirm-wrapper--error---color: #b91c1c;
-  --origam-field---padding-start: 16px;
-  --origam-field---padding-end: 16px;
-  --origam-field---padding-top: 8px;
+  --origam-confirm-wrapper--error---color: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-field---padding-start: var(--origam-space---4);
+  --origam-field---padding-end: var(--origam-space---4);
+  --origam-field---padding-top: var(--origam-space---2);
   --origam-field---padding-bottom: 6px;
   --origam-field---font-size: 16px;
-  --origam-field---letter-spacing: 0.0094em;
-  --origam-field---border-radius: 4px;
-  --origam-field---border-color: #a3a3a3;
-  --origam-field---border-width: 1px;
+  --origam-field---letter-spacing: var(--origam-font__letterSpacing---wide);
+  --origam-field---border-radius: var(--origam-radius---sm);
+  --origam-field---border-color: var(--origam-color__border---default);
+  --origam-field---border-width: var(--origam-border__width---thin);
   --origam-field---border-opacity: 0.38;
   --origam-field---background-color: rgba(0, 0, 0, 0);
-  --origam-field---color: #171717;
-  --origam-field---opacity-disabled: 0.5;
-  --origam-field---transition-duration: 150ms;
-  --origam-field---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-field--error---border-color: #cf6679;
-  --origam-field--error---color: #b91c1c;
-  --origam-field---variant-solo-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
+  --origam-field---color: var(--origam-color__text---primary);
+  --origam-field---opacity-disabled: var(--origam-opacity---50);
+  --origam-field---transition-duration: var(--origam-motion__duration---normal);
+  --origam-field---transition-easing: var(--origam-motion__easing---standard);
+  --origam-field--error---border-color: var(--origam-color__feedback--danger---border);
+  --origam-field--error---color: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-field---variant-solo-box-shadow: var(--origam-shadow---sm);
   --origam-field---variant-outlined-background-color: rgba(0, 0, 0, 0);
-  --origam-field__overlay---background-color: #ffffff;
-  --origam-field__overlay---opacity: 0;
+  --origam-field__overlay---background-color: var(--origam-color__overlay---scrim);
+  --origam-field__overlay---opacity: var(--origam-opacity---0);
   --origam-field__overlay---position: absolute;
   --origam-field__overlay---pointer-events: none;
   --origam-field__input---padding-block-sm: 2px;
   --origam-field__input---padding-block-md: 6px;
   --origam-field__input---padding-block-lg: 10px;
   --origam-field__input---padding-block-xl: 14px;
-  --origam-field__input---padding-top: 6px;
-  --origam-field__input---padding-bottom: 6px;
-  --origam-field__input---padding-start: 16px;
-  --origam-field__input---padding-end: 16px;
+  --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
+  --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
+  --origam-field__input---padding-start: var(--origam-space---4);
+  --origam-field__input---padding-end: var(--origam-space---4);
   --origam-field__input---opacity: 0.7;
   --origam-field__label---font-size: 0.75em;
-  --origam-field__label---transition-duration: 150ms;
-  --origam-field__label---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-field__prefix---opacity: 0;
-  --origam-field__prefix---opacity-active: 1;
-  --origam-field__suffix---opacity: 0;
-  --origam-field__suffix---opacity-active: 1;
+  --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
+  --origam-field__label---transition-easing: var(--origam-motion__easing---standard);
+  --origam-field__prefix---opacity: var(--origam-opacity---0);
+  --origam-field__prefix---opacity-active: var(--origam-opacity---100);
+  --origam-field__suffix---opacity: var(--origam-opacity---0);
+  --origam-field__suffix---opacity-active: var(--origam-opacity---100);
   --origam-field---prepend-inner-icon-opacity: 0.7;
-  --origam-field---prepend-inner-icon-opacity-focused: 1;
+  --origam-field---prepend-inner-icon-opacity-focused: var(--origam-opacity---100);
   --origam-field---append-inner-icon-opacity: 0.7;
-  --origam-field---append-inner-icon-opacity-focused: 1;
-  --origam-field__clearable---opacity: 0;
-  --origam-field__clearable---opacity-visible: 1;
+  --origam-field---append-inner-icon-opacity-focused: var(--origam-opacity---100);
+  --origam-field__clearable---opacity: var(--origam-opacity---0);
+  --origam-field__clearable---opacity-visible: var(--origam-opacity---100);
   --origam-field__clearable---margin-inline: 4px;
   --origam-field__clearable---transition-duration: 150ms;
-  --origam-field__clearable---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-field__outline---border-color: #a3a3a3;
+  --origam-field__clearable---transition-easing: var(--origam-motion__easing---standard);
+  --origam-field__outline---border-color: var(--origam-color__border---default);
   --origam-field__outline---border-style: solid;
   --origam-field__outline---border-opacity: 0.38;
-  --origam-field__outline---border-opacity-hover: 1;
+  --origam-field__outline---border-opacity-hover: var(--origam-opacity---100);
   --origam-field__outline---transition-duration: 250ms;
-  --origam-field__outline---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-field__outline---transition-easing: var(--origam-motion__easing---standard);
   --origam-field__loader---height: 4px;
-  --origam-form__actions---margin-top: 16px;
-  --origam-form__actions---gap: 8px;
+  --origam-form__actions---margin-top: var(--origam-space---4);
+  --origam-form__actions---gap: var(--origam-space---2);
   --origam-form__actions---display: flex;
-  --origam-form__details---font-size: 0.75rem;
-  --origam-form__details---font-weight: 400;
+  --origam-form__details---font-size: var(--origam-font__size---sm);
+  --origam-form__details---font-weight: var(--origam-font__weight---regular);
   --origam-form__details---letter-spacing: 0.0333em;
   --origam-form__details---line-height: 1;
   --origam-form__details---min-height: 22px;
   --origam-form__details---padding-top: 6px;
   --origam-form__details---icon-opacity: 0.7;
-  --origam-form--error---messages-color: #b91c1c;
-  --origam-form--error---icon-color: #b91c1c;
-  --origam-form--error---icon-opacity: 1;
-  --origam-label---color: #525252;
-  --origam-label---font-size: 0.875rem;
-  --origam-label---font-weight: 400;
-  --origam-label---line-height: 1.5;
-  --origam-label---letter-spacing: 0em;
+  --origam-form--error---messages-color: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-form--error---icon-color: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-form--error---icon-opacity: var(--origam-opacity---100);
+  --origam-label---color: var(--origam-color__text---secondary);
+  --origam-label---font-size: var(--origam-font__size---md);
+  --origam-label---font-weight: var(--origam-font__weight---regular);
+  --origam-label---line-height: var(--origam-font__lineHeight---normal);
+  --origam-label---letter-spacing: var(--origam-font__letterSpacing---normal);
   --origam-label---pointer-events: none;
-  --origam-label---transition-duration: 150ms;
-  --origam-label---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-label---transition-duration: var(--origam-motion__duration---normal);
+  --origam-label---transition-easing: var(--origam-motion__easing---standard);
   --origam-label__floating---font-size: 0.75em;
   --origam-label__floating---visibility: hidden;
-  --origam-label---required-indicator-color: #b91c1c;
+  --origam-label---required-indicator-color: var(--origam-color__feedback--danger---fgSubtle);
   --origam-messages---color: currentColor;
   --origam-messages---font-size: 12px;
   --origam-messages---min-height: 14px;
   --origam-messages---min-width: 1px;
-  --origam-messages---opacity: 0.87;
-  --origam-messages---padding: 0px;
+  --origam-messages---opacity: var(--origam-opacity---87);
+  --origam-messages---padding: var(--origam-space---0);
   --origam-messages---flex: 1 1 auto;
   --origam-messages---position: relative;
-  --origam-messages---density: 0px;
+  --origam-messages---density: var(--origam-space---0);
   --origam-messages__message---line-height: 1;
   --origam-messages__message---word-break: break-word;
   --origam-messages__message---overflow-wrap: break-word;
-  --origam-messages__message---transition-duration: 150ms;
-  --origam-number-field---background-color: #ffffff;
-  --origam-number-field---color: #171717;
-  --origam-number-field---border-color: #a3a3a3;
-  --origam-number-field---border-color-focus: #7c3aed;
-  --origam-number-field---border-color-error: #cf6679;
-  --origam-number-field---border-color-disabled: #d4d4d4;
-  --origam-number-field---border-radius: 4px;
-  --origam-number-field---font-size: 0.875rem;
-  --origam-number-field---opacity-disabled: 0.5;
-  --origam-number-field---padding-inline: 12px;
-  --origam-number-field---transition-duration: 200ms;
-  --origam-number-field---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-messages__message---transition-duration: var(--origam-motion__duration---normal);
+  --origam-number-field---background-color: var(--origam-color__surface---default);
+  --origam-number-field---color: var(--origam-color__text---primary);
+  --origam-number-field---border-color: var(--origam-color__border---default);
+  --origam-number-field---border-color-focus: var(--origam-color__border---focus);
+  --origam-number-field---border-color-error: var(--origam-color__feedback--danger---border);
+  --origam-number-field---border-color-disabled: var(--origam-color__border---subtle);
+  --origam-number-field---border-radius: var(--origam-radius---sm);
+  --origam-number-field---font-size: var(--origam-font__size---md);
+  --origam-number-field---opacity-disabled: var(--origam-opacity---50);
+  --origam-number-field---padding-inline: var(--origam-space---3);
+  --origam-number-field---transition-duration: var(--origam-motion__duration---medium);
+  --origam-number-field---transition-easing: var(--origam-motion__easing---standard);
   --origam-number-field__control---background-color: rgba(0, 0, 0, 0);
-  --origam-number-field__control---border-radius: 0px;
+  --origam-number-field__control---border-radius: var(--origam-radius---none);
   --origam-number-field__control---cursor: pointer;
   --origam-number-field__control---cursor-disabled: not-allowed;
   --origam-number-field__increment---background-color: rgba(0, 0, 0, 0);
-  --origam-number-field__increment---background-color-hover: #d4d4d4;
-  --origam-number-field__increment---background-color-disabled: #e6e6e6;
-  --origam-number-field__increment---color: #171717;
-  --origam-number-field__increment---color-disabled: #a3a3a3;
+  --origam-number-field__increment---background-color-hover: var(--origam-color__action--secondary---bgHover);
+  --origam-number-field__increment---background-color-disabled: var(--origam-color__action--primary---bgDisabled);
+  --origam-number-field__increment---color: var(--origam-color__text---primary);
+  --origam-number-field__increment---color-disabled: var(--origam-color__text---disabled);
   --origam-number-field__increment---cursor: pointer;
   --origam-number-field__increment---cursor-disabled: not-allowed;
   --origam-number-field__decrement---background-color: rgba(0, 0, 0, 0);
-  --origam-number-field__decrement---background-color-hover: #d4d4d4;
-  --origam-number-field__decrement---background-color-disabled: #e6e6e6;
-  --origam-number-field__decrement---color: #171717;
-  --origam-number-field__decrement---color-disabled: #a3a3a3;
+  --origam-number-field__decrement---background-color-hover: var(--origam-color__action--secondary---bgHover);
+  --origam-number-field__decrement---background-color-disabled: var(--origam-color__action--primary---bgDisabled);
+  --origam-number-field__decrement---color: var(--origam-color__text---primary);
+  --origam-number-field__decrement---color-disabled: var(--origam-color__text---disabled);
   --origam-number-field__decrement---cursor: pointer;
   --origam-number-field__decrement---cursor-disabled: not-allowed;
-  --origam-number-field__compact---gap: 8px;
+  --origam-number-field__compact---gap: var(--origam-space---2);
   --origam-number-field__compact---input-width: 3em;
-  --origam-otp-input-field---background-color: #ffffff;
-  --origam-otp-input-field---color: #171717;
-  --origam-otp-input-field---border-radius: 4px;
-  --origam-otp-input-field---padding-block: 8px;
-  --origam-otp-input-field---font-size: 1.25rem;
-  --origam-otp-input-field---gap: 8px;
-  --origam-otp-input-field---transition-duration: 200ms;
-  --origam-otp-input-field---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-otp-input-field__content---height: 64px;
+  --origam-otp-input-field---background-color: var(--origam-color__surface---default);
+  --origam-otp-input-field---color: var(--origam-color__text---primary);
+  --origam-otp-input-field---border-radius: var(--origam-radius---sm);
+  --origam-otp-input-field---padding-block: var(--origam-space---2);
+  --origam-otp-input-field---font-size: var(--origam-font__size---2xl);
+  --origam-otp-input-field---gap: var(--origam-space---2);
+  --origam-otp-input-field---transition-duration: var(--origam-motion__duration---medium);
+  --origam-otp-input-field---transition-easing: var(--origam-motion__easing---standard);
+  --origam-otp-input-field__content---height: var(--origam-space---16);
   --origam-otp-input-field__content---max-width: 320px;
   --origam-otp-input-field__content---max-width-divided: 360px;
-  --origam-otp-input-field__content---padding: 8px;
-  --origam-otp-input-field__divider---margin-inline: 8px;
+  --origam-otp-input-field__content---padding: var(--origam-space---2);
+  --origam-otp-input-field__divider---margin-inline: var(--origam-space---2);
   --origam-otp-input-field__cell---width: 100%;
   --origam-otp-input-field__cell---height: 100%;
   --origam-otp-input-field__cell---color: inherit;
-  --origam-otp-input-field__cell---border-color: #a3a3a3;
-  --origam-otp-input-field__cell---border-color-filled: #404040;
-  --origam-otp-input-field__cell---border-color-focused: #7c3aed;
-  --origam-otp-input-field__cell---border-color-error: #cf6679;
+  --origam-otp-input-field__cell---border-color: var(--origam-color__border---default);
+  --origam-otp-input-field__cell---border-color-filled: var(--origam-color__border---strong);
+  --origam-otp-input-field__cell---border-color-focused: var(--origam-color__border---focus);
+  --origam-otp-input-field__cell---border-color-error: var(--origam-color__feedback--danger---border);
   --origam-otp-input-field__cell---background-color: rgba(0, 0, 0, 0);
-  --origam-otp-input-field__cell---font-size: 1.25rem;
+  --origam-otp-input-field__cell---font-size: var(--origam-font__size---2xl);
   --origam-otp-input-field__cell---text-align: center;
   --origam-otp-input-field__cell---outline: none;
   --origam-checkbox---min-height: 56px;
   --origam-checkbox---flex: 0 1 auto;
-  --origam-checkbox---transition-duration: 200ms;
-  --origam-checkbox---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-checkbox__input---background-color: #ffffff;
-  --origam-checkbox__input---background-color-checked: #7c3aed;
-  --origam-checkbox__input---background-color-indeterminate: #7c3aed;
-  --origam-checkbox__input---background-color-disabled: #e6e6e6;
-  --origam-checkbox__input---background-color-error: #fff1f2;
-  --origam-checkbox__input---border-color: #a3a3a3;
-  --origam-checkbox__input---border-color-checked: #7c3aed;
-  --origam-checkbox__input---border-color-focused: #7c3aed;
-  --origam-checkbox__input---border-color-error: #cf6679;
-  --origam-checkbox__input---border-color-disabled: #d4d4d4;
-  --origam-checkbox__input---border-width: 1px;
+  --origam-checkbox---transition-duration: var(--origam-motion__duration---medium);
+  --origam-checkbox---transition-easing: var(--origam-motion__easing---standard);
+  --origam-checkbox__input---background-color: var(--origam-color__surface---default);
+  --origam-checkbox__input---background-color-checked: var(--origam-color__action--primary---bg);
+  --origam-checkbox__input---background-color-indeterminate: var(--origam-color__action--primary---bg);
+  --origam-checkbox__input---background-color-disabled: var(--origam-color__action--primary---bgDisabled);
+  --origam-checkbox__input---background-color-error: var(--origam-color__feedback--danger---bgSubtle);
+  --origam-checkbox__input---border-color: var(--origam-color__border---default);
+  --origam-checkbox__input---border-color-checked: var(--origam-color__action--primary---bg);
+  --origam-checkbox__input---border-color-focused: var(--origam-color__border---focus);
+  --origam-checkbox__input---border-color-error: var(--origam-color__feedback--danger---border);
+  --origam-checkbox__input---border-color-disabled: var(--origam-color__border---subtle);
+  --origam-checkbox__input---border-width: var(--origam-border__width---thin);
   --origam-checkbox__input---border-style: solid;
-  --origam-checkbox__input---border-radius: 2px;
-  --origam-checkbox__input---opacity-disabled: 0.5;
-  --origam-checkbox__icon---color: #ffffff;
-  --origam-checkbox__icon---color-unchecked: #171717;
-  --origam-checkbox__icon---color-disabled: #a3a3a3;
-  --origam-checkbox__icon---color-error: #b91c1c;
-  --origam-checkbox__icon---opacity: 1;
-  --origam-checkbox__label---color: #171717;
-  --origam-checkbox__label---color-disabled: #a3a3a3;
-  --origam-checkbox__label---color-error: #b91c1c;
-  --origam-checkbox-btn---border-radius: 4px;
-  --origam-checkbox-btn---background-color: #e6e6e6;
-  --origam-checkbox-btn---background-color-hover: #d4d4d4;
-  --origam-checkbox-btn---background-color-checked: #7c3aed;
-  --origam-checkbox-btn---background-color-disabled: #e6e6e6;
-  --origam-checkbox-btn---color: #171717;
-  --origam-checkbox-btn---color-checked: #ffffff;
-  --origam-checkbox-btn---color-disabled: #a3a3a3;
-  --origam-checkbox-btn---border-color: #a3a3a3;
-  --origam-checkbox-btn---border-color-checked: #7c3aed;
-  --origam-checkbox-btn---border-color-error: #cf6679;
-  --origam-checkbox-btn---border-width: 1px;
+  --origam-checkbox__input---border-radius: var(--origam-radius---xs);
+  --origam-checkbox__input---opacity-disabled: var(--origam-opacity---50);
+  --origam-checkbox__icon---color: var(--origam-color__text---onColor);
+  --origam-checkbox__icon---color-unchecked: var(--origam-color__text---primary);
+  --origam-checkbox__icon---color-disabled: var(--origam-color__text---disabled);
+  --origam-checkbox__icon---color-error: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-checkbox__icon---opacity: var(--origam-opacity---100);
+  --origam-checkbox__label---color: var(--origam-color__text---primary);
+  --origam-checkbox__label---color-disabled: var(--origam-color__text---disabled);
+  --origam-checkbox__label---color-error: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-checkbox-btn---border-radius: var(--origam-radius---sm);
+  --origam-checkbox-btn---background-color: var(--origam-color__action--secondary---bg);
+  --origam-checkbox-btn---background-color-hover: var(--origam-color__action--secondary---bgHover);
+  --origam-checkbox-btn---background-color-checked: var(--origam-color__action--primary---bg);
+  --origam-checkbox-btn---background-color-disabled: var(--origam-color__action--primary---bgDisabled);
+  --origam-checkbox-btn---color: var(--origam-color__text---primary);
+  --origam-checkbox-btn---color-checked: var(--origam-color__text---onColor);
+  --origam-checkbox-btn---color-disabled: var(--origam-color__text---disabled);
+  --origam-checkbox-btn---border-color: var(--origam-color__border---default);
+  --origam-checkbox-btn---border-color-checked: var(--origam-color__action--primary---bg);
+  --origam-checkbox-btn---border-color-error: var(--origam-color__feedback--danger---border);
+  --origam-checkbox-btn---border-width: var(--origam-border__width---thin);
   --origam-checkbox-btn---border-style: solid;
-  --origam-checkbox-btn---padding-inline: 12px;
-  --origam-checkbox-btn---padding-block: 8px;
-  --origam-checkbox-btn---font-size: 0.875rem;
-  --origam-checkbox-btn---font-weight: 500;
-  --origam-checkbox-btn---transition-duration: 200ms;
-  --origam-checkbox-btn---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-checkbox-btn---opacity-disabled: 0.5;
-  --origam-selection-control---color: #171717;
-  --origam-selection-control---color-disabled: #a3a3a3;
-  --origam-selection-control---color-error: #b91c1c;
-  --origam-selection-control---opacity-disabled: 0.5;
+  --origam-checkbox-btn---padding-inline: var(--origam-space---3);
+  --origam-checkbox-btn---padding-block: var(--origam-space---2);
+  --origam-checkbox-btn---font-size: var(--origam-font__size---md);
+  --origam-checkbox-btn---font-weight: var(--origam-font__weight---medium);
+  --origam-checkbox-btn---transition-duration: var(--origam-motion__duration---medium);
+  --origam-checkbox-btn---transition-easing: var(--origam-motion__easing---standard);
+  --origam-checkbox-btn---opacity-disabled: var(--origam-opacity---50);
+  --origam-selection-control---color: var(--origam-color__text---primary);
+  --origam-selection-control---color-disabled: var(--origam-color__text---disabled);
+  --origam-selection-control---color-error: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-selection-control---opacity-disabled: var(--origam-opacity---50);
   --origam-selection-control---density: 0px;
-  --origam-selection-control---transition-duration: 200ms;
-  --origam-selection-control---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-selection-control---transition-duration: var(--origam-motion__duration---medium);
+  --origam-selection-control---transition-easing: var(--origam-motion__easing---standard);
   --origam-selection-control__wrapper---width: 40px;
   --origam-selection-control__wrapper---height: 40px;
-  --origam-selection-control__input---border-radius: 9999px;
-  --origam-selection-control__input---overlay-opacity-hover: 0.12;
-  --origam-selection-control__input---overlay-opacity-focus: 0.12;
+  --origam-selection-control__input---border-radius: var(--origam-radius---full);
+  --origam-selection-control__input---overlay-opacity-hover: var(--origam-opacity---12);
+  --origam-selection-control__input---overlay-opacity-focus: var(--origam-opacity---12);
   --origam-selection-control__input---overlay-background-color: currentColor;
-  --origam-selection-control__icon---opacity: 0.26;
-  --origam-selection-control__icon---opacity-active: 1;
-  --origam-selection-control__label---color: #171717;
-  --origam-selection-control__label---color-error: #b91c1c;
-  --origam-selection-control__label---opacity-disabled: 1;
+  --origam-selection-control__icon---opacity: var(--origam-opacity---26);
+  --origam-selection-control__icon---opacity-active: var(--origam-opacity---100);
+  --origam-selection-control__label---color: var(--origam-color__text---primary);
+  --origam-selection-control__label---color-error: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-selection-control__label---opacity-disabled: var(--origam-opacity---100);
   --origam-selection-control-group---display: flex;
   --origam-selection-control-group---flex-direction: column;
   --origam-selection-control-group---flex-direction-inline: row;
   --origam-selection-control-group---flex-wrap: wrap;
-  --origam-selection-control-group---gap: 8px;
-  --origam-selection-control-group---padding-block: 0px;
-  --origam-selection-control-group---padding-inline: 0px;
-  --origam-file-field---gap: 8px;
-  --origam-file-field---list-gap: 8px;
-  --origam-file-field---field-gap: 8px;
-  --origam-file-field---details-padding-inline: 16px;
-  --origam-file-field---transition-duration: 200ms;
-  --origam-file-field---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-selection-control-group---gap: var(--origam-space---2);
+  --origam-selection-control-group---padding-block: var(--origam-space---0);
+  --origam-selection-control-group---padding-inline: var(--origam-space---0);
+  --origam-file-field---gap: var(--origam-space---2);
+  --origam-file-field---list-gap: var(--origam-space---2);
+  --origam-file-field---field-gap: var(--origam-space---2);
+  --origam-file-field---details-padding-inline: var(--origam-space---4);
+  --origam-file-field---transition-duration: var(--origam-motion__duration---medium);
+  --origam-file-field---transition-easing: var(--origam-motion__easing---standard);
   --origam-file-field__dropzone---background-color: rgba(0, 0, 0, 0);
-  --origam-file-field__dropzone---color: #a3a3a3;
-  --origam-file-field__dropzone---color-hover: #404040;
+  --origam-file-field__dropzone---color: var(--origam-color__border---default);
+  --origam-file-field__dropzone---color-hover: var(--origam-color__border---strong);
   --origam-file-field__dropzone---border-width: 2px;
   --origam-file-field__dropzone---border-style: dashed;
-  --origam-file-field__dropzone---border-radius: 8px;
+  --origam-file-field__dropzone---border-radius: var(--origam-radius---md);
   --origam-file-field__dropzone---min-height: 140px;
-  --origam-file-field__dropzone---padding: 24px;
-  --origam-file-field__dropzone---gap: 8px;
+  --origam-file-field__dropzone---padding: var(--origam-space---6);
+  --origam-file-field__dropzone---gap: var(--origam-space---2);
   --origam-file-field__dropzone---cursor: pointer;
   --origam-file-field__dropzone---cursor-disabled: not-allowed;
-  --origam-file-field__dropzone---opacity-disabled: 0.6;
+  --origam-file-field__dropzone---opacity-disabled: var(--origam-opacity---60);
   --origam-file-field__dropzone---icon-font-size: 40px;
   --origam-file-field__dropzone---icon-opacity: 0.7;
-  --origam-file-field__dropzone---title-font-size: 0.875rem;
-  --origam-file-field__dropzone---title-font-weight: 500;
-  --origam-file-field__dropzone---subtitle-font-size: 0.75rem;
+  --origam-file-field__dropzone---title-font-size: var(--origam-font__size---md);
+  --origam-file-field__dropzone---title-font-weight: var(--origam-font__weight---medium);
+  --origam-file-field__dropzone---subtitle-font-size: var(--origam-font__size---sm);
   --origam-file-field__dropzone---subtitle-opacity: 0.6;
-  --origam-file-field__dropzone---has-file-padding: 12px;
-  --origam-file-field__dropzone---has-file-padding-inline: 12px;
-  --origam-file-field__dropzone---has-file-gap: 12px;
-  --origam-file-field__dropzone---dragging-background-color: #eff6ff;
-  --origam-file-field__dropzone---dragging-border-color: #2196f3;
-  --origam-file-field__dropzone---border-color: #a3a3a3;
-  --origam-file-field__dropzone---border-color-dragging: #7c3aed;
-  --origam-file-field__dropzone---border-color-error: #ef4444;
-  --origam-file-field__dropzone---bg-dragging: #fafafa;
-  --origam-file-field__dropzone---padding-block: 24px;
-  --origam-file-field__dropzone---gap-deck: 8px;
-  --origam-file-field__dropzone--error---border-color: #ef4444;
-  --origam-file-field__dropzone--error---fg: #b91c1c;
-  --origam-file-field-dragndrop-item---gap: 12px;
-  --origam-file-field-dragndrop-item---content-gap: 4px;
-  --origam-file-field-dragndrop-item---actions-gap: 4px;
-  --origam-file-field-dragndrop-item__icon---color: #525252;
-  --origam-file-field-dragndrop-item__meta---color: #525252;
-  --origam-file-field-dragndrop-item__meta---font-size: 0.75rem;
-  --origam-file-field-dragndrop-item__name---font-size: 0.875rem;
-  --origam-file-field-dragndrop-item__name---font-weight: 500;
-  --origam-file-field-dragndrop-item__progress---margin-top: 4px;
+  --origam-file-field__dropzone---has-file-padding: var(--origam-space---3);
+  --origam-file-field__dropzone---has-file-padding-inline: var(--origam-space---3);
+  --origam-file-field__dropzone---has-file-gap: var(--origam-space---3);
+  --origam-file-field__dropzone---dragging-background-color: var(--origam-color__feedback--info---bgSubtle);
+  --origam-file-field__dropzone---dragging-border-color: var(--origam-color__feedback--info---bg);
+  --origam-file-field__dropzone---border-color: var(--origam-color__border---default);
+  --origam-file-field__dropzone---border-color-dragging: var(--origam-color__action--primary---bg);
+  --origam-file-field__dropzone---border-color-error: var(--origam-color__feedback--danger---bg);
+  --origam-file-field__dropzone---bg-dragging: var(--origam-color__surface---sunken);
+  --origam-file-field__dropzone---padding-block: var(--origam-space---6);
+  --origam-file-field__dropzone---gap-deck: var(--origam-space---2);
+  --origam-file-field__dropzone--error---border-color: var(--origam-color__feedback--danger---bg);
+  --origam-file-field__dropzone--error---fg: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-file-field-dragndrop-item---gap: var(--origam-space---3);
+  --origam-file-field-dragndrop-item---content-gap: var(--origam-space---1);
+  --origam-file-field-dragndrop-item---actions-gap: var(--origam-space---1);
+  --origam-file-field-dragndrop-item__icon---color: var(--origam-color__text---secondary);
+  --origam-file-field-dragndrop-item__meta---color: var(--origam-color__text---secondary);
+  --origam-file-field-dragndrop-item__meta---font-size: var(--origam-font__size---sm);
+  --origam-file-field-dragndrop-item__name---font-size: var(--origam-font__size---md);
+  --origam-file-field-dragndrop-item__name---font-weight: var(--origam-font__weight---medium);
+  --origam-file-field-dragndrop-item__progress---margin-top: var(--origam-space---1);
   --origam-file-field-dragndrop-item__remove---size: small;
-  --origam-file-field-list-item---background-color: #f5f5f5;
-  --origam-file-field-list-item---border-color: #d4d4d4;
+  --origam-file-field-list-item---background-color: var(--origam-color__surface---overlay);
+  --origam-file-field-list-item---border-color: var(--origam-color__border---subtle);
   --origam-file-field-list-item---border-width: 1px;
   --origam-file-field-list-item---border-style: solid;
-  --origam-file-field-list-item---border-radius: 4px;
-  --origam-file-field-list-item---gap: 12px;
-  --origam-file-field-list-item---padding-block: 8px;
-  --origam-file-field-list-item---padding-inline: 12px;
-  --origam-file-field-list-item---content-gap: 4px;
-  --origam-file-field-list-item---actions-gap: 4px;
-  --origam-file-field-list-item__icon---color: #525252;
-  --origam-file-field-list-item__name---font-size: 0.875rem;
-  --origam-file-field-list-item__name---font-weight: 500;
-  --origam-file-field-list-item__meta---color: #525252;
-  --origam-file-field-list-item__meta---font-size: 0.75rem;
-  --origam-file-field-list-item__progress---margin-top: 4px;
+  --origam-file-field-list-item---border-radius: var(--origam-radius---sm);
+  --origam-file-field-list-item---gap: var(--origam-space---3);
+  --origam-file-field-list-item---padding-block: var(--origam-space---2);
+  --origam-file-field-list-item---padding-inline: var(--origam-space---3);
+  --origam-file-field-list-item---content-gap: var(--origam-space---1);
+  --origam-file-field-list-item---actions-gap: var(--origam-space---1);
+  --origam-file-field-list-item__icon---color: var(--origam-color__text---secondary);
+  --origam-file-field-list-item__name---font-size: var(--origam-font__size---md);
+  --origam-file-field-list-item__name---font-weight: var(--origam-font__weight---medium);
+  --origam-file-field-list-item__meta---color: var(--origam-color__text---secondary);
+  --origam-file-field-list-item__meta---font-size: var(--origam-font__size---sm);
+  --origam-file-field-list-item__progress---margin-top: var(--origam-space---1);
   --origam-file-field-list-item__remove---size: small;
   --origam-password-field---input-transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
   --origam-password-field---toggle-icon-cursor: pointer;
   --origam-password-field---toggle-icon-opacity: 1;
-  --origam-password-field__details---padding-inline: 16px;
-  --origam-password-field__infos---padding: 0px;
-  --origam-password-field__infos---padding-inline: 12px;
-  --origam-password-field__item---padding: 8px;
+  --origam-password-field__details---padding-inline: var(--origam-space---4);
+  --origam-password-field__infos---padding: var(--origam-space---0);
+  --origam-password-field__infos---padding-inline: var(--origam-space---3);
+  --origam-password-field__item---padding: var(--origam-space---2);
   --origam-password-field__item---text-align: center;
   --origam-password-field__item---position: relative;
   --origam-password-field__item---overflow: visible;
   --origam-password-field---item--valid-icon-opacity: 1;
   --origam-password-field---item-icon-opacity: 0.2;
   --origam-password-field---item-icon-font-size: 45px;
-  --origam-password-field---item-icon-font-weight: 700;
+  --origam-password-field---item-icon-font-weight: var(--origam-font__weight---bold);
   --origam-password-field__validate---position: absolute;
-  --origam-password-field__validate---top: 0px;
-  --origam-password-field__validate---right: 0px;
+  --origam-password-field__validate---top: var(--origam-space---0);
+  --origam-password-field__validate---right: var(--origam-space---0);
   --origam-password-field__validate---transform: translate(50%, -50%);
-  --origam-password-field__strength---height: 4px;
-  --origam-password-field__strength---gap: 4px;
-  --origam-password-field__strength---margin-block-start: 8px;
-  --origam-password-field__strength---border-radius: 9999px;
-  --origam-password-field__strength---bg-empty: #fafafa;
-  --origam-password-field__strength---bg-weak: #ef4444;
-  --origam-password-field__strength---bg-fair: #fb8c00;
-  --origam-password-field__strength---bg-good: #2196f3;
-  --origam-password-field__strength---bg-strong: #4caf50;
-  --origam-password-field__requirements---font-size: 0.75rem;
-  --origam-password-field__requirements---gap: 4px;
-  --origam-password-field__requirements---margin-block-start: 8px;
-  --origam-password-field__requirements---icon-size: 0.875rem;
-  --origam-password-field__requirements---color-pending: #525252;
-  --origam-password-field__requirements---color-satisfied: #4caf50;
+  --origam-password-field__strength---height: var(--origam-space---1);
+  --origam-password-field__strength---gap: var(--origam-space---1);
+  --origam-password-field__strength---margin-block-start: var(--origam-space---2);
+  --origam-password-field__strength---border-radius: var(--origam-radius---full);
+  --origam-password-field__strength---bg-empty: var(--origam-color__surface---sunken);
+  --origam-password-field__strength---bg-weak: var(--origam-color__feedback--danger---bg);
+  --origam-password-field__strength---bg-fair: var(--origam-color__feedback--warning---bg);
+  --origam-password-field__strength---bg-good: var(--origam-color__feedback--info---bg);
+  --origam-password-field__strength---bg-strong: var(--origam-color__feedback--success---bg);
+  --origam-password-field__requirements---font-size: var(--origam-font__size---sm);
+  --origam-password-field__requirements---gap: var(--origam-space---1);
+  --origam-password-field__requirements---margin-block-start: var(--origam-space---2);
+  --origam-password-field__requirements---icon-size: var(--origam-font__size---md);
+  --origam-password-field__requirements---color-pending: var(--origam-color__text---secondary);
+  --origam-password-field__requirements---color-satisfied: var(--origam-color__feedback--success---bg);
   --origam-input---padding-top: 16px;
-  --origam-input---font-size: 0.875rem;
-  --origam-input---font-weight: 400;
+  --origam-input---font-size: var(--origam-font__size---md);
+  --origam-input---font-weight: var(--origam-font__weight---regular);
   --origam-input---line-height: 1.5;
-  --origam-input---icon-opacity: 0.7;
-  --origam-input---icon-opacity-active: 1;
-  --origam-input---disabled-opacity: 0.5;
-  --origam-input---error-color: #b91c1c;
+  --origam-input---icon-opacity: var(--origam-opacity---70);
+  --origam-input---icon-opacity-active: var(--origam-opacity---100);
+  --origam-input---disabled-opacity: var(--origam-opacity---50);
+  --origam-input---error-color: var(--origam-color__feedback--danger---fgSubtle);
   --origam-input__control---height-sm: 28px;
   --origam-input__control---height-md: 36px;
   --origam-input__control---height-lg: 44px;
   --origam-input__control---height-xl: 52px;
-  --origam-input__control---height: 36px;
-  --origam-input__details---font-size: 0.75rem;
-  --origam-input__details---font-weight: 400;
+  --origam-input__control---height: var(--origam-input__control---height-md);
+  --origam-input__details---font-size: var(--origam-font__size---sm);
+  --origam-input__details---font-weight: var(--origam-font__weight---regular);
   --origam-input__details---letter-spacing: 0.0333em;
   --origam-input__details---line-height: 1;
   --origam-input__details---min-height: 22px;
-  --origam-input__details---padding-top: 8px;
-  --origam-input__prepend---padding-top: 8px;
+  --origam-input__details---padding-top: var(--origam-space---2);
+  --origam-input__prepend---padding-top: var(--origam-space---2);
   --origam-input__prepend---margin-inline-end: 16px;
-  --origam-input__append---padding-top: 8px;
+  --origam-input__append---padding-top: var(--origam-space---2);
   --origam-input__append---margin-inline-start: 16px;
   --origam-input---density-default-density: 0px;
   --origam-input---density-compact-density: -8px;
-  --origam-inline-edit---transition-duration: 200ms;
-  --origam-inline-edit__display---padding-block: 4px;
-  --origam-inline-edit__display---padding-inline: 8px;
-  --origam-inline-edit__display---border-radius: 4px;
-  --origam-inline-edit__display---min-height: 24px;
-  --origam-inline-edit__display---hover-bg-color: #ffffff;
-  --origam-inline-edit__display---color-empty: #a3a3a3;
-  --origam-inline-edit__editor---padding-block: 4px;
-  --origam-inline-edit__editor---padding-inline: 8px;
-  --origam-inline-edit__editor---border-radius: 4px;
-  --origam-inline-edit__editor---border-color: #d4d4d4;
-  --origam-inline-edit__editor---focus-border-color: #7c3aed;
-  --origam-inline-edit__editor---focus-ring-color: #f5f3ff;
-  --origam-inline-edit__editor---bg-color: #ffffff;
-  --origam-inline-edit__editor---gap: 4px;
-  --origam-inline-edit__input---min-width: 80px;
-  --origam-inline-edit__input---multiline-min-height: 64px;
-  --origam-inline-edit--error---color: #b91c1c;
-  --origam-inline-edit--error---background-color: #fff1f2;
-  --origam-inline-edit--error---ring-color: #fff1f2;
-  --origam-inline-edit--error---font-size: 0.625rem;
-  --origam-inline-edit--error---font-weight: 500;
-  --origam-inline-edit--error---padding-block: 4px;
-  --origam-inline-edit--error---padding-inline: 8px;
-  --origam-inline-edit--error---border-radius: 4px;
-  --origam-inline-edit__actions---gap: 4px;
+  --origam-inline-edit---transition-duration: var(--origam-motion__duration---medium);
+  --origam-inline-edit__display---padding-block: var(--origam-space---1);
+  --origam-inline-edit__display---padding-inline: var(--origam-space---2);
+  --origam-inline-edit__display---border-radius: var(--origam-radius---sm);
+  --origam-inline-edit__display---min-height: var(--origam-space---6);
+  --origam-inline-edit__display---hover-bg-color: var(--origam-color__surface---raised);
+  --origam-inline-edit__display---color-empty: var(--origam-color__text---disabled);
+  --origam-inline-edit__editor---padding-block: var(--origam-space---1);
+  --origam-inline-edit__editor---padding-inline: var(--origam-space---2);
+  --origam-inline-edit__editor---border-radius: var(--origam-radius---sm);
+  --origam-inline-edit__editor---border-color: var(--origam-color__border---subtle);
+  --origam-inline-edit__editor---focus-border-color: var(--origam-color__action--primary---bg);
+  --origam-inline-edit__editor---focus-ring-color: var(--origam-color__action--primary---bgSubtle);
+  --origam-inline-edit__editor---bg-color: var(--origam-color__surface---default);
+  --origam-inline-edit__editor---gap: var(--origam-space---1);
+  --origam-inline-edit__input---min-width: var(--origam-space---20);
+  --origam-inline-edit__input---multiline-min-height: var(--origam-space---16);
+  --origam-inline-edit--error---color: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-inline-edit--error---background-color: var(--origam-color__feedback--danger---bgSubtle);
+  --origam-inline-edit--error---ring-color: var(--origam-color__feedback--danger---bgSubtle);
+  --origam-inline-edit--error---font-size: var(--origam-font__size---xs);
+  --origam-inline-edit--error---font-weight: var(--origam-font__weight---medium);
+  --origam-inline-edit--error---padding-block: var(--origam-space---1);
+  --origam-inline-edit--error---padding-inline: var(--origam-space---2);
+  --origam-inline-edit--error---border-radius: var(--origam-radius---sm);
+  --origam-inline-edit__actions---gap: var(--origam-space---1);
   --origam-text-field__details---padding-inline: 16px;
-  --origam-text-field__input---opacity: 0;
-  --origam-text-field__input---opacity-active: 1;
+  --origam-text-field__input---opacity: var(--origam-opacity---0);
+  --origam-text-field__input---opacity-active: var(--origam-opacity---100);
   --origam-text-field__input---transition-duration: 0.15s;
-  --origam-text-field__input---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-textarea-field__textarea---opacity: 0;
-  --origam-textarea-field__textarea---opacity-active: 1;
+  --origam-text-field__input---transition-easing: var(--origam-motion__easing---standard);
+  --origam-textarea-field__textarea---opacity: var(--origam-opacity---0);
+  --origam-textarea-field__textarea---opacity-active: var(--origam-opacity---100);
   --origam-textarea-field__textarea---transition-duration: 0.15s;
-  --origam-textarea-field__textarea---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-textarea-field__textarea---transition-easing: var(--origam-motion__easing---standard);
   --origam-textarea-field__textarea---line-height: 1;
-  --origam-textarea-field__grip---border-color: #d4d4d4;
-  --origam-textarea-field__grip---opacity: 0.26;
+  --origam-textarea-field__grip---border-color: var(--origam-color__border---subtle);
+  --origam-textarea-field__grip---opacity: var(--origam-opacity---26);
   --origam-textarea-field__grip---height: 9px;
-  --origam-textarea-field---rich-toolbar-bg-color: #fafafa;
-  --origam-textarea-field---rich-toolbar-border-color: #d4d4d4;
-  --origam-textarea-field---rich-toolbar-border-radius: 8px;
-  --origam-textarea-field---rich-toolbar-padding: 8px;
-  --origam-textarea-field---rich-toolbar-gap: 4px;
+  --origam-textarea-field---rich-toolbar-bg-color: var(--origam-color__surface---sunken);
+  --origam-textarea-field---rich-toolbar-border-color: var(--origam-color__border---subtle);
+  --origam-textarea-field---rich-toolbar-border-radius: var(--origam-radius---md);
+  --origam-textarea-field---rich-toolbar-padding: var(--origam-space---2);
+  --origam-textarea-field---rich-toolbar-gap: var(--origam-space---1);
   --origam-textarea-field---rich-toolbar-btn-size: 32px;
-  --origam-textarea-field---rich-toolbar-btn-padding: 4px;
-  --origam-textarea-field---rich-toolbar-btn-border-radius: 4px;
+  --origam-textarea-field---rich-toolbar-btn-padding: var(--origam-space---1);
+  --origam-textarea-field---rich-toolbar-btn-border-radius: var(--origam-radius---sm);
   --origam-textarea-field---rich-toolbar-btn-bg-color: rgba(0, 0, 0, 0);
-  --origam-textarea-field---rich-toolbar-btn-color: #171717;
-  --origam-textarea-field---rich-toolbar-btn-hover-bg-color: #f5f5f5;
-  --origam-textarea-field---rich-toolbar-btn-hover-color: #171717;
-  --origam-textarea-field---rich-toolbar-btn-active-bg-color: #7c3aed;
-  --origam-textarea-field---rich-toolbar-btn-active-color: #ffffff;
-  --origam-textarea-field---rich-toolbar-btn-focus-outline-color: #7c3aed;
-  --origam-textarea-field---rich-content-padding: 12px;
+  --origam-textarea-field---rich-toolbar-btn-color: var(--origam-color__text---primary);
+  --origam-textarea-field---rich-toolbar-btn-hover-bg-color: var(--origam-color__action--ghost---bgHover);
+  --origam-textarea-field---rich-toolbar-btn-hover-color: var(--origam-color__text---primary);
+  --origam-textarea-field---rich-toolbar-btn-active-bg-color: var(--origam-color__action--primary---bg);
+  --origam-textarea-field---rich-toolbar-btn-active-color: var(--origam-color__action--primary---fg);
+  --origam-textarea-field---rich-toolbar-btn-focus-outline-color: var(--origam-color__action--primary---bg);
+  --origam-textarea-field---rich-content-padding: var(--origam-space---3);
   --origam-textarea-field---rich-content-min-height: 120px;
   --origam-textarea-field---rich-content-line-height: 1.5;
-  --origam-textarea-field---rich-content-paragraph-gap: 12px;
-  --origam-textarea-field---rich-content-placeholder-color: #525252;
-  --origam-textarea-field---rich-code-inline-bg-color: #fafafa;
-  --origam-textarea-field---rich-code-inline-color: #171717;
-  --origam-textarea-field---rich-link-color: #7c3aed;
+  --origam-textarea-field---rich-content-paragraph-gap: var(--origam-space---3);
+  --origam-textarea-field---rich-content-placeholder-color: var(--origam-color__text---secondary);
+  --origam-textarea-field---rich-code-inline-bg-color: var(--origam-color__surface---sunken);
+  --origam-textarea-field---rich-code-inline-color: var(--origam-color__text---primary);
+  --origam-textarea-field---rich-link-color: var(--origam-color__action--primary---bg);
   --origam-textarea-field---rich-link-text-decoration: underline;
-  --origam-textarea-field---rich-list-padding-inline-start: 24px;
+  --origam-textarea-field---rich-list-padding-inline-start: var(--origam-space---6);
   --origam-textarea-field---rich-heading-font-size-h1: 1.75rem;
   --origam-textarea-field---rich-heading-font-size-h2: 1.35rem;
   --origam-textarea-field---rich-heading-font-size-h3: 1.1rem;
@@ -1249,42 +1250,42 @@
   --origam-overlay---position: fixed;
   --origam-overlay---border-radius: inherit;
   --origam-overlay---pointer-events: none;
-  --origam-overlay---z-index: 1040;
-  --origam-overlay---transition-duration: 200ms;
-  --origam-overlay---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-overlay__scrim---background-color: #ffffff;
-  --origam-overlay__scrim---opacity: 0.32;
+  --origam-overlay---z-index: var(--origam-zIndex---overlay);
+  --origam-overlay---transition-duration: var(--origam-motion__duration---medium);
+  --origam-overlay---transition-easing: var(--origam-motion__easing---standard);
+  --origam-overlay__scrim---background-color: var(--origam-color__overlay---scrim);
+  --origam-overlay__scrim---opacity: var(--origam-opacity---32);
   --origam-overlay__scrim---pointer-events: auto;
   --origam-overlay__scrim---border-radius: inherit;
   --origam-overlay__scrim---position: fixed;
-  --origam-overlay__scrim---position-top: 0px;
-  --origam-overlay__scrim---position-bottom: 0px;
-  --origam-overlay__scrim---position-left: 0px;
-  --origam-overlay__scrim---position-right: 0px;
+  --origam-overlay__scrim---position-top: var(--origam-space---0);
+  --origam-overlay__scrim---position-bottom: var(--origam-space---0);
+  --origam-overlay__scrim---position-left: var(--origam-space---0);
+  --origam-overlay__scrim---position-right: var(--origam-space---0);
   --origam-overlay__scrim---transition-property: opacity;
-  --origam-overlay__scrim---transition-duration: 200ms;
-  --origam-overlay__scrim---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-overlay__scrim---transition-duration: var(--origam-motion__duration---medium);
+  --origam-overlay__scrim---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-overlay__content---outline: none;
   --origam-overlay__content---position: absolute;
   --origam-overlay__content---pointer-events: auto;
   --origam-overlay__content---contain: layout;
   --origam-overlay__absolute---position: absolute;
   --origam-overlay__contained---scrim-position: absolute;
-  --origam-overlay-scrim---background-color: #ffffff;
-  --origam-overlay-scrim---opacity: 0.32;
+  --origam-overlay-scrim---background-color: var(--origam-color__overlay---scrim);
+  --origam-overlay-scrim---opacity: var(--origam-opacity---32);
   --origam-overlay-scrim---pointer-events: auto;
   --origam-overlay-scrim---border-radius: inherit;
   --origam-overlay-scrim---position: fixed;
   --origam-overlay-scrim---transition-property: opacity;
-  --origam-overlay-scrim---transition-duration: 200ms;
-  --origam-overlay-scrim---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-overlay-scrim---transition-duration: var(--origam-motion__duration---medium);
+  --origam-overlay-scrim---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-loader---height: 100%;
-  --origam-loader---transition-duration: 200ms;
-  --origam-loader---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-loader---transition-duration: var(--origam-motion__duration---medium);
+  --origam-loader---transition-easing: var(--origam-motion__easing---standard);
   --origam-loader__progress---margin: auto;
   --origam-loader__fullscreen---position: fixed;
-  --origam-loader__fullscreen---top: 0px;
-  --origam-loader__fullscreen---left: 0px;
+  --origam-loader__fullscreen---top: var(--origam-space---0);
+  --origam-loader__fullscreen---left: var(--origam-space---0);
   --origam-loader__fullscreen---height: 100vh;
   --origam-loader__fullscreen---width: 100vw;
   --origam-progress---display: block;
@@ -1295,8 +1296,8 @@
   --origam-progress__content---justify-content: center;
   --origam-progress__content---position: absolute;
   --origam-progress__content---pointer-events: none;
-  --origam-progress__content---left: 0px;
-  --origam-progress__content---top: 0px;
+  --origam-progress__content---left: var(--origam-space---0);
+  --origam-progress__content---top: var(--origam-space---0);
   --origam-progress__content---width: 100%;
   --origam-progress-circular---display: inline-flex;
   --origam-progress-circular---align-items: center;
@@ -1308,324 +1309,324 @@
   --origam-progress-circular---size-md: 32px;
   --origam-progress-circular---size-lg: 48px;
   --origam-progress-circular---size-xl: 64px;
-  --origam-progress-circular---transition-duration: 200ms;
-  --origam-progress-circular---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-progress-circular---transition-duration: var(--origam-motion__duration---medium);
+  --origam-progress-circular---transition-easing: var(--origam-motion__easing---standard);
   --origam-progress-circular---indeterminate-duration: 1400ms;
   --origam-progress-circular__svg---width: 100%;
   --origam-progress-circular__svg---height: 100%;
   --origam-progress-circular__svg---position: absolute;
   --origam-progress-circular__svg---z-index: 0;
-  --origam-progress-circular__underlay---color: #e6e6e6;
-  --origam-progress-circular__underlay---opacity: 0.5;
+  --origam-progress-circular__underlay---color: var(--origam-color__surface---disabled);
+  --origam-progress-circular__underlay---opacity: var(--origam-opacity---50);
   --origam-progress-circular__underlay---z-index: 1;
-  --origam-progress-circular__overlay---color: #7c3aed;
+  --origam-progress-circular__overlay---color: var(--origam-color__action--primary---bg);
   --origam-progress-circular__overlay---z-index: 2;
   --origam-progress-circular__content---align-items: center;
   --origam-progress-circular__content---display: flex;
   --origam-progress-circular__content---justify-content: center;
-  --origam-progress-circular--success---color: #4caf50;
-  --origam-progress-circular--warning---color: #fb8c00;
-  --origam-progress-circular--danger---color: #ef4444;
-  --origam-progress-circular--info---color: #2196f3;
+  --origam-progress-circular--success---color: var(--origam-color__feedback--success---bg);
+  --origam-progress-circular--warning---color: var(--origam-color__feedback--warning---bg);
+  --origam-progress-circular--danger---color: var(--origam-color__feedback--danger---bg);
+  --origam-progress-circular--info---color: var(--origam-color__feedback--info---bg);
   --origam-progress-linear---background: rgba(0, 0, 0, 0);
   --origam-progress-linear---overflow: hidden;
   --origam-progress-linear---position: relative;
   --origam-progress-linear---width: 100%;
-  --origam-progress-linear---transition-duration: 200ms;
-  --origam-progress-linear---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-progress-linear---transition-duration: var(--origam-motion__duration---medium);
+  --origam-progress-linear---transition-easing: var(--origam-motion__easing---standard);
   --origam-progress-linear---indeterminate-duration: 2200ms;
-  --origam-progress-linear---rounded-border-radius: 9999px;
+  --origam-progress-linear---rounded-border-radius: var(--origam-radius---full);
   --origam-progress-linear---background-track-background: currentColor;
-  --origam-progress-linear---background-track-opacity: 0.5;
+  --origam-progress-linear---background-track-opacity: var(--origam-opacity---50);
   --origam-progress-linear---background-track-position: absolute;
   --origam-progress-linear__bar---height: 100%;
   --origam-progress-linear__bar---position: absolute;
-  --origam-progress-linear__bar---left: 0px;
+  --origam-progress-linear__bar---left: var(--origam-space---0);
   --origam-progress-linear__bar---transition-property: width, left, right;
   --origam-progress-linear__stream---opacity: 0.3;
   --origam-progress-linear__stream---position: absolute;
   --origam-progress-linear__stream---pointer-events: none;
   --origam-progress-linear__absolute---position: absolute;
-  --origam-progress-linear__absolute---left: 0px;
+  --origam-progress-linear__absolute---left: var(--origam-space---0);
   --origam-progress-linear__absolute---z-index: 1;
   --origam-progress-linear__fixed---position: fixed;
-  --origam-progress-linear__fixed---left: 0px;
+  --origam-progress-linear__fixed---left: var(--origam-space---0);
   --origam-progress-linear__fixed---z-index: 1;
-  --origam-dialog---background: #ffffff;
-  --origam-dialog---color: #171717;
-  --origam-dialog---border-radius: 12px;
+  --origam-dialog---background: var(--origam-color__surface---raised);
+  --origam-dialog---color: var(--origam-color__text---primary);
+  --origam-dialog---border-radius: var(--origam-radius---lg);
   --origam-dialog---max-width: calc(100% - 48px);
   --origam-dialog---max-height: calc(100% - 48px);
-  --origam-dialog---z-index: 1050;
-  --origam-dialog---box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);
+  --origam-dialog---z-index: var(--origam-zIndex---modal);
+  --origam-dialog---box-shadow: var(--origam-shadow---xl);
   --origam-dialog---width-xs: 320px;
   --origam-dialog---width-sm: 400px;
   --origam-dialog---width-md: 720px;
   --origam-dialog---width-lg: 960px;
   --origam-dialog---width-xl: 1080px;
-  --origam-dialog---transition-duration: 200ms;
-  --origam-dialog---transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  --origam-dialog__header---padding: 16px;
-  --origam-dialog__header---gap: 12px;
-  --origam-dialog__header---border-bottom-color: #d4d4d4;
-  --origam-dialog__content---padding-block: 16px;
-  --origam-dialog__content---padding-inline: 24px;
-  --origam-dialog__content---font-size: 0.875rem;
-  --origam-dialog__actions---padding: 16px;
-  --origam-dialog__actions---gap: 8px;
+  --origam-dialog---transition-duration: var(--origam-motion__duration---medium);
+  --origam-dialog---transition-timing-function: var(--origam-motion__easing---decelerate);
+  --origam-dialog__header---padding: var(--origam-space---4);
+  --origam-dialog__header---gap: var(--origam-space---3);
+  --origam-dialog__header---border-bottom-color: var(--origam-color__border---subtle);
+  --origam-dialog__content---padding-block: var(--origam-space---4);
+  --origam-dialog__content---padding-inline: var(--origam-space---6);
+  --origam-dialog__content---font-size: var(--origam-font__size---md);
+  --origam-dialog__actions---padding: var(--origam-space---4);
+  --origam-dialog__actions---gap: var(--origam-space---2);
   --origam-dialog__actions---justify-content: flex-end;
   --origam-dialog__close---position: absolute;
-  --origam-dialog__close---color: #525252;
-  --origam-dialog__fullscreen---border-radius: 0px;
+  --origam-dialog__close---color: var(--origam-color__text---secondary);
+  --origam-dialog__fullscreen---border-radius: var(--origam-radius---none);
   --origam-dialog__fullscreen---max-width: 100%;
   --origam-dialog__fullscreen---max-height: 100%;
   --origam-dialog-confirmation---icon-size: 28px;
-  --origam-dialog-confirmation---icon-color-default: #525252;
-  --origam-dialog-confirmation---icon-color-success: #16a34a;
-  --origam-dialog-confirmation---icon-color-warning: #b45309;
-  --origam-dialog-confirmation---icon-color-danger: #b91c1c;
-  --origam-dialog-confirmation---icon-color-info: #1e40af;
-  --origam-dialog-confirmation---title-font-size: 1rem;
-  --origam-dialog-confirmation---title-font-weight: 600;
-  --origam-dialog-confirmation---title-color: #171717;
-  --origam-dialog-confirmation---description-font-size: 0.875rem;
-  --origam-dialog-confirmation---description-color: #525252;
-  --origam-dialog-confirmation---actions-gap: 12px;
-  --origam-menu---background: #ffffff;
-  --origam-menu---color: #171717;
-  --origam-menu---border-radius: 8px;
-  --origam-menu---box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
+  --origam-dialog-confirmation---icon-color-default: var(--origam-color__text---secondary);
+  --origam-dialog-confirmation---icon-color-success: var(--origam-color__feedback--success---fgSubtle);
+  --origam-dialog-confirmation---icon-color-warning: var(--origam-color__feedback--warning---fgSubtle);
+  --origam-dialog-confirmation---icon-color-danger: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-dialog-confirmation---icon-color-info: var(--origam-color__feedback--info---fgSubtle);
+  --origam-dialog-confirmation---title-font-size: var(--origam-font__size---lg);
+  --origam-dialog-confirmation---title-font-weight: var(--origam-font__weight---semibold);
+  --origam-dialog-confirmation---title-color: var(--origam-color__text---primary);
+  --origam-dialog-confirmation---description-font-size: var(--origam-font__size---md);
+  --origam-dialog-confirmation---description-color: var(--origam-color__text---secondary);
+  --origam-dialog-confirmation---actions-gap: var(--origam-space---3);
+  --origam-menu---background: var(--origam-color__surface---raised);
+  --origam-menu---color: var(--origam-color__text---primary);
+  --origam-menu---border-radius: var(--origam-radius---md);
+  --origam-menu---box-shadow: var(--origam-shadow---lg);
   --origam-menu---max-height: calc(100vh - 32px);
-  --origam-menu---z-index: 1000;
-  --origam-menu---transition-duration: 100ms;
-  --origam-menu---transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  --origam-menu__content---padding: 4px;
+  --origam-menu---z-index: var(--origam-zIndex---dropdown);
+  --origam-menu---transition-duration: var(--origam-motion__duration---fast);
+  --origam-menu---transition-timing-function: var(--origam-motion__easing---decelerate);
+  --origam-menu__content---padding: var(--origam-space---1);
   --origam-menu__content---max-width: 320px;
   --origam-menu__content---overflow: auto;
-  --origam-menu---offset-top: 8px;
-  --origam-menu---offset-bottom: 8px;
-  --origam-menu---offset-left: 0px;
-  --origam-menu---offset-right: 0px;
-  --origam-tooltip---background-color: #262626;
-  --origam-tooltip---color: #ffffff;
-  --origam-tooltip---font-size: 0.75rem;
-  --origam-tooltip---font-weight: 500;
-  --origam-tooltip---line-height: 1.5;
-  --origam-tooltip---padding-block: 4px;
-  --origam-tooltip---padding-inline: 8px;
-  --origam-tooltip---border-radius: 4px;
-  --origam-tooltip---z-index: 1070;
+  --origam-menu---offset-top: var(--origam-space---2);
+  --origam-menu---offset-bottom: var(--origam-space---2);
+  --origam-menu---offset-left: var(--origam-space---0);
+  --origam-menu---offset-right: var(--origam-space---0);
+  --origam-tooltip---background-color: var(--origam-color__neutral---800);
+  --origam-tooltip---color: var(--origam-color__text---inverse);
+  --origam-tooltip---font-size: var(--origam-font__size---sm);
+  --origam-tooltip---font-weight: var(--origam-font__weight---medium);
+  --origam-tooltip---line-height: var(--origam-font__lineHeight---normal);
+  --origam-tooltip---padding-block: var(--origam-space---1);
+  --origam-tooltip---padding-inline: var(--origam-space---2);
+  --origam-tooltip---border-radius: var(--origam-radius---sm);
+  --origam-tooltip---z-index: var(--origam-zIndex---tooltip);
   --origam-tooltip---max-width: 300px;
-  --origam-tooltip---opacity: 1;
-  --origam-tooltip---transition-duration: 100ms;
-  --origam-tooltip---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-tooltip---opacity: var(--origam-opacity---100);
+  --origam-tooltip---transition-duration: var(--origam-motion__duration---fast);
+  --origam-tooltip---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-tooltip__arrow---size: 6px;
   --origam-tooltip__arrow---position: absolute;
-  --origam-tooltip__top---offset: 8px;
-  --origam-tooltip__bottom---offset: 8px;
-  --origam-tooltip__left---offset: 8px;
-  --origam-tooltip__right---offset: 8px;
-  --origam-pagination---gap: 4px;
-  --origam-pagination---gap-info: 16px;
-  --origam-pagination---padding-block: 0px;
-  --origam-pagination---padding-inline: 0px;
+  --origam-tooltip__top---offset: var(--origam-space---2);
+  --origam-tooltip__bottom---offset: var(--origam-space---2);
+  --origam-tooltip__left---offset: var(--origam-space---2);
+  --origam-tooltip__right---offset: var(--origam-space---2);
+  --origam-pagination---gap: var(--origam-space---1);
+  --origam-pagination---gap-info: var(--origam-space---4);
+  --origam-pagination---padding-block: var(--origam-space---0);
+  --origam-pagination---padding-inline: var(--origam-space---0);
   --origam-pagination---background-color: rgba(0, 0, 0, 0);
-  --origam-pagination---background-color-hover: #d4d4d4;
-  --origam-pagination---color: #171717;
-  --origam-pagination--primary---background-color: #7c3aed;
-  --origam-pagination--primary---background-color-hover: #6d28d9;
-  --origam-pagination--primary---color: #ffffff;
-  --origam-pagination--primary---box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
-  --origam-pagination--info---color: #525252;
-  --origam-pagination--info---font-size: 0.75rem;
-  --origam-pagination--info---font-weight: 400;
+  --origam-pagination---background-color-hover: var(--origam-color__action--secondary---bgHover);
+  --origam-pagination---color: var(--origam-color__text---primary);
+  --origam-pagination--primary---background-color: var(--origam-color__action--primary---bg);
+  --origam-pagination--primary---background-color-hover: var(--origam-color__action--primary---bgHover);
+  --origam-pagination--primary---color: var(--origam-color__action--primary---fg);
+  --origam-pagination--primary---box-shadow: var(--origam-shadow---xs);
+  --origam-pagination--info---color: var(--origam-color__text---secondary);
+  --origam-pagination--info---font-size: var(--origam-font__size---sm);
+  --origam-pagination--info---font-weight: var(--origam-font__weight---regular);
   --origam-pagination__item---background-color: rgba(0, 0, 0, 0);
-  --origam-pagination__item---color: #171717;
-  --origam-pagination__item---background-color-hover: #d4d4d4;
-  --origam-pagination__item---active-background-color: #7c3aed;
-  --origam-pagination__item---active-color: #ffffff;
+  --origam-pagination__item---color: var(--origam-color__text---primary);
+  --origam-pagination__item---background-color-hover: var(--origam-color__action--secondary---bgHover);
+  --origam-pagination__item---active-background-color: var(--origam-color__action--primary---bg);
+  --origam-pagination__item---active-color: var(--origam-color__action--primary---fg);
   --origam-pagination__item---active-overlay-opacity: 0.12;
-  --origam-pagination---prev-next-icon-color: #171717;
-  --origam-pagination---prev-next-icon-opacity-disabled: 0.26;
-  --origam-pagination__ellipsis---color: #525252;
-  --origam-pagination__ellipsis---font-weight: 700;
-  --origam-pagination---border-radius: 4px;
-  --origam-pagination---border-radius-rounded: 24px;
-  --origam-pagination---border-radius-circle: 9999px;
-  --origam-pagination---input-width: 40px;
-  --origam-pagination---input-padding-inline: 8px;
-  --origam-pagination---label-gap: 8px;
-  --origam-table---background-color: #ffffff;
-  --origam-table---color: #171717;
-  --origam-table---font-size: 0.875rem;
+  --origam-pagination---prev-next-icon-color: var(--origam-color__text---primary);
+  --origam-pagination---prev-next-icon-opacity-disabled: var(--origam-opacity---26);
+  --origam-pagination__ellipsis---color: var(--origam-color__text---secondary);
+  --origam-pagination__ellipsis---font-weight: var(--origam-font__weight---bold);
+  --origam-pagination---border-radius: var(--origam-radius---sm);
+  --origam-pagination---border-radius-rounded: var(--origam-radius---2xl);
+  --origam-pagination---border-radius-circle: var(--origam-radius---full);
+  --origam-pagination---input-width: var(--origam-space---10);
+  --origam-pagination---input-padding-inline: var(--origam-space---2);
+  --origam-pagination---label-gap: var(--origam-space---2);
+  --origam-table---background-color: var(--origam-color__surface---default);
+  --origam-table---color: var(--origam-color__text---primary);
+  --origam-table---font-size: var(--origam-font__size---md);
   --origam-table---border-collapse: collapse;
-  --origam-table---header-cell-background-color: #f5f5f5;
-  --origam-table---header-cell-color: #171717;
-  --origam-table---header-cell-font-weight: 600;
-  --origam-table---header-cell-padding-block: 12px;
-  --origam-table---header-cell-padding-inline: 16px;
-  --origam-table---header-cell-border-bottom-color: #a3a3a3;
-  --origam-table---header-cell-border-bottom-width: 2px;
-  --origam-table__cell---padding-block: 12px;
-  --origam-table__cell---padding-inline: 16px;
-  --origam-table__cell---border-color: #d4d4d4;
-  --origam-table__cell---border-width: 1px;
-  --origam-table__row---hover-background-color: #fafafa;
+  --origam-table---header-cell-background-color: var(--origam-color__surface---overlay);
+  --origam-table---header-cell-color: var(--origam-color__text---primary);
+  --origam-table---header-cell-font-weight: var(--origam-font__weight---semibold);
+  --origam-table---header-cell-padding-block: var(--origam-space---3);
+  --origam-table---header-cell-padding-inline: var(--origam-space---4);
+  --origam-table---header-cell-border-bottom-color: var(--origam-color__border---default);
+  --origam-table---header-cell-border-bottom-width: var(--origam-border__width---2);
+  --origam-table__cell---padding-block: var(--origam-space---3);
+  --origam-table__cell---padding-inline: var(--origam-space---4);
+  --origam-table__cell---border-color: var(--origam-color__border---subtle);
+  --origam-table__cell---border-width: var(--origam-border__width---thin);
+  --origam-table__row---hover-background-color: var(--origam-color__surface---sunken);
   --origam-virtual-scroll---item-height: 48px;
-  --origam-virtual-scroll---scroll-padding: 0px;
-  --origam-virtual-scroll---transition-duration: 100ms;
-  --origam-virtual-scroll---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-infinite-scroll__loader---color: #7c3aed;
-  --origam-infinite-scroll__loader---gap: 12px;
-  --origam-infinite-scroll__loader---padding-block: 12px;
-  --origam-infinite-scroll__loader---padding-inline: 0px;
-  --origam-infinite-scroll__loader---font-size: 0.875rem;
-  --origam-infinite-scroll__empty---color: #525252;
-  --origam-infinite-scroll__empty---padding-block: 12px;
-  --origam-breadcrumb---gap: 0px;
-  --origam-breadcrumb---padding-block: 8px;
-  --origam-breadcrumb---padding-inline: 8px;
-  --origam-breadcrumb---font-size: 0.875rem;
+  --origam-virtual-scroll---scroll-padding: var(--origam-space---0);
+  --origam-virtual-scroll---transition-duration: var(--origam-motion__duration---fast);
+  --origam-virtual-scroll---transition-easing: var(--origam-motion__easing---standard);
+  --origam-infinite-scroll__loader---color: var(--origam-color__action--primary---bg);
+  --origam-infinite-scroll__loader---gap: var(--origam-space---3);
+  --origam-infinite-scroll__loader---padding-block: var(--origam-space---3);
+  --origam-infinite-scroll__loader---padding-inline: var(--origam-space---0);
+  --origam-infinite-scroll__loader---font-size: var(--origam-font__size---md);
+  --origam-infinite-scroll__empty---color: var(--origam-color__text---secondary);
+  --origam-infinite-scroll__empty---padding-block: var(--origam-space---3);
+  --origam-breadcrumb---gap: var(--origam-space---0);
+  --origam-breadcrumb---padding-block: var(--origam-space---2);
+  --origam-breadcrumb---padding-inline: var(--origam-space---2);
+  --origam-breadcrumb---font-size: var(--origam-font__size---md);
   --origam-breadcrumb---background: rgba(0, 0, 0, 0);
-  --origam-breadcrumb---color: #171717;
+  --origam-breadcrumb---color: var(--origam-color__text---primary);
   --origam-breadcrumb---border-color: currentColor;
   --origam-breadcrumb---border-style: solid;
-  --origam-breadcrumb---border-radius: 0px;
-  --origam-breadcrumb---border-radius-rounded: 4px;
-  --origam-breadcrumb---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-  --origam-breadcrumb---box-shadow-elevated: 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
+  --origam-breadcrumb---border-radius: var(--origam-radius---none);
+  --origam-breadcrumb---border-radius-rounded: var(--origam-radius---sm);
+  --origam-breadcrumb---box-shadow: var(--origam-shadow---none);
+  --origam-breadcrumb---box-shadow-elevated: var(--origam-shadow---md);
   --origam-breadcrumb---transition-property: transform, color;
-  --origam-breadcrumb---transition-duration: 200ms;
-  --origam-breadcrumb---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-breadcrumb__item---color: #171717;
-  --origam-breadcrumb__item---hover-color: #7c3aed;
-  --origam-breadcrumb__item---active-color: #525252;
-  --origam-breadcrumb__item---opacity: 1;
-  --origam-breadcrumb__item---opacity-disabled: 0.5;
+  --origam-breadcrumb---transition-duration: var(--origam-motion__duration---medium);
+  --origam-breadcrumb---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-breadcrumb__item---color: var(--origam-color__text---primary);
+  --origam-breadcrumb__item---hover-color: var(--origam-color__action--primary---bg);
+  --origam-breadcrumb__item---active-color: var(--origam-color__text---secondary);
+  --origam-breadcrumb__item---opacity: var(--origam-opacity---100);
+  --origam-breadcrumb__item---opacity-disabled: var(--origam-opacity---50);
   --origam-breadcrumb__item---text-decoration: none;
   --origam-breadcrumb__item---background: rgba(0, 0, 0, 0);
-  --origam-breadcrumb__item---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
+  --origam-breadcrumb__item---box-shadow: var(--origam-shadow---none);
   --origam-breadcrumb__item---border-color: currentColor;
   --origam-breadcrumb__item---border-style: solid;
-  --origam-breadcrumb__item---border-radius: 0px;
+  --origam-breadcrumb__item---border-radius: var(--origam-radius---none);
   --origam-breadcrumb__item---transition-property: transform, color;
-  --origam-breadcrumb__item---transition-duration: 200ms;
-  --origam-breadcrumb__item---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-breadcrumb__divider---color: #525252;
-  --origam-breadcrumb__divider---font-size: 0.875rem;
+  --origam-breadcrumb__item---transition-duration: var(--origam-motion__duration---medium);
+  --origam-breadcrumb__item---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-breadcrumb__divider---color: var(--origam-color__text---secondary);
+  --origam-breadcrumb__divider---font-size: var(--origam-font__size---md);
   --origam-breadcrumb__divider---character: /;
-  --origam-breadcrumb__divider---padding-inline: 8px;
-  --origam-breadcrumb__divider---opacity: 1;
+  --origam-breadcrumb__divider---padding-inline: var(--origam-space---2);
+  --origam-breadcrumb__divider---opacity: var(--origam-opacity---100);
   --origam-breadcrumb__divider---background: rgba(0, 0, 0, 0);
-  --origam-breadcrumb__divider---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
+  --origam-breadcrumb__divider---box-shadow: var(--origam-shadow---none);
   --origam-breadcrumb__divider---border-color: currentColor;
   --origam-breadcrumb__divider---border-style: solid;
-  --origam-breadcrumb__divider---border-radius: 0px;
+  --origam-breadcrumb__divider---border-radius: var(--origam-radius---none);
   --origam-breadcrumb__divider---transition-property: transform, color;
-  --origam-breadcrumb__divider---transition-duration: 200ms;
-  --origam-breadcrumb__divider---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-breadcrumb---home-icon-color: #7c3aed;
-  --origam-data-table---background-color: #ffffff;
-  --origam-data-table---color: #171717;
-  --origam-data-table---border-color: #d4d4d4;
-  --origam-data-table---border-radius: 0px;
-  --origam-data-table---font-size: 0.875rem;
-  --origam-data-table---font-weight: 400;
-  --origam-data-table---line-height: 1.5;
+  --origam-breadcrumb__divider---transition-duration: var(--origam-motion__duration---medium);
+  --origam-breadcrumb__divider---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-breadcrumb---home-icon-color: var(--origam-color__action--primary---bg);
+  --origam-data-table---background-color: var(--origam-color__surface---default);
+  --origam-data-table---color: var(--origam-color__text---primary);
+  --origam-data-table---border-color: var(--origam-color__border---subtle);
+  --origam-data-table---border-radius: var(--origam-radius---none);
+  --origam-data-table---font-size: var(--origam-font__size---md);
+  --origam-data-table---font-weight: var(--origam-font__weight---regular);
+  --origam-data-table---line-height: var(--origam-font__lineHeight---normal);
   --origam-data-table---width: 100%;
   --origam-data-table---border-collapse: separate;
   --origam-data-table---border-spacing: 0;
-  --origam-data-table__loading---opacity: 0.5;
-  --origam-data-table__header---background-color: #ffffff;
-  --origam-data-table__header---color: #ffffff;
-  --origam-data-table__header---font-weight: 500;
-  --origam-data-table__header---font-size: 0.75rem;
-  --origam-data-table__header---padding-block: 12px;
-  --origam-data-table__header---padding-inline: 16px;
-  --origam-data-table__header---border-bottom-color: #a3a3a3;
-  --origam-data-table__header---border-bottom-width: 1px;
+  --origam-data-table__loading---opacity: var(--origam-opacity---50);
+  --origam-data-table__header---background-color: var(--origam-color__surface---raised);
+  --origam-data-table__header---color: var(--origam-color__text---inverse);
+  --origam-data-table__header---font-weight: var(--origam-font__weight---medium);
+  --origam-data-table__header---font-size: var(--origam-font__size---sm);
+  --origam-data-table__header---padding-block: var(--origam-space---3);
+  --origam-data-table__header---padding-inline: var(--origam-space---4);
+  --origam-data-table__header---border-bottom-color: var(--origam-color__border---default);
+  --origam-data-table__header---border-bottom-width: var(--origam-border__width---thin);
   --origam-data-table__header---border-bottom-style: solid;
-  --origam-data-table__header---sort-icon-color: #ffffff;
-  --origam-data-table__header---sort-icon-color-active: #ffffff;
-  --origam-data-table__header---sort-icon-opacity: 0;
-  --origam-data-table__header---sort-icon-opacity-hover: 0.5;
-  --origam-data-table__header---sort-icon-opacity-active: 1;
-  --origam-data-table__header---sort-badge-background-color: #a3a3a3;
-  --origam-data-table__header---sort-badge-color: #ffffff;
+  --origam-data-table__header---sort-icon-color: var(--origam-color__text---inverse);
+  --origam-data-table__header---sort-icon-color-active: var(--origam-color__text---inverse);
+  --origam-data-table__header---sort-icon-opacity: var(--origam-opacity---0);
+  --origam-data-table__header---sort-icon-opacity-hover: var(--origam-opacity---50);
+  --origam-data-table__header---sort-icon-opacity-active: var(--origam-opacity---100);
+  --origam-data-table__header---sort-badge-background-color: var(--origam-color__border---default);
+  --origam-data-table__header---sort-badge-color: var(--origam-color__text---inverse);
   --origam-data-table__header---sort-badge-font-size: 0.875rem;
-  --origam-data-table__header---sort-badge-padding: 4px;
-  --origam-data-table__header---sort-badge-border-radius: 9999px;
+  --origam-data-table__header---sort-badge-padding: var(--origam-space---1);
+  --origam-data-table__header---sort-badge-border-radius: var(--origam-radius---full);
   --origam-data-table__header---sort-badge-min-width: 20px;
   --origam-data-table__header---sort-badge-min-height: 20px;
   --origam-data-table__header---sort-badge-width: 20px;
   --origam-data-table__header---sort-badge-height: 20px;
-  --origam-data-table__row---background-color: #ffffff;
-  --origam-data-table__row---color: #171717;
-  --origam-data-table__row---hover-background-color: #f5f5f5;
-  --origam-data-table__row---selected-background-color: #f5f5f5;
-  --origam-data-table__row---striped-background-color: #fafafa;
-  --origam-data-table__row---border-bottom-color: #d4d4d4;
-  --origam-data-table__row---border-bottom-width: 1px;
+  --origam-data-table__row---background-color: var(--origam-color__surface---default);
+  --origam-data-table__row---color: var(--origam-color__text---primary);
+  --origam-data-table__row---hover-background-color: var(--origam-color__surface---overlay);
+  --origam-data-table__row---selected-background-color: var(--origam-color__surface---overlay);
+  --origam-data-table__row---striped-background-color: var(--origam-color__surface---sunken);
+  --origam-data-table__row---border-bottom-color: var(--origam-color__border---subtle);
+  --origam-data-table__row---border-bottom-width: var(--origam-border__width---thin);
   --origam-data-table__row---border-bottom-style: solid;
-  --origam-data-table__row---transition-duration: 100ms;
-  --origam-data-table__row---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-data-table__row---column-title-font-weight: 500;
+  --origam-data-table__row---transition-duration: var(--origam-motion__duration---fast);
+  --origam-data-table__row---transition-easing: var(--origam-motion__easing---standard);
+  --origam-data-table__row---column-title-font-weight: var(--origam-font__weight---medium);
   --origam-data-table__row---mobile-column-min-height: 52px;
-  --origam-data-table__cell---padding-block: 12px;
-  --origam-data-table__cell---padding-inline: 16px;
-  --origam-data-table__cell---font-size: 0.875rem;
-  --origam-data-table__cell---fixed-background-color: #ffffff;
+  --origam-data-table__cell---padding-block: var(--origam-space---3);
+  --origam-data-table__cell---padding-inline: var(--origam-space---4);
+  --origam-data-table__cell---font-size: var(--origam-font__size---md);
+  --origam-data-table__cell---fixed-background-color: var(--origam-color__surface---raised);
   --origam-data-table__cell---fixed-z-index: 1;
-  --origam-data-table__cell---last-fixed-border-right-color: #d4d4d4;
-  --origam-data-table__cell---last-fixed-border-right-width: 1px;
+  --origam-data-table__cell---last-fixed-border-right-color: var(--origam-color__border---subtle);
+  --origam-data-table__cell---last-fixed-border-right-width: var(--origam-border__width---thin);
   --origam-data-table__cell---last-fixed-border-right-style: solid;
-  --origam-data-table__footer---background-color: #ffffff;
-  --origam-data-table__footer---color: #171717;
-  --origam-data-table__footer---padding-block: 8px;
-  --origam-data-table__footer---padding-inline: 4px;
-  --origam-data-table__footer---border-top-color: #d4d4d4;
-  --origam-data-table__footer---border-top-width: 1px;
+  --origam-data-table__footer---background-color: var(--origam-color__surface---default);
+  --origam-data-table__footer---color: var(--origam-color__text---primary);
+  --origam-data-table__footer---padding-block: var(--origam-space---2);
+  --origam-data-table__footer---padding-inline: var(--origam-space---1);
+  --origam-data-table__footer---border-top-color: var(--origam-color__border---subtle);
+  --origam-data-table__footer---border-top-width: var(--origam-border__width---thin);
   --origam-data-table__footer---border-top-style: solid;
   --origam-data-table__footer---align-items: center;
   --origam-data-table__footer---display: flex;
   --origam-data-table__footer---flex-wrap: wrap;
   --origam-data-table__footer---justify-content: flex-end;
-  --origam-data-table__footer---items-per-page-gap: 8px;
-  --origam-data-table__footer---items-per-page-padding-inline-end: 8px;
+  --origam-data-table__footer---items-per-page-gap: var(--origam-space---2);
+  --origam-data-table__footer---items-per-page-padding-inline-end: var(--origam-space---2);
   --origam-data-table__footer---items-per-page-select-width: 90px;
   --origam-data-table__footer--info---min-width: 116px;
-  --origam-data-table__footer--info---padding-inline: 16px;
+  --origam-data-table__footer--info---padding-inline: var(--origam-space---4);
   --origam-data-table__footer--info---justify-content: flex-end;
-  --origam-data-table__footer---pagination-margin-inline-start: 16px;
-  --origam-data-table---group-header-row-background-color: #f5f5f5;
-  --origam-data-table---group-header-row-color: #171717;
-  --origam-data-table---group-header-row-font-weight: 500;
-  --origam-data-table---group-header-row-column-padding-inline-start-factor: 16px;
-  --origam-data-table__empty---color: #525252;
+  --origam-data-table__footer---pagination-margin-inline-start: var(--origam-space---4);
+  --origam-data-table---group-header-row-background-color: var(--origam-color__surface---overlay);
+  --origam-data-table---group-header-row-color: var(--origam-color__text---primary);
+  --origam-data-table---group-header-row-font-weight: var(--origam-font__weight---medium);
+  --origam-data-table---group-header-row-column-padding-inline-start-factor: var(--origam-space---4);
+  --origam-data-table__empty---color: var(--origam-color__text---secondary);
   --origam-data-table__empty---text-align: center;
-  --origam-data-table---loading-row-color: #525252;
+  --origam-data-table---loading-row-color: var(--origam-color__text---secondary);
   --origam-data-table__sortable---cursor: pointer;
-  --origam-data-table__sortable---icon-color: #ffffff;
-  --origam-data-table__sortable---icon-color-hover: #ffffff;
-  --origam-data-table__sortable---icon-color-active: #ffffff;
-  --origam-list---background: #ffffff;
-  --origam-list---color: #171717;
-  --origam-list---box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
+  --origam-data-table__sortable---icon-color: var(--origam-color__text---inverse);
+  --origam-data-table__sortable---icon-color-hover: var(--origam-color__text---inverse);
+  --origam-data-table__sortable---icon-color-active: var(--origam-color__text---inverse);
+  --origam-list---background: var(--origam-color__surface---default);
+  --origam-list---color: var(--origam-color__text---primary);
+  --origam-list---box-shadow: var(--origam-shadow---none);
   --origam-list---border-radius: 0px;
-  --origam-list---border-color: #171717;
+  --origam-list---border-color: var(--origam-color__text---primary);
   --origam-list---border-style: solid;
-  --origam-list---border-top-width: 0px;
-  --origam-list---border-left-width: 0px;
-  --origam-list---border-bottom-width: 0px;
-  --origam-list---border-right-width: 0px;
-  --origam-list---border-start-start-radius: 0px;
-  --origam-list---border-start-end-radius: 0px;
-  --origam-list---border-end-start-radius: 0px;
-  --origam-list---border-end-end-radius: 0px;
-  --origam-list---padding-block-start: 8px;
-  --origam-list---padding-block-end: 8px;
-  --origam-list---padding-inline-start: 0px;
-  --origam-list---padding-inline-end: 0px;
+  --origam-list---border-top-width: var(--origam-border__width---0);
+  --origam-list---border-left-width: var(--origam-border__width---0);
+  --origam-list---border-bottom-width: var(--origam-border__width---0);
+  --origam-list---border-right-width: var(--origam-border__width---0);
+  --origam-list---border-start-start-radius: var(--origam-radius---none);
+  --origam-list---border-start-end-radius: var(--origam-radius---none);
+  --origam-list---border-end-start-radius: var(--origam-radius---none);
+  --origam-list---border-end-end-radius: var(--origam-radius---none);
+  --origam-list---padding-block-start: var(--origam-space---2);
+  --origam-list---padding-block-end: var(--origam-space---2);
+  --origam-list---padding-inline-start: var(--origam-space---0);
+  --origam-list---padding-inline-end: var(--origam-space---0);
   --origam-list---overflow: auto;
   --origam-list---position: relative;
   --origam-list---outline: none;
@@ -1635,18 +1636,18 @@
   --origam-list---density: 0px;
   --origam-list---indent-padding-nav: -8px;
   --origam-list---slim-prepend-width: 28px;
-  --origam-list__overlay---background-color: #ffffff;
+  --origam-list__overlay---background-color: var(--origam-color__overlay---scrim);
   --origam-list__overlay---border-radius: inherit;
-  --origam-list__overlay---opacity: 0;
+  --origam-list__overlay---opacity: var(--origam-opacity---0);
   --origam-list__overlay---pointer-events: none;
   --origam-list__overlay---position: absolute;
-  --origam-list__overlay---position-bottom: 0px;
-  --origam-list__overlay---position-left: 0px;
-  --origam-list__overlay---position-right: 0px;
-  --origam-list__overlay---position-top: 0px;
+  --origam-list__overlay---position-bottom: var(--origam-space---0);
+  --origam-list__overlay---position-left: var(--origam-space---0);
+  --origam-list__overlay---position-right: var(--origam-space---0);
+  --origam-list__overlay---position-top: var(--origam-space---0);
   --origam-list__overlay---transition-property: opacity;
-  --origam-list__overlay---transition-duration: 200ms;
-  --origam-list__overlay---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-list__overlay---transition-duration: var(--origam-motion__duration---medium);
+  --origam-list__overlay---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-list__item---align-items: center;
   --origam-list__item---display: grid;
   --origam-list__item---flex: none;
@@ -1655,44 +1656,44 @@
   --origam-list__item---max-width: 100%;
   --origam-list__item---min-height: 40px;
   --origam-list__item---text-decoration: none;
-  --origam-list__item---border-color: #171717;
+  --origam-list__item---border-color: var(--origam-color__text---primary);
   --origam-list__item---border-style: solid;
-  --origam-list__item---border-top-width: 0px;
-  --origam-list__item---border-left-width: 0px;
-  --origam-list__item---border-bottom-width: 0px;
-  --origam-list__item---border-right-width: 0px;
-  --origam-list__item---border-start-start-radius: 0px;
-  --origam-list__item---border-start-end-radius: 0px;
-  --origam-list__item---border-end-start-radius: 0px;
-  --origam-list__item---border-end-end-radius: 0px;
-  --origam-list__item---padding-block-start: 8px;
-  --origam-list__item---padding-block-end: 8px;
-  --origam-list__item---padding-inline-start: 16px;
-  --origam-list__item---padding-inline-end: 16px;
-  --origam-list__item---margin-block-start: 0px;
-  --origam-list__item---margin-block-end: 0px;
-  --origam-list__item---margin-inline-start: 0px;
-  --origam-list__item---margin-inline-end: 0px;
+  --origam-list__item---border-top-width: var(--origam-border__width---0);
+  --origam-list__item---border-left-width: var(--origam-border__width---0);
+  --origam-list__item---border-bottom-width: var(--origam-border__width---0);
+  --origam-list__item---border-right-width: var(--origam-border__width---0);
+  --origam-list__item---border-start-start-radius: var(--origam-radius---none);
+  --origam-list__item---border-start-end-radius: var(--origam-radius---none);
+  --origam-list__item---border-end-start-radius: var(--origam-radius---none);
+  --origam-list__item---border-end-end-radius: var(--origam-radius---none);
+  --origam-list__item---padding-block-start: var(--origam-space---2);
+  --origam-list__item---padding-block-end: var(--origam-space---2);
+  --origam-list__item---padding-inline-start: var(--origam-space---4);
+  --origam-list__item---padding-inline-end: var(--origam-space---4);
+  --origam-list__item---margin-block-start: var(--origam-space---0);
+  --origam-list__item---margin-block-end: var(--origam-space---0);
+  --origam-list__item---margin-inline-start: var(--origam-space---0);
+  --origam-list__item---margin-inline-end: var(--origam-space---0);
   --origam-list__item---position: relative;
   --origam-list__item---outline: none;
   --origam-list__item---pointer-events: none;
   --origam-list__item---user-select: none;
-  --origam-list__item---opacity: 0.6;
+  --origam-list__item---opacity: var(--origam-opacity---60);
   --origam-list__item---cursor: pointer;
-  --origam-list__item---overlay-opacity: 0.12;
-  --origam-list__item---overlay-background-color: #ffffff;
+  --origam-list__item---overlay-opacity: var(--origam-opacity---12);
+  --origam-list__item---overlay-background-color: var(--origam-color__overlay---scrim);
   --origam-list__item---overlay-border-radius: inherit;
   --origam-list__item---overlay-pointer-events: none;
   --origam-list__item---overlay-position: absolute;
-  --origam-list__item---overlay-position-bottom: 0px;
-  --origam-list__item---overlay-position-left: 0px;
-  --origam-list__item---overlay-position-right: 0px;
-  --origam-list__item---overlay-position-top: 0px;
+  --origam-list__item---overlay-position-bottom: var(--origam-space---0);
+  --origam-list__item---overlay-position-left: var(--origam-space---0);
+  --origam-list__item---overlay-position-right: var(--origam-space---0);
+  --origam-list__item---overlay-position-top: var(--origam-space---0);
   --origam-list__item---overlay-transition-property: opacity;
-  --origam-list__item---overlay-transition-duration: 200ms;
-  --origam-list__item---overlay-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-list__item---overlay-transition-duration: var(--origam-motion__duration---medium);
+  --origam-list__item---overlay-transition-timing-function: var(--origam-motion__easing---standard);
   --origam-list__item---underlay-position: absolute;
-  --origam-list__item---icon-opacity: 0.87;
+  --origam-list__item---icon-opacity: var(--origam-opacity---87);
   --origam-list__item---prepend-align-items: center;
   --origam-list__item---prepend-align-self: center;
   --origam-list__item---prepend-display: flex;
@@ -1708,8 +1709,8 @@
   --origam-list__item---content-align-self: center;
   --origam-list__item---content-grid-area: content;
   --origam-list__item---content-overflow: hidden;
-  --origam-list__item---title-font-size: 0.875rem;
-  --origam-list__item---title-font-weight: 400;
+  --origam-list__item---title-font-size: var(--origam-font__size---md);
+  --origam-list__item---title-font-weight: var(--origam-font__weight---regular);
   --origam-list__item---title-letter-spacing: 0.0094em;
   --origam-list__item---title-line-height: 1.5rem;
   --origam-list__item---title-text-transform: none;
@@ -1720,72 +1721,72 @@
   --origam-list__item---title-text-overflow: ellipsis;
   --origam-list__item---title-word-break: normal;
   --origam-list__item---title-word-wrap: break-word;
-  --origam-list__item---title-padding-block-start: 0px;
-  --origam-list__item---title-padding-block-end: 0px;
-  --origam-list__item---title-padding-inline-start: 0px;
-  --origam-list__item---title-padding-inline-end: 0px;
-  --origam-list__item---subtitle-font-size: 0.75rem;
-  --origam-list__item---subtitle-font-weight: 400;
+  --origam-list__item---title-padding-block-start: var(--origam-space---0);
+  --origam-list__item---title-padding-block-end: var(--origam-space---0);
+  --origam-list__item---title-padding-inline-start: var(--origam-space---0);
+  --origam-list__item---title-padding-inline-end: var(--origam-space---0);
+  --origam-list__item---subtitle-font-size: var(--origam-font__size---sm);
+  --origam-list__item---subtitle-font-weight: var(--origam-font__weight---regular);
   --origam-list__item---subtitle-letter-spacing: 0.0179em;
   --origam-list__item---subtitle-line-height: 1rem;
   --origam-list__item---subtitle-text-transform: none;
   --origam-list__item---subtitle-display: -webkit-box;
-  --origam-list__item---subtitle-opacity: 0.6;
+  --origam-list__item---subtitle-opacity: var(--origam-opacity---60);
   --origam-list__item---subtitle-overflow: hidden;
   --origam-list__item---subtitle-text-overflow: ellipsis;
   --origam-list__item---subtitle-word-break: break-all;
-  --origam-list__item---subtitle-padding-block-start: 0px;
-  --origam-list__item---subtitle-padding-block-end: 0px;
-  --origam-list__item---subtitle-padding-inline-start: 0px;
-  --origam-list__item---subtitle-padding-inline-end: 0px;
-  --origam-list__subheader---font-size: 0.75rem;
-  --origam-list__subheader---font-weight: 400;
-  --origam-list__subheader---color: #525252;
+  --origam-list__item---subtitle-padding-block-start: var(--origam-space---0);
+  --origam-list__item---subtitle-padding-block-end: var(--origam-space---0);
+  --origam-list__item---subtitle-padding-inline-start: var(--origam-space---0);
+  --origam-list__item---subtitle-padding-inline-end: var(--origam-space---0);
+  --origam-list__subheader---font-size: var(--origam-font__size---sm);
+  --origam-list__subheader---font-weight: var(--origam-font__weight---regular);
+  --origam-list__subheader---color: var(--origam-color__text---secondary);
   --origam-list__subheader---min-height: 40px;
-  --origam-list__subheader---padding-inline-end: 16px;
+  --origam-list__subheader---padding-inline-end: var(--origam-space---4);
   --origam-list__subheader---line-height: 1.375rem;
-  --origam-list__subheader---transition-duration: 200ms;
-  --origam-list__subheader---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-list__subheader---transition-duration: var(--origam-motion__duration---medium);
+  --origam-list__subheader---transition-easing: var(--origam-motion__easing---standard);
   --origam-list__subheader---inset-indent-padding: 32px;
   --origam-list__subheader---nav-font-size: 0.75rem;
-  --origam-list__group---list-indent-size: 16px;
-  --origam-list__group---prepend-width: 16px;
+  --origam-list__group---list-indent-size: var(--origam-space---4);
+  --origam-list__group---prepend-width: var(--origam-space---4);
   --origam-list__group---fluid-list-indent-size: 0px;
-  --origam-list__group---header-active-opacity: 0;
-  --origam-list__group---header-active-hover-opacity: 0;
-  --origam-list__divider---margin-block: 0px;
-  --origam-list__divider---color: #d4d4d4;
-  --origam-expansion-panel---background: #ffffff;
-  --origam-expansion-panel---color: #171717;
-  --origam-expansion-panel---border-radius: 4px;
-  --origam-expansion-panel---border-color: #d4d4d4;
+  --origam-list__group---header-active-opacity: var(--origam-opacity---0);
+  --origam-list__group---header-active-hover-opacity: var(--origam-opacity---0);
+  --origam-list__divider---margin-block: var(--origam-space---0);
+  --origam-list__divider---color: var(--origam-color__border---subtle);
+  --origam-expansion-panel---background: var(--origam-color__surface---raised);
+  --origam-expansion-panel---color: var(--origam-color__text---primary);
+  --origam-expansion-panel---border-radius: var(--origam-radius---sm);
+  --origam-expansion-panel---border-color: var(--origam-color__border---subtle);
   --origam-expansion-panel---border-style: solid;
-  --origam-expansion-panel---border-top-width: 0px;
-  --origam-expansion-panel---border-left-width: 0px;
-  --origam-expansion-panel---border-bottom-width: 0px;
-  --origam-expansion-panel---border-right-width: 0px;
+  --origam-expansion-panel---border-top-width: var(--origam-border__width---0);
+  --origam-expansion-panel---border-left-width: var(--origam-border__width---0);
+  --origam-expansion-panel---border-bottom-width: var(--origam-border__width---0);
+  --origam-expansion-panel---border-right-width: var(--origam-border__width---0);
   --origam-expansion-panel---flex: 1 0 100%;
   --origam-expansion-panel---max-width: 100%;
   --origam-expansion-panel---position: relative;
-  --origam-expansion-panel---transition-duration: 280ms;
+  --origam-expansion-panel---transition-duration: var(--origam-motion__duration---slow);
   --origam-expansion-panel---transition-property: margin-top, border-radius, border, max-width;
-  --origam-expansion-panel---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-expansion-panel---divider-color: #d4d4d4;
-  --origam-expansion-panel---divider-opacity: 0.12;
-  --origam-expansion-panel---active-margin-top: 16px;
-  --origam-expansion-panel---disabled-color: #a3a3a3;
+  --origam-expansion-panel---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-expansion-panel---divider-color: var(--origam-color__border---subtle);
+  --origam-expansion-panel---divider-opacity: var(--origam-opacity---12);
+  --origam-expansion-panel---active-margin-top: var(--origam-space---4);
+  --origam-expansion-panel---disabled-color: var(--origam-color__text---disabled);
   --origam-expansion-panel---disabled-pointer-events: none;
-  --origam-expansion-panel---disabled-overlay-opacity: 0.6;
+  --origam-expansion-panel---disabled-overlay-opacity: var(--origam-opacity---60);
   --origam-expansion-panel__shadow---position: absolute;
-  --origam-expansion-panel__shadow---top: 0px;
-  --origam-expansion-panel__shadow---left: 0px;
+  --origam-expansion-panel__shadow---top: var(--origam-space---0);
+  --origam-expansion-panel__shadow---left: var(--origam-space---0);
   --origam-expansion-panel__shadow---width: 100%;
   --origam-expansion-panel__shadow---height: 100%;
-  --origam-expansion-panel__shadow---box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
+  --origam-expansion-panel__shadow---box-shadow: var(--origam-shadow---sm);
   --origam-expansion-panel__shadow---border-radius: inherit;
   --origam-expansion-panel__shadow---z-index: -1;
   --origam-expansion-panel__header---font-size: 0.9375rem;
-  --origam-expansion-panel__header---font-weight: 400;
+  --origam-expansion-panel__header---font-weight: var(--origam-font__weight---regular);
   --origam-expansion-panel__header---line-height: 1;
   --origam-expansion-panel__header---min-height: 48px;
   --origam-expansion-panel__header---min-height-active: 64px;
@@ -1793,156 +1794,156 @@
   --origam-expansion-panel__header---border: none;
   --origam-expansion-panel__header---outline: none;
   --origam-expansion-panel__header---border-radius: inherit;
-  --origam-expansion-panel__header---hover-overlay-opacity: 0;
-  --origam-expansion-panel__header---focus-overlay-opacity: 0.12;
-  --origam-expansion-panel__header---wrapper-padding-block: 16px;
-  --origam-expansion-panel__header---wrapper-padding-inline: 24px;
+  --origam-expansion-panel__header---hover-overlay-opacity: var(--origam-opacity---0);
+  --origam-expansion-panel__header---focus-overlay-opacity: var(--origam-opacity---12);
+  --origam-expansion-panel__header---wrapper-padding-block: var(--origam-space---4);
+  --origam-expansion-panel__header---wrapper-padding-inline: var(--origam-space---6);
   --origam-expansion-panel__header---wrapper-display: flex;
   --origam-expansion-panel__header---wrapper-align-items: center;
   --origam-expansion-panel__header---wrapper-justify-content: space-between;
-  --origam-expansion-panel__header---wrapper-transition-duration: 280ms;
-  --origam-expansion-panel__header---wrapper-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-expansion-panel__header---wrapper-transition-duration: var(--origam-motion__duration---slow);
+  --origam-expansion-panel__header---wrapper-transition-easing: var(--origam-motion__easing---standard);
   --origam-expansion-panel__header---overlay-position: absolute;
-  --origam-expansion-panel__header---overlay-top: 0px;
-  --origam-expansion-panel__header---overlay-left: 0px;
+  --origam-expansion-panel__header---overlay-top: var(--origam-space---0);
+  --origam-expansion-panel__header---overlay-left: var(--origam-space---0);
   --origam-expansion-panel__header---overlay-width: 100%;
   --origam-expansion-panel__header---overlay-height: 100%;
   --origam-expansion-panel__header---overlay-border-radius: inherit;
-  --origam-expansion-panel__header---overlay-opacity: 0;
-  --origam-expansion-panel__header---prepend-margin-inline-end: 8px;
+  --origam-expansion-panel__header---overlay-opacity: var(--origam-opacity---0);
+  --origam-expansion-panel__header---prepend-margin-inline-end: var(--origam-space---2);
   --origam-expansion-panel__header---prepend-margin-block: -4px;
   --origam-expansion-panel__header---append-margin-inline-start: auto;
   --origam-expansion-panel__header---append-margin-block: -4px;
   --origam-expansion-panel__content---display: flex;
-  --origam-expansion-panel__content---padding-block-start: 8px;
-  --origam-expansion-panel__content---padding-block-end: 16px;
-  --origam-expansion-panel__content---padding-inline-start: 24px;
-  --origam-expansion-panel__content---padding-inline-end: 24px;
+  --origam-expansion-panel__content---padding-block-start: var(--origam-space---2);
+  --origam-expansion-panel__content---padding-block-end: var(--origam-space---4);
+  --origam-expansion-panel__content---padding-inline-start: var(--origam-space---6);
+  --origam-expansion-panel__content---padding-inline-end: var(--origam-space---6);
   --origam-expansion-panel__content---flex: 1 1 auto;
   --origam-expansion-panel__content---max-width: 100%;
-  --origam-expansion-panel__accordion---separator-color: #d4d4d4;
-  --origam-expansion-panel__accordion---header-overlay-transition: 280ms;
+  --origam-expansion-panel__accordion---separator-color: var(--origam-color__border---subtle);
+  --origam-expansion-panel__accordion---header-overlay-transition: var(--origam-motion__duration---slow);
   --origam-expansion-panel__popout---max-width: calc(100% - 32px);
   --origam-expansion-panel__popout---max-width-active: calc(100% + 16px);
   --origam-expansion-panel__inset---max-width: 100%;
   --origam-expansion-panel__inset---max-width-active: calc(100% - 32px);
-  --origam-data-list---background-color: #ffffff;
-  --origam-data-list---color: #171717;
-  --origam-data-list---border-radius: 0px;
-  --origam-data-list---padding: 0px;
-  --origam-data-list---gap: 0px;
+  --origam-data-list---background-color: var(--origam-color__surface---default);
+  --origam-data-list---color: var(--origam-color__text---primary);
+  --origam-data-list---border-radius: var(--origam-radius---none);
+  --origam-data-list---padding: var(--origam-space---0);
+  --origam-data-list---gap: var(--origam-space---0);
   --origam-data-list---display: block;
   --origam-data-list---overflow: hidden;
   --origam-data-list__item---background-color: rgba(0, 0, 0, 0);
-  --origam-data-list__item---padding: 0px;
-  --origam-data-list__item---hover-background-color: #f5f5f5;
-  --origam-data-list__item---active-background-color: #ffffff;
-  --origam-data-list__title---font-size: 0.75rem;
-  --origam-data-list__title---font-weight: 500;
-  --origam-data-list__title---color: #525252;
-  --origam-data-list__title---line-height: 1.5;
-  --origam-data-list__title---letter-spacing: 0.0094em;
-  --origam-data-list__text---font-size: 0.875rem;
-  --origam-data-list__text---color: #171717;
-  --origam-data-list__text---line-height: 1.5;
-  --origam-data-list__text---letter-spacing: 0em;
-  --origam-data-list__bordered---border-color: #a3a3a3;
+  --origam-data-list__item---padding: var(--origam-space---0);
+  --origam-data-list__item---hover-background-color: var(--origam-color__surface---overlay);
+  --origam-data-list__item---active-background-color: var(--origam-color__surface---raised);
+  --origam-data-list__title---font-size: var(--origam-font__size---sm);
+  --origam-data-list__title---font-weight: var(--origam-font__weight---medium);
+  --origam-data-list__title---color: var(--origam-color__text---secondary);
+  --origam-data-list__title---line-height: var(--origam-font__lineHeight---normal);
+  --origam-data-list__title---letter-spacing: var(--origam-font__letterSpacing---wide);
+  --origam-data-list__text---font-size: var(--origam-font__size---md);
+  --origam-data-list__text---color: var(--origam-color__text---primary);
+  --origam-data-list__text---line-height: var(--origam-font__lineHeight---normal);
+  --origam-data-list__text---letter-spacing: var(--origam-font__letterSpacing---normal);
+  --origam-data-list__bordered---border-color: var(--origam-color__border---default);
   --origam-data-list__bordered---border-style: solid;
-  --origam-data-list__bordered---border-width: 1px;
-  --origam-data-list__bordered---item-border-bottom-width: 1px;
-  --origam-data-list__bordered---item-border-color: #d4d4d4;
-  --origam-data-list__striped---item-even-background-color: #f5f5f5;
+  --origam-data-list__bordered---border-width: var(--origam-border__width---thin);
+  --origam-data-list__bordered---item-border-bottom-width: var(--origam-border__width---thin);
+  --origam-data-list__bordered---item-border-color: var(--origam-color__border---subtle);
+  --origam-data-list__striped---item-even-background-color: var(--origam-color__surface---overlay);
   --origam-data-list__striped---item-odd-background-color: rgba(0, 0, 0, 0);
   --origam-data-list__kv---display: block;
-  --origam-data-list__kv---row-padding-block: 12px;
-  --origam-data-list__kv---row-divider: #d4d4d4;
+  --origam-data-list__kv---row-padding-block: var(--origam-space---3);
+  --origam-data-list__kv---row-divider: var(--origam-color__border---subtle);
   --origam-data-list__kv---key-width: 160px;
-  --origam-data-list__kv---key-color: #525252;
-  --origam-data-list__kv---key-font-size: 0.875rem;
-  --origam-data-list__kv---key-font-weight: 500;
-  --origam-data-list__kv---key-line-height: 1.5;
-  --origam-data-list__kv---value-color: #171717;
-  --origam-data-list__kv---value-font-size: 0.875rem;
-  --origam-data-list__kv---value-line-height: 1.5;
-  --origam-data-list__kv---gap-key-value: 16px;
-  --origam-data-list__kv---value-inline-gap: 8px;
+  --origam-data-list__kv---key-color: var(--origam-color__text---secondary);
+  --origam-data-list__kv---key-font-size: var(--origam-font__size---md);
+  --origam-data-list__kv---key-font-weight: var(--origam-font__weight---medium);
+  --origam-data-list__kv---key-line-height: var(--origam-font__lineHeight---normal);
+  --origam-data-list__kv---value-color: var(--origam-color__text---primary);
+  --origam-data-list__kv---value-font-size: var(--origam-font__size---md);
+  --origam-data-list__kv---value-line-height: var(--origam-font__lineHeight---normal);
+  --origam-data-list__kv---gap-key-value: var(--origam-space---4);
+  --origam-data-list__kv---value-inline-gap: var(--origam-space---2);
   --origam-carousel---aspect-ratio: auto;
   --origam-carousel---position: relative;
   --origam-carousel---overflow: hidden;
   --origam-carousel---width: 100%;
-  --origam-carousel---transition-duration: 280ms;
-  --origam-carousel---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-carousel---transition-duration: var(--origam-motion__duration---slow);
+  --origam-carousel---transition-easing: var(--origam-motion__easing---standard);
   --origam-carousel__controls---background-color: rgba(0, 0, 0, 0.4);
-  --origam-carousel__controls---color: #171717;
+  --origam-carousel__controls---color: var(--origam-color__text---primary);
   --origam-carousel__controls---height: 50px;
   --origam-carousel__controls---width: 100%;
   --origam-carousel__controls---position: absolute;
-  --origam-carousel__controls---position-bottom: 0px;
-  --origam-carousel__controls---z-index: 1;
-  --origam-carousel---controls-item-margin-inline: 8px;
-  --origam-carousel---controls-item-opacity: 0.5;
-  --origam-carousel---controls-item-opacity-active: 1;
-  --origam-carousel---controls-item-opacity-hover: 0.87;
-  --origam-carousel__delimiters---color: #171717;
-  --origam-carousel__delimiters---active-color: #7c3aed;
-  --origam-carousel__delimiters---gap: 8px;
-  --origam-carousel__delimiters---padding: 8px;
+  --origam-carousel__controls---position-bottom: var(--origam-space---0);
+  --origam-carousel__controls---z-index: var(--origam-zIndex---raised);
+  --origam-carousel---controls-item-margin-inline: var(--origam-space---2);
+  --origam-carousel---controls-item-opacity: var(--origam-opacity---50);
+  --origam-carousel---controls-item-opacity-active: var(--origam-opacity---100);
+  --origam-carousel---controls-item-opacity-hover: var(--origam-opacity---87);
+  --origam-carousel__delimiters---color: var(--origam-color__text---primary);
+  --origam-carousel__delimiters---active-color: var(--origam-color__action--primary---bg);
+  --origam-carousel__delimiters---gap: var(--origam-space---2);
+  --origam-carousel__delimiters---padding: var(--origam-space---2);
   --origam-carousel__progress---position: absolute;
-  --origam-carousel__progress---position-top: 0px;
+  --origam-carousel__progress---position-top: var(--origam-space---0);
   --origam-carousel__progress---position-bottom: auto;
-  --origam-carousel__progress---position-left: 0px;
-  --origam-carousel__progress---position-right: 0px;
-  --origam-carousel__progress---z-index: 1;
-  --origam-carousel__progress---margin: 0px;
+  --origam-carousel__progress---position-left: var(--origam-space---0);
+  --origam-carousel__progress---position-right: var(--origam-space---0);
+  --origam-carousel__progress---z-index: var(--origam-zIndex---raised);
+  --origam-carousel__progress---margin: var(--origam-space---0);
   --origam-carousel---hide-delimiter-background-controls-background: rgba(0, 0, 0, 0);
   --origam-carousel---vertical-delimiters-controls-width: 50px;
   --origam-window---overflow: hidden;
   --origam-window---position: relative;
-  --origam-window---transition-duration: 280ms;
-  --origam-window---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-window---transition-duration: var(--origam-motion__duration---slow);
+  --origam-window---transition-easing: var(--origam-motion__easing---standard);
   --origam-window__container---display: flex;
   --origam-window__container---flex-direction: column;
   --origam-window__container---height: inherit;
   --origam-window__container---position: relative;
   --origam-window__controls---position: absolute;
-  --origam-window__controls---position-left: 0px;
-  --origam-window__controls---position-top: 0px;
+  --origam-window__controls---position-left: var(--origam-space---0);
+  --origam-window__controls---position-top: var(--origam-space---0);
   --origam-window__controls---width: 100%;
   --origam-window__controls---height: 100%;
-  --origam-window__controls---padding-inline: 16px;
-  --origam-window__controls---color: #171717;
-  --origam-window__controls---hover-color: #ffffff;
-  --origam-window---item-x-transition-duration: 280ms;
-  --origam-window---item-x-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-window---item-y-transition-duration: 280ms;
-  --origam-window---item-y-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-window---item-fade-transition-duration: 200ms;
-  --origam-window---item-fade-transition-easing: cubic-bezier(0, 0, 0.2, 1);
+  --origam-window__controls---padding-inline: var(--origam-space---4);
+  --origam-window__controls---color: var(--origam-color__text---primary);
+  --origam-window__controls---hover-color: var(--origam-color__action--primary---fg);
+  --origam-window---item-x-transition-duration: var(--origam-motion__duration---slow);
+  --origam-window---item-x-transition-easing: var(--origam-motion__easing---standard);
+  --origam-window---item-y-transition-duration: var(--origam-motion__duration---slow);
+  --origam-window---item-y-transition-easing: var(--origam-motion__easing---standard);
+  --origam-window---item-fade-transition-duration: var(--origam-motion__duration---medium);
+  --origam-window---item-fade-transition-easing: var(--origam-motion__easing---decelerate);
   --origam-window---show-arrows-on-hover-prev-transform: translateX(-200%);
   --origam-window---show-arrows-on-hover-next-transform: translateX(200%);
   --origam-window---show-arrows-on-hover-hover-transform: translateX(0);
-  --origam-window-item---x-transition-duration: 280ms;
-  --origam-window-item---x-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-window-item---y-transition-duration: 280ms;
-  --origam-window-item---y-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-window-item---x-transition-duration: var(--origam-motion__duration---slow);
+  --origam-window-item---x-transition-easing: var(--origam-motion__easing---standard);
+  --origam-window-item---y-transition-duration: var(--origam-motion__duration---slow);
+  --origam-window-item---y-transition-easing: var(--origam-motion__easing---standard);
   --origam-slide-group---display: flex;
   --origam-slide-group---overflow: hidden;
-  --origam-slide-group---transition-duration: 200ms;
-  --origam-slide-group---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-slide-group---transition-duration: var(--origam-motion__duration---medium);
+  --origam-slide-group---transition-easing: var(--origam-motion__easing---standard);
   --origam-slide-group__prev---align-items: center;
   --origam-slide-group__prev---display: flex;
   --origam-slide-group__prev---flex: 0 1 52px;
   --origam-slide-group__prev---min-width: 52px;
   --origam-slide-group__prev---cursor: pointer;
-  --origam-slide-group__prev---opacity-disabled: 0.6;
-  --origam-slide-group__prev---color: #171717;
+  --origam-slide-group__prev---opacity-disabled: var(--origam-opacity---60);
+  --origam-slide-group__prev---color: var(--origam-color__text---primary);
   --origam-slide-group__next---align-items: center;
   --origam-slide-group__next---display: flex;
   --origam-slide-group__next---flex: 0 1 52px;
   --origam-slide-group__next---min-width: 52px;
   --origam-slide-group__next---cursor: pointer;
-  --origam-slide-group__next---opacity-disabled: 0.6;
-  --origam-slide-group__next---color: #171717;
+  --origam-slide-group__next---opacity-disabled: var(--origam-opacity---60);
+  --origam-slide-group__next---color: var(--origam-color__text---primary);
   --origam-slide-group__container---display: flex;
   --origam-slide-group__container---flex: 1 1 auto;
   --origam-slide-group__container---overflow-x: auto;
@@ -1955,788 +1956,797 @@
   --origam-slide-group__vertical---max-height: inherit;
   --origam-slide-group__vertical---content-overflow-x: hidden;
   --origam-slide-group__vertical---content-overflow-y: auto;
-  --origam-contextual-menu---background: #ffffff;
-  --origam-contextual-menu---color: #171717;
-  --origam-contextual-menu---border-radius: 8px;
-  --origam-contextual-menu---box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
-  --origam-contextual-menu---z-index: 1000;
+  --origam-contextual-menu---background: var(--origam-color__surface---raised);
+  --origam-contextual-menu---color: var(--origam-color__text---primary);
+  --origam-contextual-menu---border-radius: var(--origam-radius---md);
+  --origam-contextual-menu---box-shadow: var(--origam-shadow---lg);
+  --origam-contextual-menu---z-index: var(--origam-zIndex---dropdown);
   --origam-contextual-menu---max-height: calc(100vh - 32px);
   --origam-contextual-menu---position: fixed;
-  --origam-contextual-menu---transition-duration: 100ms;
-  --origam-contextual-menu---transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  --origam-contextual-menu__content---padding: 4px;
+  --origam-contextual-menu---transition-duration: var(--origam-motion__duration---fast);
+  --origam-contextual-menu---transition-timing-function: var(--origam-motion__easing---decelerate);
+  --origam-contextual-menu__content---padding: var(--origam-space---1);
   --origam-contextual-menu__content---max-width: 320px;
   --origam-contextual-menu__content---overflow: auto;
-  --origam-contextual-menu---offset-top: 8px;
-  --origam-contextual-menu---offset-bottom: 8px;
-  --origam-contextual-menu---offset-left: 0px;
-  --origam-contextual-menu---offset-right: 0px;
-  --origam-picker---background-color: #ffffff;
-  --origam-picker---color: #171717;
-  --origam-picker---border-color: #d4d4d4;
-  --origam-picker---border-width: 1px;
-  --origam-picker---border-radius: 8px;
-  --origam-picker---box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
-  --origam-picker---padding-block: 16px;
-  --origam-picker---padding-inline: 16px;
+  --origam-contextual-menu---offset-top: var(--origam-space---2);
+  --origam-contextual-menu---offset-bottom: var(--origam-space---2);
+  --origam-contextual-menu---offset-left: var(--origam-space---0);
+  --origam-contextual-menu---offset-right: var(--origam-space---0);
+  --origam-picker---background-color: var(--origam-color__surface---raised);
+  --origam-picker---color: var(--origam-color__text---primary);
+  --origam-picker---border-color: var(--origam-color__border---subtle);
+  --origam-picker---border-width: var(--origam-border__width---thin);
+  --origam-picker---border-radius: var(--origam-radius---md);
+  --origam-picker---box-shadow: var(--origam-shadow---lg);
+  --origam-picker---padding-block: var(--origam-space---4);
+  --origam-picker---padding-inline: var(--origam-space---4);
   --origam-picker---min-width: 320px;
   --origam-picker---max-width: 100vw;
-  --origam-picker---z-index: 1000;
-  --origam-picker---transition-duration: 200ms;
-  --origam-picker---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-picker__title---color: #525252;
-  --origam-picker__title---font-size: 0.875rem;
-  --origam-picker__title---font-weight: 500;
-  --origam-date-picker---background-color: #ffffff;
-  --origam-date-picker---color: #171717;
-  --origam-date-picker---border-radius: 8px;
-  --origam-date-picker---padding-block: 16px;
-  --origam-date-picker---padding-inline: 16px;
-  --origam-date-picker---transition-duration: 100ms;
-  --origam-date-picker---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-date-picker__header---background-color: #7c3aed;
-  --origam-date-picker__header---color: #ffffff;
-  --origam-date-picker__header---padding-block: 16px;
-  --origam-date-picker__header---padding-inline: 16px;
-  --origam-date-picker__header---font-size: 1rem;
-  --origam-date-picker__header---font-weight: 500;
+  --origam-picker---z-index: var(--origam-zIndex---dropdown);
+  --origam-picker---transition-duration: var(--origam-motion__duration---medium);
+  --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-picker__title---color: var(--origam-color__text---secondary);
+  --origam-picker__title---font-size: var(--origam-font__size---md);
+  --origam-picker__title---font-weight: var(--origam-font__weight---medium);
+  --origam-date-picker---background-color: var(--origam-color__surface---raised);
+  --origam-date-picker---color: var(--origam-color__text---primary);
+  --origam-date-picker---border-radius: var(--origam-radius---md);
+  --origam-date-picker---padding-block: var(--origam-space---4);
+  --origam-date-picker---padding-inline: var(--origam-space---4);
+  --origam-date-picker---transition-duration: var(--origam-motion__duration---fast);
+  --origam-date-picker---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-date-picker__header---background-color: var(--origam-color__action--primary---bg);
+  --origam-date-picker__header---color: var(--origam-color__action--primary---fg);
+  --origam-date-picker__header---padding-block: var(--origam-space---4);
+  --origam-date-picker__header---padding-inline: var(--origam-space---4);
+  --origam-date-picker__header---font-size: var(--origam-font__size---lg);
+  --origam-date-picker__header---font-weight: var(--origam-font__weight---medium);
   --origam-date-picker__header---min-height: 70px;
-  --origam-date-picker__controls---color: #525252;
-  --origam-date-picker__controls---color-hover: #171717;
-  --origam-date-picker__controls---color-disabled: #a3a3a3;
-  --origam-date-picker__controls---padding: 8px;
-  --origam-date-picker__month---padding-block: 8px;
-  --origam-date-picker__month---padding-inline: 12px;
-  --origam-date-picker__month---border-radius: 4px;
-  --origam-date-picker__month---color: #171717;
+  --origam-date-picker__controls---color: var(--origam-color__text---secondary);
+  --origam-date-picker__controls---color-hover: var(--origam-color__text---primary);
+  --origam-date-picker__controls---color-disabled: var(--origam-color__text---disabled);
+  --origam-date-picker__controls---padding: var(--origam-space---2);
+  --origam-date-picker__month---padding-block: var(--origam-space---2);
+  --origam-date-picker__month---padding-inline: var(--origam-space---3);
+  --origam-date-picker__month---border-radius: var(--origam-radius---sm);
+  --origam-date-picker__month---color: var(--origam-color__text---primary);
   --origam-date-picker__month---background-color: rgba(0, 0, 0, 0);
-  --origam-date-picker__month---background-color-hover: #f5f5f5;
-  --origam-date-picker__month---background-color-selected: #7c3aed;
-  --origam-date-picker__month---color-selected: #ffffff;
-  --origam-date-picker__month---border-color-today: #7c3aed;
-  --origam-date-picker__month---border-width-today: 1px;
-  --origam-date-picker__month---opacity-disabled: 0.32;
-  --origam-date-picker__year---padding-block: 8px;
-  --origam-date-picker__year---padding-inline: 16px;
-  --origam-date-picker__year---border-radius: 4px;
-  --origam-date-picker__year---color: #171717;
+  --origam-date-picker__month---background-color-hover: var(--origam-color__surface---overlay);
+  --origam-date-picker__month---background-color-selected: var(--origam-color__action--primary---bg);
+  --origam-date-picker__month---color-selected: var(--origam-color__action--primary---fg);
+  --origam-date-picker__month---border-color-today: var(--origam-color__action--primary---bg);
+  --origam-date-picker__month---border-width-today: var(--origam-border__width---thin);
+  --origam-date-picker__month---opacity-disabled: var(--origam-opacity---32);
+  --origam-date-picker__year---padding-block: var(--origam-space---2);
+  --origam-date-picker__year---padding-inline: var(--origam-space---4);
+  --origam-date-picker__year---border-radius: var(--origam-radius---sm);
+  --origam-date-picker__year---color: var(--origam-color__text---primary);
   --origam-date-picker__year---background-color: rgba(0, 0, 0, 0);
-  --origam-date-picker__year---background-color-hover: #f5f5f5;
-  --origam-date-picker__year---background-color-selected: #7c3aed;
-  --origam-date-picker__year---color-selected: #ffffff;
-  --origam-date-picker__weekday---color: #525252;
-  --origam-date-picker__weekday---font-size: 0.75rem;
-  --origam-date-picker__weekday---font-weight: 500;
+  --origam-date-picker__year---background-color-hover: var(--origam-color__surface---overlay);
+  --origam-date-picker__year---background-color-selected: var(--origam-color__action--primary---bg);
+  --origam-date-picker__year---color-selected: var(--origam-color__action--primary---fg);
+  --origam-date-picker__weekday---color: var(--origam-color__text---secondary);
+  --origam-date-picker__weekday---font-size: var(--origam-font__size---sm);
+  --origam-date-picker__weekday---font-weight: var(--origam-font__weight---medium);
   --origam-date-picker__day---size: 40px;
-  --origam-date-picker__day---color: #171717;
+  --origam-date-picker__day---color: var(--origam-color__text---primary);
   --origam-date-picker__day---background-color: rgba(0, 0, 0, 0);
-  --origam-date-picker__day---background-color-hover: #f5f5f5;
-  --origam-date-picker__day---background-color-selected: #7c3aed;
-  --origam-date-picker__day---color-selected: #ffffff;
-  --origam-date-picker__day---background-color-in-range: #f5f5f5;
-  --origam-date-picker__day---border-color-today: #7c3aed;
-  --origam-date-picker__day---color-out-of-month: #a3a3a3;
-  --origam-date-picker__day---opacity-disabled: 0.32;
-  --origam-date-picker__day---border-radius: 9999px;
+  --origam-date-picker__day---background-color-hover: var(--origam-color__surface---overlay);
+  --origam-date-picker__day---background-color-selected: var(--origam-color__action--primary---bg);
+  --origam-date-picker__day---color-selected: var(--origam-color__action--primary---fg);
+  --origam-date-picker__day---background-color-in-range: var(--origam-color__surface---overlay);
+  --origam-date-picker__day---border-color-today: var(--origam-color__action--primary---bg);
+  --origam-date-picker__day---color-out-of-month: var(--origam-color__text---disabled);
+  --origam-date-picker__day---opacity-disabled: var(--origam-opacity---32);
+  --origam-date-picker__day---border-radius: var(--origam-radius---full);
   --origam-date-picker-field---min-width: 200px;
   --origam-date-picker-field---max-width: 320px;
-  --origam-date-picker-field---menu-offset: 4px;
-  --origam-date-picker-field__icon---color: #525252;
-  --origam-date-picker-field__icon---color-hover: #171717;
-  --origam-date-picker-field__icon---color-error: #b91c1c;
-  --origam-code---background-color: #fafafa;
-  --origam-code---color: #171717;
-  --origam-code---border-color: #d4d4d4;
-  --origam-code---border-width: 1px;
-  --origam-code---border-radius: 8px;
-  --origam-code---padding-block: 16px;
-  --origam-code---padding-inline: 16px;
-  --origam-code---font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  --origam-code---font-size: 0.75rem;
+  --origam-date-picker-field---menu-offset: var(--origam-space---1);
+  --origam-date-picker-field__icon---color: var(--origam-color__text---secondary);
+  --origam-date-picker-field__icon---color-hover: var(--origam-color__text---primary);
+  --origam-date-picker-field__icon---color-error: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-code---background-color: var(--origam-color__surface---sunken);
+  --origam-code---color: var(--origam-color__text---primary);
+  --origam-code---border-color: var(--origam-color__border---subtle);
+  --origam-code---border-width: var(--origam-border__width---thin);
+  --origam-code---border-radius: var(--origam-radius---md);
+  --origam-code---padding-block: var(--origam-space---4);
+  --origam-code---padding-inline: var(--origam-space---4);
+  --origam-code---font-family: var(--origam-font__family---mono);
+  --origam-code---font-size: var(--origam-font__size---sm);
   --origam-code---line-height: 1.6;
-  --origam-code__header---background-color: #f5f5f5;
-  --origam-code__header---color: #525252;
-  --origam-code__header---padding-block: 8px;
-  --origam-code__header---padding-inline: 16px;
-  --origam-code__header---gap: 8px;
-  --origam-code__filename---color: #525252;
-  --origam-code__filename---font-size: 0.625rem;
-  --origam-code__filename---font-weight: 500;
-  --origam-code__copy---color: #525252;
-  --origam-code__copy---color-hover: #171717;
+  --origam-code__header---background-color: var(--origam-color__surface---overlay);
+  --origam-code__header---color: var(--origam-color__text---secondary);
+  --origam-code__header---padding-block: var(--origam-space---2);
+  --origam-code__header---padding-inline: var(--origam-space---4);
+  --origam-code__header---gap: var(--origam-space---2);
+  --origam-code__filename---color: var(--origam-color__text---secondary);
+  --origam-code__filename---font-size: var(--origam-font__size---xs);
+  --origam-code__filename---font-weight: var(--origam-font__weight---medium);
+  --origam-code__copy---color: var(--origam-color__text---secondary);
+  --origam-code__copy---color-hover: var(--origam-color__text---primary);
   --origam-code__copy---background-color: rgba(0, 0, 0, 0);
-  --origam-code__copy---background-color-hover: #ffffff;
-  --origam-code__copy---padding-block: 4px;
-  --origam-code__copy---padding-inline: 8px;
-  --origam-code__copy---border-radius: 4px;
-  --origam-code__copy---font-size: 0.625rem;
-  --origam-code__copy---gap: 4px;
-  --origam-code__copy---offset: 8px;
-  --origam-code---line-number-color: #a3a3a3;
+  --origam-code__copy---background-color-hover: var(--origam-color__surface---raised);
+  --origam-code__copy---padding-block: var(--origam-space---1);
+  --origam-code__copy---padding-inline: var(--origam-space---2);
+  --origam-code__copy---border-radius: var(--origam-radius---sm);
+  --origam-code__copy---font-size: var(--origam-font__size---xs);
+  --origam-code__copy---gap: var(--origam-space---1);
+  --origam-code__copy---offset: var(--origam-space---2);
+  --origam-code__compact---gap: var(--origam-space---3);
+  --origam-code__compact---padding-block: var(--origam-space---2);
+  --origam-code__compact---padding-inline: var(--origam-space---4);
+  --origam-code__compact---line-height: 1.4;
+  --origam-code---compact-copy-background-color: var(--origam-color__surface---raised);
+  --origam-code---compact-copy-padding-block: var(--origam-space---1);
+  --origam-code---compact-copy-padding-inline: var(--origam-space---2);
+  --origam-code---compact-copy-border-radius: var(--origam-radius---sm);
+  --origam-code---compact-copy-font-size: var(--origam-font__size---xs);
+  --origam-code__prompt---color: var(--origam-color__text---disabled);
+  --origam-code---line-number-color: var(--origam-color__text---disabled);
   --origam-code---line-number-width: 3.5rem;
-  --origam-code---line-number-padding-right: 20px;
-  --origam-code---line-number-gap: 16px;
-  --origam-code---line-highlight-background-color: #fffbeb;
-  --origam-code---line-highlight-accent-color: #b45309;
+  --origam-code---line-number-padding-right: var(--origam-space---5);
+  --origam-code---line-number-gap: var(--origam-space---4);
+  --origam-code---line-highlight-background-color: var(--origam-color__feedback--warning---bgSubtle);
+  --origam-code---line-highlight-accent-color: var(--origam-color__feedback--warning---fgSubtle);
   --origam-code__row---padding-inline: 0;
-  --origam-code__scrollbar---color: #d4d4d4;
-  --origam-code__syntax---foreground: #171717;
-  --origam-code__syntax---background: #fafafa;
-  --origam-code__syntax---keyword: #b91c1c;
-  --origam-code__syntax---string: #16a34a;
-  --origam-code__syntax---string-expression: #16a34a;
-  --origam-code__syntax---function: #1e40af;
-  --origam-code__syntax---parameter: #1e40af;
-  --origam-code__syntax---constant: #b45309;
-  --origam-code__syntax---comment: #a3a3a3;
-  --origam-code__syntax---punctuation: #525252;
-  --origam-code__syntax---link: #6d28d9;
-  --origam-code__syntax---inserted: #16a34a;
-  --origam-color-picker---background-color: #ffffff;
-  --origam-color-picker---border-radius: 8px;
-  --origam-color-picker---padding-block: 16px;
-  --origam-color-picker---padding-inline: 16px;
-  --origam-color-picker---gap: 12px;
+  --origam-code__scrollbar---color: var(--origam-color__border---subtle);
+  --origam-code__syntax---foreground: var(--origam-color__text---primary);
+  --origam-code__syntax---background: var(--origam-color__surface---sunken);
+  --origam-code__syntax---keyword: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-code__syntax---string: var(--origam-color__feedback--success---fgSubtle);
+  --origam-code__syntax---string-expression: var(--origam-color__feedback--success---fgSubtle);
+  --origam-code__syntax---function: var(--origam-color__feedback--info---fgSubtle);
+  --origam-code__syntax---parameter: var(--origam-color__feedback--info---fgSubtle);
+  --origam-code__syntax---constant: var(--origam-color__feedback--warning---fgSubtle);
+  --origam-code__syntax---comment: var(--origam-color__text---disabled);
+  --origam-code__syntax---punctuation: var(--origam-color__text---secondary);
+  --origam-code__syntax---link: var(--origam-color__action--primary---fgSubtle);
+  --origam-code__syntax---inserted: var(--origam-color__feedback--success---fgSubtle);
+  --origam-color-picker---background-color: var(--origam-color__surface---raised);
+  --origam-color-picker---border-radius: var(--origam-radius---md);
+  --origam-color-picker---padding-block: var(--origam-space---4);
+  --origam-color-picker---padding-inline: var(--origam-space---4);
+  --origam-color-picker---gap: var(--origam-space---3);
   --origam-color-picker---min-width: 300px;
-  --origam-color-picker---transition-duration: 100ms;
+  --origam-color-picker---transition-duration: var(--origam-motion__duration---fast);
   --origam-color-picker__canvas---width: 100%;
   --origam-color-picker__canvas---height: 150px;
-  --origam-color-picker__canvas---border-radius: 4px;
-  --origam-color-picker__canvas---border-color: #d4d4d4;
-  --origam-color-picker__canvas---border-width: 1px;
+  --origam-color-picker__canvas---border-radius: var(--origam-radius---sm);
+  --origam-color-picker__canvas---border-color: var(--origam-color__border---subtle);
+  --origam-color-picker__canvas---border-width: var(--origam-border__width---thin);
   --origam-color-picker__cursor---size: 16px;
-  --origam-color-picker__cursor---border-color: #ffffff;
+  --origam-color-picker__cursor---border-color: var(--origam-color__surface---default);
   --origam-color-picker__cursor---border-width: 2px;
-  --origam-color-picker__cursor---box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
-  --origam-color-picker__cursor---border-radius: 9999px;
+  --origam-color-picker__cursor---box-shadow: var(--origam-shadow---sm);
+  --origam-color-picker__cursor---border-radius: var(--origam-radius---full);
   --origam-color-picker__preview---width: 32px;
   --origam-color-picker__preview---height: 32px;
-  --origam-color-picker__preview---border-radius: 4px;
-  --origam-color-picker__preview---border-color: #d4d4d4;
-  --origam-color-picker__preview---border-width: 1px;
+  --origam-color-picker__preview---border-radius: var(--origam-radius---sm);
+  --origam-color-picker__preview---border-color: var(--origam-color__border---subtle);
+  --origam-color-picker__preview---border-width: var(--origam-border__width---thin);
   --origam-color-picker__edit---input-width: 48px;
-  --origam-color-picker__edit---gap: 8px;
-  --origam-color-picker__edit---label-color: #525252;
-  --origam-color-picker__edit---label-font-size: 0.625rem;
+  --origam-color-picker__edit---gap: var(--origam-space---2);
+  --origam-color-picker__edit---label-color: var(--origam-color__text---secondary);
+  --origam-color-picker__edit---label-font-size: var(--origam-font__size---xs);
   --origam-color-picker__swatches---item-size: 20px;
-  --origam-color-picker__swatches---gap: 4px;
-  --origam-color-picker__swatches---border-radius: 4px;
-  --origam-color-picker__swatches---border-color: #d4d4d4;
-  --origam-color-picker__swatches---border-width: 1px;
+  --origam-color-picker__swatches---gap: var(--origam-space---1);
+  --origam-color-picker__swatches---border-radius: var(--origam-radius---sm);
+  --origam-color-picker__swatches---border-color: var(--origam-color__border---subtle);
+  --origam-color-picker__swatches---border-width: var(--origam-border__width---thin);
   --origam-color-picker---hue-slider-height: 12px;
-  --origam-color-picker---hue-slider-border-radius: 9999px;
+  --origam-color-picker---hue-slider-border-radius: var(--origam-radius---full);
   --origam-color-picker---alpha-slider-height: 12px;
-  --origam-color-picker---alpha-slider-border-radius: 9999px;
+  --origam-color-picker---alpha-slider-border-radius: var(--origam-radius---full);
   --origam-color-picker-field---min-width: 200px;
   --origam-color-picker-field__swatch---width: 24px;
   --origam-color-picker-field__swatch---height: 24px;
-  --origam-color-picker-field__swatch---border-radius: 4px;
-  --origam-color-picker-field__swatch---border-color: #d4d4d4;
-  --origam-color-picker-field__swatch---border-width: 1px;
-  --origam-color-picker-field__icon---color: #525252;
-  --origam-color-picker-field__icon---color-hover: #171717;
+  --origam-color-picker-field__swatch---border-radius: var(--origam-radius---sm);
+  --origam-color-picker-field__swatch---border-color: var(--origam-color__border---subtle);
+  --origam-color-picker-field__swatch---border-width: var(--origam-border__width---thin);
+  --origam-color-picker-field__icon---color: var(--origam-color__text---secondary);
+  --origam-color-picker-field__icon---color-hover: var(--origam-color__text---primary);
   --origam-select---min-width: 150px;
-  --origam-select__list---background-color: #ffffff;
-  --origam-select__list---color: #171717;
-  --origam-select__list---border-radius: 8px;
+  --origam-select__list---background-color: var(--origam-color__surface---raised);
+  --origam-select__list---color: var(--origam-color__text---primary);
+  --origam-select__list---border-radius: var(--origam-radius---md);
   --origam-select__list---max-height: 300px;
-  --origam-select__list---padding-block: 4px;
+  --origam-select__list---padding-block: var(--origam-space---1);
   --origam-select__list---padding-inline: 0;
-  --origam-select__list---box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
-  --origam-select__list---z-index: 1000;
-  --origam-select__item---padding-block: 8px;
-  --origam-select__item---padding-inline: 16px;
+  --origam-select__list---box-shadow: var(--origam-shadow---lg);
+  --origam-select__list---z-index: var(--origam-zIndex---dropdown);
+  --origam-select__item---padding-block: var(--origam-space---2);
+  --origam-select__item---padding-inline: var(--origam-space---4);
   --origam-select__item---min-height: 40px;
-  --origam-select__item---color: #171717;
+  --origam-select__item---color: var(--origam-color__text---primary);
   --origam-select__item---background-color: rgba(0, 0, 0, 0);
-  --origam-select__item---background-color-hover: #f5f5f5;
-  --origam-select__item---background-color-selected: #f5f3ff;
-  --origam-select__item---color-selected: #7c3aed;
-  --origam-select__item---background-color-active: #f5f5f5;
-  --origam-select__item---opacity-disabled: 0.32;
-  --origam-select__item---transition-duration: 100ms;
-  --origam-select---no-data-color: #525252;
-  --origam-select---no-data-padding: 16px;
-  --origam-select---no-data-font-size: 0.75rem;
+  --origam-select__item---background-color-hover: var(--origam-color__surface---overlay);
+  --origam-select__item---background-color-selected: var(--origam-color__action--primary---bgSubtle);
+  --origam-select__item---color-selected: var(--origam-color__action--primary---bg);
+  --origam-select__item---background-color-active: var(--origam-color__surface---overlay);
+  --origam-select__item---opacity-disabled: var(--origam-opacity---32);
+  --origam-select__item---transition-duration: var(--origam-motion__duration---fast);
+  --origam-select---no-data-color: var(--origam-color__text---secondary);
+  --origam-select---no-data-padding: var(--origam-space---4);
+  --origam-select---no-data-font-size: var(--origam-font__size---sm);
   --origam-select---no-data-text-align: center;
-  --origam-select__chip---background-color: #f5f5f5;
-  --origam-select__chip---color: #171717;
-  --origam-select__chip---border-radius: 4px;
-  --origam-select__chip---padding-block: 4px;
-  --origam-select__chip---padding-inline: 8px;
-  --origam-select__chip---gap: 4px;
+  --origam-select__chip---background-color: var(--origam-color__surface---overlay);
+  --origam-select__chip---color: var(--origam-color__text---primary);
+  --origam-select__chip---border-radius: var(--origam-radius---sm);
+  --origam-select__chip---padding-block: var(--origam-space---1);
+  --origam-select__chip---padding-inline: var(--origam-space---2);
+  --origam-select__chip---gap: var(--origam-space---1);
   --origam-select__chip---max-width: 200px;
-  --origam-select__chevron---color: #525252;
-  --origam-select__chevron---color-active: #7c3aed;
-  --origam-select__chevron---transition-duration: 100ms;
-  --origam-select__chevron---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-select__search---background-color: #fafafa;
-  --origam-select__search---padding-block: 8px;
-  --origam-select__search---padding-inline: 12px;
-  --origam-select__search---border-bottom-color: #d4d4d4;
-  --origam-switch---transition-duration: 200ms;
-  --origam-switch---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-select__chevron---color: var(--origam-color__text---secondary);
+  --origam-select__chevron---color-active: var(--origam-color__action--primary---bg);
+  --origam-select__chevron---transition-duration: var(--origam-motion__duration---fast);
+  --origam-select__chevron---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-select__search---background-color: var(--origam-color__surface---sunken);
+  --origam-select__search---padding-block: var(--origam-space---2);
+  --origam-select__search---padding-inline: var(--origam-space---3);
+  --origam-select__search---border-bottom-color: var(--origam-color__border---subtle);
+  --origam-switch---transition-duration: var(--origam-motion__duration---medium);
+  --origam-switch---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-switch__track---width: 44px;
   --origam-switch__track---height: 24px;
-  --origam-switch__track---border-radius: 9999px;
-  --origam-switch__track---background-color: #e6e6e6;
-  --origam-switch__track---background-color-checked: #7c3aed;
-  --origam-switch__track---background-color-disabled: #e6e6e6;
-  --origam-switch__track---background-color-error: #ef4444;
+  --origam-switch__track---border-radius: var(--origam-radius---full);
+  --origam-switch__track---background-color: var(--origam-color__surface---disabled);
+  --origam-switch__track---background-color-checked: var(--origam-color__action--primary---bg);
+  --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
+  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
   --origam-switch__track---border-color: rgba(0, 0, 0, 0);
-  --origam-switch__track---border-width: 0px;
+  --origam-switch__track---border-width: var(--origam-border__width---0);
   --origam-switch__thumb---size: 20px;
-  --origam-switch__thumb---background-color: #ffffff;
-  --origam-switch__thumb---background-color-checked: #ffffff;
-  --origam-switch__thumb---background-color-disabled: #f5f5f5;
-  --origam-switch__thumb---box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
-  --origam-switch__thumb---border-radius: 9999px;
+  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
+  --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
+  --origam-switch__thumb---background-color-disabled: var(--origam-color__surface---overlay);
+  --origam-switch__thumb---box-shadow: var(--origam-shadow---sm);
+  --origam-switch__thumb---border-radius: var(--origam-radius---full);
   --origam-switch__thumb---translate-distance: 20px;
-  --origam-switch__thumb---transition-duration: 200ms;
-  --origam-switch__label---color: #171717;
-  --origam-switch__label---color-disabled: #a3a3a3;
-  --origam-switch__label---color-error: #b91c1c;
-  --origam-switch__label---font-size: 0.875rem;
-  --origam-switch__label---padding-inline: 8px;
+  --origam-switch__thumb---transition-duration: var(--origam-motion__duration---medium);
+  --origam-switch__label---color: var(--origam-color__text---primary);
+  --origam-switch__label---color-disabled: var(--origam-color__text---disabled);
+  --origam-switch__label---color-error: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-switch__label---font-size: var(--origam-font__size---md);
+  --origam-switch__label---padding-inline: var(--origam-space---2);
   --origam-switch__input---opacity: 0;
-  --origam-switch---opacity-disabled: 0.32;
+  --origam-switch---opacity-disabled: var(--origam-opacity---32);
   --origam-radio__input---size: 20px;
-  --origam-radio__input---border-color: #a3a3a3;
-  --origam-radio__input---border-color-checked: #7c3aed;
-  --origam-radio__input---border-color-disabled: #d4d4d4;
-  --origam-radio__input---border-color-error: #ef4444;
-  --origam-radio__input---border-width: 2px;
-  --origam-radio__input---border-radius: 9999px;
+  --origam-radio__input---border-color: var(--origam-color__border---default);
+  --origam-radio__input---border-color-checked: var(--origam-color__action--primary---bg);
+  --origam-radio__input---border-color-disabled: var(--origam-color__border---subtle);
+  --origam-radio__input---border-color-error: var(--origam-color__feedback--danger---bg);
+  --origam-radio__input---border-width: var(--origam-border__width---2);
+  --origam-radio__input---border-radius: var(--origam-radius---full);
   --origam-radio__input---background-color: rgba(0, 0, 0, 0);
-  --origam-radio__input---background-color-disabled: #e6e6e6;
-  --origam-radio__input---transition-duration: 100ms;
+  --origam-radio__input---background-color-disabled: var(--origam-color__surface---disabled);
+  --origam-radio__input---transition-duration: var(--origam-motion__duration---fast);
   --origam-radio__dot---size: 10px;
-  --origam-radio__dot---background-color: #7c3aed;
-  --origam-radio__dot---background-color-disabled: #a3a3a3;
-  --origam-radio__dot---background-color-error: #ef4444;
-  --origam-radio__dot---border-radius: 9999px;
+  --origam-radio__dot---background-color: var(--origam-color__action--primary---bg);
+  --origam-radio__dot---background-color-disabled: var(--origam-color__text---disabled);
+  --origam-radio__dot---background-color-error: var(--origam-color__feedback--danger---bg);
+  --origam-radio__dot---border-radius: var(--origam-radius---full);
   --origam-radio__dot---scale-from: 0;
   --origam-radio__dot---scale-to: 1;
-  --origam-radio__label---color: #171717;
-  --origam-radio__label---color-disabled: #a3a3a3;
-  --origam-radio__label---color-error: #b91c1c;
-  --origam-radio__label---font-size: 0.875rem;
-  --origam-radio__label---padding-inline: 8px;
-  --origam-radio---opacity-disabled: 0.32;
-  --origam-slider-field---padding-block: 8px;
-  --origam-slider-field---transition-duration: 100ms;
-  --origam-slider-field---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-radio__label---color: var(--origam-color__text---primary);
+  --origam-radio__label---color-disabled: var(--origam-color__text---disabled);
+  --origam-radio__label---color-error: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-radio__label---font-size: var(--origam-font__size---md);
+  --origam-radio__label---padding-inline: var(--origam-space---2);
+  --origam-radio---opacity-disabled: var(--origam-opacity---32);
+  --origam-slider-field---padding-block: var(--origam-space---2);
+  --origam-slider-field---transition-duration: var(--origam-motion__duration---fast);
+  --origam-slider-field---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-slider-field__track---height: 4px;
-  --origam-slider-field__track---background-color: #e6e6e6;
-  --origam-slider-field__track---border-radius: 9999px;
-  --origam-slider-field---track-fill-background-color: #7c3aed;
-  --origam-slider-field---track-fill-background-color-disabled: #f5f5f5;
-  --origam-slider-field---track-fill-background-color-error: #ef4444;
-  --origam-slider-field---track-fill-transition-duration: 100ms;
+  --origam-slider-field__track---background-color: var(--origam-color__surface---disabled);
+  --origam-slider-field__track---border-radius: var(--origam-radius---full);
+  --origam-slider-field---track-fill-background-color: var(--origam-color__action--primary---bg);
+  --origam-slider-field---track-fill-background-color-disabled: var(--origam-color__surface---overlay);
+  --origam-slider-field---track-fill-background-color-error: var(--origam-color__feedback--danger---bg);
+  --origam-slider-field---track-fill-transition-duration: var(--origam-motion__duration---fast);
   --origam-slider-field__thumb---size: 16px;
-  --origam-slider-field__thumb---background-color: #7c3aed;
-  --origam-slider-field__thumb---border-color: #ffffff;
-  --origam-slider-field__thumb---border-width: 2px;
-  --origam-slider-field__thumb---box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
+  --origam-slider-field__thumb---background-color: var(--origam-color__action--primary---bg);
+  --origam-slider-field__thumb---border-color: var(--origam-color__surface---default);
+  --origam-slider-field__thumb---border-width: var(--origam-border__width---2);
+  --origam-slider-field__thumb---box-shadow: var(--origam-shadow---sm);
   --origam-slider-field__thumb---scale-hover: 1.25;
   --origam-slider-field__thumb---scale-active: 1.5;
-  --origam-slider-field__thumb---focus-ring-color: #f5f3ff;
+  --origam-slider-field__thumb---focus-ring-color: var(--origam-color__action--primary---bgSubtle);
   --origam-slider-field__thumb---focus-ring-width: 8px;
   --origam-slider-field__tick---size: 4px;
-  --origam-slider-field__tick---background-color: #a3a3a3;
-  --origam-slider-field__tick---background-color-active: #ffffff;
-  --origam-slider-field__tick---border-radius: 9999px;
-  --origam-slider-field__label---color: #525252;
-  --origam-slider-field__label---font-size: 0.75rem;
-  --origam-slider-field__label---padding: 4px;
-  --origam-slider-field---opacity-disabled: 0.32;
-  --origam-rating-field---gap: 4px;
-  --origam-rating-field---transition-duration: 100ms;
-  --origam-rating-field__item---color: #a3a3a3;
-  --origam-rating-field__item---color-active: #fb8c00;
-  --origam-rating-field__item---color-disabled: #a3a3a3;
-  --origam-rating-field__item---font-size: 1.25rem;
+  --origam-slider-field__tick---background-color: var(--origam-color__text---disabled);
+  --origam-slider-field__tick---background-color-active: var(--origam-color__action--primary---fg);
+  --origam-slider-field__tick---border-radius: var(--origam-radius---full);
+  --origam-slider-field__label---color: var(--origam-color__text---secondary);
+  --origam-slider-field__label---font-size: var(--origam-font__size---sm);
+  --origam-slider-field__label---padding: var(--origam-space---1);
+  --origam-slider-field---opacity-disabled: var(--origam-opacity---32);
+  --origam-rating-field---gap: var(--origam-space---1);
+  --origam-rating-field---transition-duration: var(--origam-motion__duration---fast);
+  --origam-rating-field__item---color: var(--origam-color__text---disabled);
+  --origam-rating-field__item---color-active: var(--origam-color__feedback--warning---bg);
+  --origam-rating-field__item---color-disabled: var(--origam-color__text---disabled);
+  --origam-rating-field__item---font-size: var(--origam-font__size---2xl);
   --origam-rating-field__item---scale-hover: 1.15;
   --origam-rating-field__item---scale-active: 1.3;
-  --origam-rating-field__item---transition-duration: 100ms;
-  --origam-rating-field__label---color: #525252;
-  --origam-rating-field__label---font-size: 0.75rem;
-  --origam-rating-field__label---padding-inline: 8px;
-  --origam-rating-field---opacity-disabled: 0.32;
-  --origam-img---background-color: #f5f5f5;
-  --origam-img---color: #a3a3a3;
-  --origam-img---border-radius: 0px;
-  --origam-img---border-radius-rounded: 4px;
-  --origam-img---border-radius-circle: 9999px;
-  --origam-img---transition-duration: 200ms;
-  --origam-img---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-rating-field__item---transition-duration: var(--origam-motion__duration---fast);
+  --origam-rating-field__label---color: var(--origam-color__text---secondary);
+  --origam-rating-field__label---font-size: var(--origam-font__size---sm);
+  --origam-rating-field__label---padding-inline: var(--origam-space---2);
+  --origam-rating-field---opacity-disabled: var(--origam-opacity---32);
+  --origam-img---background-color: var(--origam-color__surface---overlay);
+  --origam-img---color: var(--origam-color__text---disabled);
+  --origam-img---border-radius: var(--origam-radius---none);
+  --origam-img---border-radius-rounded: var(--origam-radius---sm);
+  --origam-img---border-radius-circle: var(--origam-radius---full);
+  --origam-img---transition-duration: var(--origam-motion__duration---medium);
+  --origam-img---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-img---opacity-loading: 0;
   --origam-img---opacity-loaded: 1;
-  --origam-img__placeholder---background-color: #e6e6e6;
-  --origam-img__placeholder---color: #525252;
-  --origam-img__placeholder---font-size: 0.75rem;
-  --origam-img--error---background-color: #fff1f2;
-  --origam-img--error---color: #b91c1c;
+  --origam-img__placeholder---background-color: var(--origam-color__surface---disabled);
+  --origam-img__placeholder---color: var(--origam-color__text---secondary);
+  --origam-img__placeholder---font-size: var(--origam-font__size---sm);
+  --origam-img--error---background-color: var(--origam-color__feedback--danger---bgSubtle);
+  --origam-img--error---color: var(--origam-color__feedback--danger---fgSubtle);
   --origam-icon---color: currentColor;
-  --origam-icon---transition-duration: 100ms;
-  --origam-icon---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-icon---font-size-xs: 0.625rem;
-  --origam-icon---font-size-sm: 0.75rem;
-  --origam-icon---font-size-md: 0.875rem;
-  --origam-icon---font-size-lg: 1rem;
-  --origam-icon---font-size-xl: 1.125rem;
-  --origam-icon---font-size-2xl: 1.25rem;
-  --origam-icon---font-size-3xl: 1.5rem;
-  --origam-icon---font-size-4xl: 1.875rem;
-  --origam-icon---color-primary: #7c3aed;
-  --origam-icon---color-success: #4caf50;
-  --origam-icon---color-warning: #fb8c00;
-  --origam-icon---color-danger: #ef4444;
-  --origam-icon---color-info: #2196f3;
-  --origam-icon---color-disabled: #a3a3a3;
-  --origam-divider---color: #d4d4d4;
-  --origam-divider---thickness: 1px;
+  --origam-icon---transition-duration: var(--origam-motion__duration---fast);
+  --origam-icon---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-icon---font-size-xs: var(--origam-font__size---xs);
+  --origam-icon---font-size-sm: var(--origam-font__size---sm);
+  --origam-icon---font-size-md: var(--origam-font__size---md);
+  --origam-icon---font-size-lg: var(--origam-font__size---lg);
+  --origam-icon---font-size-xl: var(--origam-font__size---xl);
+  --origam-icon---font-size-2xl: var(--origam-font__size---2xl);
+  --origam-icon---font-size-3xl: var(--origam-font__size---3xl);
+  --origam-icon---font-size-4xl: var(--origam-font__size---4xl);
+  --origam-icon---color-primary: var(--origam-color__action--primary---bg);
+  --origam-icon---color-success: var(--origam-color__feedback--success---bg);
+  --origam-icon---color-warning: var(--origam-color__feedback--warning---bg);
+  --origam-icon---color-danger: var(--origam-color__feedback--danger---bg);
+  --origam-icon---color-info: var(--origam-color__feedback--info---bg);
+  --origam-icon---color-disabled: var(--origam-color__text---disabled);
+  --origam-divider---color: var(--origam-color__border---subtle);
+  --origam-divider---thickness: var(--origam-border__width---thin);
   --origam-divider---border-style: solid;
-  --origam-divider---padding-block-start: 0px;
-  --origam-divider---padding-block-end: 0px;
-  --origam-divider---padding-inline-start: 0px;
-  --origam-divider---padding-inline-end: 0px;
-  --origam-divider---margin-block: 0px;
-  --origam-divider---opacity: 1;
-  --origam-divider__label---color: #525252;
-  --origam-divider__label---font-size: 0.75rem;
-  --origam-divider__label---padding-inline: 12px;
-  --origam-title---color: #171717;
-  --origam-title---font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
-  --origam-title---font-weight: 600;
-  --origam-title---letter-spacing: -0.025em;
-  --origam-title---line-height: 1.25;
-  --origam-title---margin-block-start: 0px;
-  --origam-title---margin-block-end: 0px;
-  --origam-title---font-size-xs: 0.875rem;
-  --origam-title---font-size-sm: 1rem;
-  --origam-title---font-size-md: 1.125rem;
-  --origam-title---font-size-lg: 1.25rem;
-  --origam-title---font-size-xl: 1.5rem;
-  --origam-title---font-size-2xl: 1.875rem;
-  --origam-title---font-size-3xl: 2.25rem;
-  --origam-highlight---background-color: #fffbeb;
-  --origam-highlight---color: #b45309;
+  --origam-divider---padding-block-start: var(--origam-space---0);
+  --origam-divider---padding-block-end: var(--origam-space---0);
+  --origam-divider---padding-inline-start: var(--origam-space---0);
+  --origam-divider---padding-inline-end: var(--origam-space---0);
+  --origam-divider---margin-block: var(--origam-space---0);
+  --origam-divider---opacity: var(--origam-opacity---100);
+  --origam-divider__label---color: var(--origam-color__text---secondary);
+  --origam-divider__label---font-size: var(--origam-font__size---sm);
+  --origam-divider__label---padding-inline: var(--origam-space---3);
+  --origam-title---color: var(--origam-color__text---primary);
+  --origam-title---font-family: var(--origam-font__family---sans);
+  --origam-title---font-weight: var(--origam-font__weight---semibold);
+  --origam-title---letter-spacing: var(--origam-font__letterSpacing---tight);
+  --origam-title---line-height: var(--origam-font__lineHeight---tight);
+  --origam-title---margin-block-start: var(--origam-space---0);
+  --origam-title---margin-block-end: var(--origam-space---0);
+  --origam-title---font-size-xs: var(--origam-font__size---md);
+  --origam-title---font-size-sm: var(--origam-font__size---lg);
+  --origam-title---font-size-md: var(--origam-font__size---xl);
+  --origam-title---font-size-lg: var(--origam-font__size---2xl);
+  --origam-title---font-size-xl: var(--origam-font__size---3xl);
+  --origam-title---font-size-2xl: var(--origam-font__size---4xl);
+  --origam-title---font-size-3xl: var(--origam-font__size---5xl);
+  --origam-highlight---background-color: var(--origam-color__feedback--warning---bgSubtle);
+  --origam-highlight---color: var(--origam-color__feedback--warning---fgSubtle);
   --origam-highlight---padding-block: 0;
-  --origam-highlight---padding-inline: 4px;
-  --origam-highlight---border-radius: 2px;
-  --origam-highlight---font-weight: 500;
-  --origam-highlight--success---background-color: #f0fdf4;
-  --origam-highlight--success---color: #16a34a;
-  --origam-highlight--danger---background-color: #fff1f2;
-  --origam-highlight--danger---color: #b91c1c;
-  --origam-highlight--info---background-color: #eff6ff;
-  --origam-highlight--info---color: #1e40af;
-  --origam-counter---color: #525252;
-  --origam-counter---color-active: #7c3aed;
-  --origam-counter---color-error: #b91c1c;
-  --origam-counter---font-size: 0.625rem;
-  --origam-counter---font-weight: 400;
-  --origam-counter---letter-spacing: 0em;
-  --origam-counter---padding-inline: 4px;
-  --origam-counter---opacity: 0.7;
-  --origam-counter---opacity-active: 1;
-  --origam-counter---transition-duration: 100ms;
-  --origam-lazy---transition-duration: 200ms;
-  --origam-lazy---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-lazy---placeholder-min-height: 40px;
-  --origam-lazy---placeholder-background-color: #f5f5f5;
+  --origam-highlight---padding-inline: var(--origam-space---1);
+  --origam-highlight---border-radius: var(--origam-radius---xs);
+  --origam-highlight---font-weight: var(--origam-font__weight---medium);
+  --origam-highlight--success---background-color: var(--origam-color__feedback--success---bgSubtle);
+  --origam-highlight--success---color: var(--origam-color__feedback--success---fgSubtle);
+  --origam-highlight--danger---background-color: var(--origam-color__feedback--danger---bgSubtle);
+  --origam-highlight--danger---color: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-highlight--info---background-color: var(--origam-color__feedback--info---bgSubtle);
+  --origam-highlight--info---color: var(--origam-color__feedback--info---fgSubtle);
+  --origam-counter---color: var(--origam-color__text---secondary);
+  --origam-counter---color-active: var(--origam-color__action--primary---bg);
+  --origam-counter---color-error: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-counter---font-size: var(--origam-font__size---xs);
+  --origam-counter---font-weight: var(--origam-font__weight---regular);
+  --origam-counter---letter-spacing: var(--origam-font__letterSpacing---normal);
+  --origam-counter---padding-inline: var(--origam-space---1);
+  --origam-counter---opacity: var(--origam-opacity---70);
+  --origam-counter---opacity-active: var(--origam-opacity---100);
+  --origam-counter---transition-duration: var(--origam-motion__duration---fast);
+  --origam-lazy---transition-duration: var(--origam-motion__duration---medium);
+  --origam-lazy---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-lazy---placeholder-min-height: var(--origam-space---10);
+  --origam-lazy---placeholder-background-color: var(--origam-color__surface---overlay);
   --origam-responsive---aspect-ratio-default: 1.7778;
   --origam-responsive---aspect-ratio-square: 1;
   --origam-responsive---aspect-ratio-portrait: 0.75;
   --origam-responsive---max-width: 100%;
   --origam-responsive---overflow: hidden;
   --origam-parallax---aspect-ratio: 1.7778;
-  --origam-parallax---transition-duration: 280ms;
-  --origam-parallax---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-parallax---transition-duration-spring: 400ms;
-  --origam-parallax---transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-parallax---transition-duration: var(--origam-motion__duration---slow);
+  --origam-parallax---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-parallax---transition-duration-spring: var(--origam-motion__duration---xslow);
+  --origam-parallax---transition-easing-default: var(--origam-motion__easing---standard);
   --origam-parallax---transition-easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
   --origam-parallax---perspective: 1000px;
   --origam-parallax---transform-origin: center center;
   --origam-parallax---translate-multiplier: 0.5;
   --origam-parallax---background-color: rgba(0, 0, 0, 0);
-  --origam-parallax---color: #171717;
-  --origam-parallax__element---transition-duration: 200ms;
+  --origam-parallax---color: var(--origam-color__text---primary);
+  --origam-parallax__element---transition-duration: var(--origam-motion__duration---medium);
   --origam-parallax__layer---will-change: transform;
   --origam-parallax__layer---transform-origin: center center;
-  --origam-slide---transition-duration: 200ms;
-  --origam-slide---transition-duration-reverse: 200ms;
-  --origam-slide---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-slide---transition-duration: var(--origam-motion__duration---medium);
+  --origam-slide---transition-duration-reverse: var(--origam-motion__duration---medium);
+  --origam-slide---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-slide---translate-x-default: 100%;
   --origam-slide---translate-y-default: 100%;
   --origam-slide---translate-x-reverse: -100%;
   --origam-slide---translate-y-reverse: -100%;
   --origam-slide---opacity-from: 0;
   --origam-slide---opacity-to: 1;
-  --origam-transition__default---duration: 200ms;
-  --origam-transition__default---easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-transition__fade---duration: 200ms;
-  --origam-transition__fade---easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-transition---slide-x-duration: 200ms;
-  --origam-transition---slide-x-easing: cubic-bezier(0, 0, 0.2, 1);
+  --origam-transition__default---duration: var(--origam-motion__duration---medium);
+  --origam-transition__default---easing: var(--origam-motion__easing---standard);
+  --origam-transition__fade---duration: var(--origam-motion__duration---medium);
+  --origam-transition__fade---easing: var(--origam-motion__easing---standard);
+  --origam-transition---slide-x-duration: var(--origam-motion__duration---medium);
+  --origam-transition---slide-x-easing: var(--origam-motion__easing---decelerate);
   --origam-transition---slide-x-translate-distance: 100%;
-  --origam-transition---slide-y-duration: 200ms;
-  --origam-transition---slide-y-easing: cubic-bezier(0, 0, 0.2, 1);
+  --origam-transition---slide-y-duration: var(--origam-motion__duration---medium);
+  --origam-transition---slide-y-easing: var(--origam-motion__easing---decelerate);
   --origam-transition---slide-y-translate-distance: 100%;
-  --origam-transition__scale---duration: 200ms;
-  --origam-transition__scale---easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-transition__scale---duration: var(--origam-motion__duration---medium);
+  --origam-transition__scale---easing: var(--origam-motion__easing---standard);
   --origam-transition__scale---scale-from: 0.95;
-  --origam-transition__expand---duration: 280ms;
-  --origam-transition__expand---easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-transition__expand---duration: var(--origam-motion__duration---slow);
+  --origam-transition__expand---easing: var(--origam-motion__easing---standard);
   --origam-transition__expand---max-height-from: 0;
-  --origam-transition__dialog---duration: 200ms;
-  --origam-transition__dialog---easing: cubic-bezier(0, 0, 0.2, 1);
-  --origam-transition---dialog-bottom-duration: 280ms;
-  --origam-transition---dialog-bottom-easing: cubic-bezier(0, 0, 0.2, 1);
+  --origam-transition__dialog---duration: var(--origam-motion__duration---medium);
+  --origam-transition__dialog---easing: var(--origam-motion__easing---decelerate);
+  --origam-transition---dialog-bottom-duration: var(--origam-motion__duration---slow);
+  --origam-transition---dialog-bottom-easing: var(--origam-motion__easing---decelerate);
   --origam-transition---dialog-bottom-translate-distance: 100%;
   --origam-grids__container---max-width-sm: 576px;
   --origam-grids__container---max-width-md: 768px;
   --origam-grids__container---max-width-lg: 992px;
   --origam-grids__container---max-width-xl: 1280px;
   --origam-grids__container---max-width-xxl: 1440px;
-  --origam-grids__container---padding-inline: 16px;
+  --origam-grids__container---padding-inline: var(--origam-space---4);
   --origam-grids__container---margin-inline: auto;
-  --origam-grids__row---gap-none: 0px;
-  --origam-grids__row---gap-dense: 8px;
-  --origam-grids__row---gap-default: 16px;
-  --origam-grids__row---gap-comfortable: 24px;
+  --origam-grids__row---gap-none: var(--origam-space---0);
+  --origam-grids__row---gap-dense: var(--origam-space---2);
+  --origam-grids__row---gap-default: var(--origam-space---4);
+  --origam-grids__row---gap-comfortable: var(--origam-space---6);
   --origam-grids__row---margin-inline: 0;
-  --origam-grids__col---padding-inline-start: 8px;
-  --origam-grids__col---padding-inline-end: 8px;
-  --origam-grids__col---padding-block-start: 8px;
-  --origam-grids__col---padding-block-end: 8px;
+  --origam-grids__col---padding-inline-start: var(--origam-space---2);
+  --origam-grids__col---padding-inline-end: var(--origam-space---2);
+  --origam-grids__col---padding-block-start: var(--origam-space---2);
+  --origam-grids__col---padding-block-end: var(--origam-space---2);
   --origam-grids__spacer---flex-grow: 1;
-  --origam-grids__spacer---min-size: 0px;
-  --origam-grid---gap-xs: 4px;
-  --origam-grid---gap-sm: 8px;
-  --origam-grid---gap-md: 16px;
-  --origam-grid---gap-lg: 24px;
-  --origam-grid---gap-xl: 32px;
-  --origam-skeleton---background-color: #f5f5f5;
-  --origam-skeleton---border-radius: 4px;
-  --origam-skeleton---border-radius-circular: 9999px;
-  --origam-skeleton---animation-duration: 400ms;
+  --origam-grids__spacer---min-size: var(--origam-space---0);
+  --origam-grid---gap-xs: var(--origam-space---1);
+  --origam-grid---gap-sm: var(--origam-space---2);
+  --origam-grid---gap-md: var(--origam-space---4);
+  --origam-grid---gap-lg: var(--origam-space---6);
+  --origam-grid---gap-xl: var(--origam-space---8);
+  --origam-skeleton---background-color: var(--origam-color__surface---overlay);
+  --origam-skeleton---border-radius: var(--origam-radius---sm);
+  --origam-skeleton---border-radius-circular: var(--origam-radius---full);
+  --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
   --origam-skeleton---opacity-min: 0.4;
   --origam-skeleton---opacity-max: 0.8;
   --origam-skeleton---text-height: 1.2em;
-  --origam-skeleton---gap: 12px;
-  --origam-kbd---background-color: #f5f5f5;
-  --origam-kbd---color: #171717;
-  --origam-kbd---border-color: #d4d4d4;
-  --origam-kbd---border-width: 1px;
-  --origam-kbd---border-radius: 4px;
+  --origam-skeleton---gap: var(--origam-space---3);
+  --origam-kbd---background-color: var(--origam-color__surface---overlay);
+  --origam-kbd---color: var(--origam-color__text---primary);
+  --origam-kbd---border-color: var(--origam-color__border---subtle);
+  --origam-kbd---border-width: var(--origam-border__width---thin);
+  --origam-kbd---border-radius: var(--origam-radius---sm);
   --origam-kbd---padding-block: 0.125em;
   --origam-kbd---padding-inline: 0.4em;
-  --origam-kbd---font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  --origam-kbd---font-size: 0.875em;
-  --origam-kbd---font-weight: 500;
-  --origam-kbd---box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
-  --origam-kbd---gap: 4px;
-  --origam-kbd---font-size-xs: 0.625rem;
-  --origam-kbd---font-size-sm: 0.75rem;
-  --origam-kbd---font-size-md: 0.875rem;
-  --origam-kbd---font-size-lg: 1rem;
-  --origam-kbd---font-size-xl: 1.125rem;
-  --origam-kbd__filled---background-color: #ffffff;
-  --origam-kbd__filled---border-width: 1px;
+  --origam-kbd---font-family: var(--origam-font__family---mono);
+  --origam-kbd---font-weight: var(--origam-font__weight---medium);
+  --origam-kbd---box-shadow: var(--origam-shadow---xs);
+  --origam-kbd---gap: var(--origam-space---1);
+  --origam-kbd---font-size-xs: var(--origam-font__size---xs);
+  --origam-kbd---font-size-sm: var(--origam-font__size---sm);
+  --origam-kbd---font-size-md: var(--origam-font__size---md);
+  --origam-kbd---font-size-lg: var(--origam-font__size---lg);
+  --origam-kbd---font-size-xl: var(--origam-font__size---xl);
+  --origam-kbd__filled---background-color: var(--origam-color__surface---raised);
+  --origam-kbd__filled---border-width: var(--origam-border__width---thin);
   --origam-kbd--outlined---background-color: rgba(0, 0, 0, 0);
-  --origam-kbd--outlined---border-width: 1px;
-  --origam-kbd__tonal---background-color: #fafafa;
-  --origam-kbd__tonal---border-width: 0px;
-  --origam-kbd__separator---color: #525252;
-  --origam-stepper---background-color: #ffffff;
-  --origam-stepper---color: #171717;
-  --origam-stepper---gap: 16px;
-  --origam-stepper---padding-block: 8px;
-  --origam-stepper---padding-inline: 8px;
-  --origam-stepper---indicator-size: 32px;
-  --origam-stepper---indicator-border-width: 1px;
-  --origam-stepper---indicator-font-size: 0.75rem;
-  --origam-stepper---indicator-font-weight: 500;
-  --origam-stepper---indicator-bg: #f5f5f5;
-  --origam-stepper---indicator-color: #525252;
-  --origam-stepper---indicator-active-bg: #7c3aed;
-  --origam-stepper---indicator-active-color: #ffffff;
-  --origam-stepper---indicator-done-bg: #7c3aed;
-  --origam-stepper---indicator-done-color: #ffffff;
-  --origam-stepper---indicator-error-bg: #ef4444;
-  --origam-stepper---indicator-error-color: #ffffff;
-  --origam-stepper---title-font-size: 0.875rem;
-  --origam-stepper---title-font-weight: 500;
-  --origam-stepper---title-color: #171717;
-  --origam-stepper---subtitle-font-size: 0.75rem;
-  --origam-stepper---subtitle-color: #525252;
-  --origam-stepper---connector-color: #d4d4d4;
-  --origam-stepper---connector-color-done: #7c3aed;
-  --origam-stepper---connector-thickness: 1px;
-  --origam-timeline---background-color: #ffffff;
-  --origam-timeline---color: #171717;
-  --origam-timeline---gap: 16px;
-  --origam-timeline---padding-block: 8px;
-  --origam-timeline---padding-inline: 16px;
-  --origam-timeline---track-width: 24px;
-  --origam-timeline---dot-size: 12px;
-  --origam-timeline---dot-bg: #7c3aed;
-  --origam-timeline---dot-color: #ffffff;
-  --origam-timeline---dot-border-width: 1px;
-  --origam-timeline---dot-border-color: #ffffff;
-  --origam-timeline---connector-color: #d4d4d4;
-  --origam-timeline---connector-thickness: 1px;
-  --origam-timeline---title-font-size: 0.875rem;
-  --origam-timeline---title-font-weight: 600;
-  --origam-timeline---subtitle-font-size: 0.75rem;
-  --origam-timeline---subtitle-color: #525252;
-  --origam-treeview---background-color: #ffffff;
-  --origam-treeview---color: #171717;
-  --origam-treeview---padding-block: 4px;
-  --origam-treeview---padding-inline: 8px;
-  --origam-treeview---indent-size: 16px;
-  --origam-treeview---row-height: 32px;
-  --origam-treeview---row-gap: 8px;
-  --origam-treeview---row-padding-inline: 8px;
-  --origam-treeview---row-bg-hover: #f5f5f5;
-  --origam-treeview---row-bg-selected: #f5f3ff;
-  --origam-treeview---row-color-selected: #6d28d9;
-  --origam-treeview---row-color-disabled: #a3a3a3;
-  --origam-treeview---chevron-size: 16px;
-  --origam-treeview---chevron-color: #525252;
-  --origam-treeview---icon-size: 16px;
-  --origam-treeview---icon-color: #171717;
-  --origam-treeview---label-font-size: 0.75rem;
-  --origam-treeview---label-color: #171717;
-  --origam-treeview---size-font-size: 0.625rem;
-  --origam-treeview---size-color: #525252;
-  --origam-treeview---guide-color: #d4d4d4;
-  --origam-treeview---guide-thickness: 1px;
+  --origam-kbd--outlined---border-width: var(--origam-border__width---thin);
+  --origam-kbd__tonal---background-color: var(--origam-color__surface---sunken);
+  --origam-kbd__tonal---border-width: var(--origam-border__width---0);
+  --origam-kbd__separator---color: var(--origam-color__text---secondary);
+  --origam-stepper---background-color: var(--origam-color__surface---default);
+  --origam-stepper---color: var(--origam-color__text---primary);
+  --origam-stepper---gap: var(--origam-space---4);
+  --origam-stepper---padding-block: var(--origam-space---2);
+  --origam-stepper---padding-inline: var(--origam-space---2);
+  --origam-stepper---indicator-size: var(--origam-space---8);
+  --origam-stepper---indicator-border-width: var(--origam-border__width---thin);
+  --origam-stepper---indicator-font-size: var(--origam-font__size---sm);
+  --origam-stepper---indicator-font-weight: var(--origam-font__weight---medium);
+  --origam-stepper---indicator-bg: var(--origam-color__surface---overlay);
+  --origam-stepper---indicator-color: var(--origam-color__text---secondary);
+  --origam-stepper---indicator-active-bg: var(--origam-color__action--primary---bg);
+  --origam-stepper---indicator-active-color: var(--origam-color__action--primary---fg);
+  --origam-stepper---indicator-done-bg: var(--origam-color__action--primary---bg);
+  --origam-stepper---indicator-done-color: var(--origam-color__action--primary---fg);
+  --origam-stepper---indicator-error-bg: var(--origam-color__feedback--danger---bg);
+  --origam-stepper---indicator-error-color: var(--origam-color__feedback--danger---fg);
+  --origam-stepper---title-font-size: var(--origam-font__size---md);
+  --origam-stepper---title-font-weight: var(--origam-font__weight---medium);
+  --origam-stepper---title-color: var(--origam-color__text---primary);
+  --origam-stepper---subtitle-font-size: var(--origam-font__size---sm);
+  --origam-stepper---subtitle-color: var(--origam-color__text---secondary);
+  --origam-stepper---connector-color: var(--origam-color__border---subtle);
+  --origam-stepper---connector-color-done: var(--origam-color__action--primary---bg);
+  --origam-stepper---connector-thickness: var(--origam-border__width---thin);
+  --origam-timeline---background-color: var(--origam-color__surface---default);
+  --origam-timeline---color: var(--origam-color__text---primary);
+  --origam-timeline---gap: var(--origam-space---4);
+  --origam-timeline---padding-block: var(--origam-space---2);
+  --origam-timeline---padding-inline: var(--origam-space---4);
+  --origam-timeline---track-width: var(--origam-space---6);
+  --origam-timeline---dot-size: var(--origam-space---3);
+  --origam-timeline---dot-bg: var(--origam-color__action--primary---bg);
+  --origam-timeline---dot-color: var(--origam-color__action--primary---fg);
+  --origam-timeline---dot-border-width: var(--origam-border__width---thin);
+  --origam-timeline---dot-border-color: var(--origam-color__surface---default);
+  --origam-timeline---connector-color: var(--origam-color__border---subtle);
+  --origam-timeline---connector-thickness: var(--origam-border__width---thin);
+  --origam-timeline---title-font-size: var(--origam-font__size---md);
+  --origam-timeline---title-font-weight: var(--origam-font__weight---semibold);
+  --origam-timeline---subtitle-font-size: var(--origam-font__size---sm);
+  --origam-timeline---subtitle-color: var(--origam-color__text---secondary);
+  --origam-treeview---background-color: var(--origam-color__surface---default);
+  --origam-treeview---color: var(--origam-color__text---primary);
+  --origam-treeview---padding-block: var(--origam-space---1);
+  --origam-treeview---padding-inline: var(--origam-space---2);
+  --origam-treeview---indent-size: var(--origam-space---4);
+  --origam-treeview---row-height: var(--origam-space---8);
+  --origam-treeview---row-gap: var(--origam-space---2);
+  --origam-treeview---row-padding-inline: var(--origam-space---2);
+  --origam-treeview---row-bg-hover: var(--origam-color__surface---overlay);
+  --origam-treeview---row-bg-selected: var(--origam-color__action--primary---bgSubtle);
+  --origam-treeview---row-color-selected: var(--origam-color__action--primary---fgSubtle);
+  --origam-treeview---row-color-disabled: var(--origam-color__text---disabled);
+  --origam-treeview---chevron-size: var(--origam-space---4);
+  --origam-treeview---chevron-color: var(--origam-color__text---secondary);
+  --origam-treeview---icon-size: var(--origam-space---4);
+  --origam-treeview---icon-color: var(--origam-color__text---primary);
+  --origam-treeview---label-font-size: var(--origam-font__size---sm);
+  --origam-treeview---label-color: var(--origam-color__text---primary);
+  --origam-treeview---size-font-size: var(--origam-font__size---xs);
+  --origam-treeview---size-color: var(--origam-color__text---secondary);
+  --origam-treeview---guide-color: var(--origam-color__border---subtle);
+  --origam-treeview---guide-thickness: var(--origam-border__width---thin);
   --origam-tabs---background-color: rgba(0, 0, 0, 0);
-  --origam-tabs---border-color: #d4d4d4;
+  --origam-tabs---border-color: var(--origam-color__border---subtle);
   --origam-tabs---border-style: solid;
-  --origam-tabs---border-width: 0px;
-  --origam-tabs---border-radius: 0px;
-  --origam-tabs---color: #171717;
-  --origam-tabs---padding-block: 0px;
-  --origam-tabs---padding-inline: 0px;
-  --origam-tabs---gap: 0px;
-  --origam-tabs---height: 48px;
-  --origam-tabs__item---color: #525252;
+  --origam-tabs---border-width: var(--origam-border__width---0);
+  --origam-tabs---border-radius: var(--origam-radius---none);
+  --origam-tabs---color: var(--origam-color__text---primary);
+  --origam-tabs---padding-block: var(--origam-space---0);
+  --origam-tabs---padding-inline: var(--origam-space---0);
+  --origam-tabs---gap: var(--origam-space---0);
+  --origam-tabs---height: var(--origam-space---12);
+  --origam-tabs__item---color: var(--origam-color__text---secondary);
   --origam-tabs__item---background-color: rgba(0, 0, 0, 0);
-  --origam-tabs__item---padding-inline: 16px;
-  --origam-tabs__item---padding-block: 0px;
-  --origam-tabs__item---gap: 8px;
-  --origam-tabs__item---height: 48px;
-  --origam-tabs__item---font-size: 0.75rem;
-  --origam-tabs__item---font-weight: 500;
-  --origam-tabs__item---letter-spacing: 0.0094em;
+  --origam-tabs__item---padding-inline: var(--origam-space---4);
+  --origam-tabs__item---padding-block: var(--origam-space---0);
+  --origam-tabs__item---gap: var(--origam-space---2);
+  --origam-tabs__item---height: var(--origam-space---12);
+  --origam-tabs__item---font-size: var(--origam-font__size---sm);
+  --origam-tabs__item---font-weight: var(--origam-font__weight---medium);
+  --origam-tabs__item---letter-spacing: var(--origam-font__letterSpacing---wide);
   --origam-tabs__item---text-transform: none;
-  --origam-tabs__item---border-radius: 0px;
-  --origam-tabs__item---border-width: 0px;
-  --origam-tabs__item---transition-duration: 100ms;
-  --origam-tabs__item---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --origam-tabs__indicator---color: #7c3aed;
-  --origam-tabs__indicator---height: 2px;
-  --origam-tabs__panel---padding-block: 16px;
-  --origam-tabs__panel---padding-inline: 0px;
-  --origam-tabs__panel---transition-duration: 100ms;
-  --origam-snackbar-group---z-index: 1060;
-  --origam-snackbar-group---gap: 12px;
+  --origam-tabs__item---border-radius: var(--origam-radius---none);
+  --origam-tabs__item---border-width: var(--origam-border__width---0);
+  --origam-tabs__item---transition-duration: var(--origam-motion__duration---fast);
+  --origam-tabs__item---transition-easing: var(--origam-motion__easing---standard);
+  --origam-tabs__indicator---color: var(--origam-color__action--primary---bg);
+  --origam-tabs__indicator---height: var(--origam-border__width---2);
+  --origam-tabs__panel---padding-block: var(--origam-space---4);
+  --origam-tabs__panel---padding-inline: var(--origam-space---0);
+  --origam-tabs__panel---transition-duration: var(--origam-motion__duration---fast);
+  --origam-snackbar-group---z-index: var(--origam-zIndex---toast);
+  --origam-snackbar-group---gap: var(--origam-space---3);
   --origam-snackbar-group---max-width: 420px;
-  --origam-snackbar-group---transition-duration: 100ms;
-  --origam-snackbar-group---position-top: 16px;
-  --origam-snackbar-group---position-bottom: 16px;
-  --origam-snackbar-group---position-left: 16px;
-  --origam-snackbar-group---position-right: 16px;
-  --origam-snackbar-group__item---gap: 12px;
+  --origam-snackbar-group---transition-duration: var(--origam-motion__duration---fast);
+  --origam-snackbar-group---position-top: var(--origam-space---4);
+  --origam-snackbar-group---position-bottom: var(--origam-space---4);
+  --origam-snackbar-group---position-left: var(--origam-space---4);
+  --origam-snackbar-group---position-right: var(--origam-space---4);
+  --origam-snackbar-group__item---gap: var(--origam-space---3);
   --origam-snackbar-group__item---min-width: 288px;
   --origam-snackbar-group__item---max-width: 420px;
   --origam-snackbar-group__item---padding: 12px 14px;
-  --origam-snackbar-group__item---border-radius: 8px;
-  --origam-snackbar-group__item---border-width: 1px;
-  --origam-snackbar-group__item---background-color: #ffffff;
-  --origam-snackbar-group__item---border-color: #d4d4d4;
-  --origam-snackbar-group__item---color: #171717;
-  --origam-snackbar-group__item---box-shadow: 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
-  --origam-snackbar-group__item---font-size: 0.875rem;
-  --origam-snackbar-group__item---content-gap: 8px;
+  --origam-snackbar-group__item---border-radius: var(--origam-radius---md);
+  --origam-snackbar-group__item---border-width: var(--origam-border__width---thin);
+  --origam-snackbar-group__item---background-color: var(--origam-color__surface---default);
+  --origam-snackbar-group__item---border-color: var(--origam-color__border---subtle);
+  --origam-snackbar-group__item---color: var(--origam-color__text---primary);
+  --origam-snackbar-group__item---box-shadow: var(--origam-shadow---md);
+  --origam-snackbar-group__item---font-size: var(--origam-font__size---md);
+  --origam-snackbar-group__item---content-gap: var(--origam-space---2);
   --origam-snackbar-group__item---prepend-color: currentColor;
-  --origam-snackbar-group__item---text-gap: 4px;
-  --origam-snackbar-group__item---title-font-weight: 600;
-  --origam-snackbar-group__item---message-font-weight: 400;
+  --origam-snackbar-group__item---text-gap: var(--origam-space---1);
+  --origam-snackbar-group__item---title-font-weight: var(--origam-font__weight---semibold);
+  --origam-snackbar-group__item---message-font-weight: var(--origam-font__weight---regular);
   --origam-snackbar-group__item---message-color: currentColor;
   --origam-snackbar-group__item---message-opacity: 0.85;
-  --origam-snackbar-group__item---action-color: #ffffff;
-  --origam-command-palette---z-index: 1050;
+  --origam-snackbar-group__item---action-color: var(--origam-color__action--primary---fg);
+  --origam-command-palette---z-index: var(--origam-zIndex---modal);
   --origam-command-palette---padding-top: 18vh;
   --origam-command-palette---width: 640px;
   --origam-command-palette---max-height: 480px;
-  --origam-command-palette---background-color: #ffffff;
-  --origam-command-palette---color: #171717;
-  --origam-command-palette---border-color: #d4d4d4;
-  --origam-command-palette---border-width: 1px;
-  --origam-command-palette---border-radius: 12px;
-  --origam-command-palette---box-shadow: 0px 11px 8px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);
+  --origam-command-palette---background-color: var(--origam-color__surface---raised);
+  --origam-command-palette---color: var(--origam-color__text---primary);
+  --origam-command-palette---border-color: var(--origam-color__border---subtle);
+  --origam-command-palette---border-width: var(--origam-border__width---thin);
+  --origam-command-palette---border-radius: var(--origam-radius---lg);
+  --origam-command-palette---box-shadow: var(--origam-shadow---xl);
   --origam-command-palette__input---padding: 12px 16px;
-  --origam-command-palette__input---font-size: 0.875rem;
-  --origam-command-palette__input---border-color: #d4d4d4;
-  --origam-command-palette__input---icon-color: #525252;
-  --origam-command-palette__input---placeholder-color: #a3a3a3;
-  --origam-command-palette__list---padding: 8px;
+  --origam-command-palette__input---font-size: var(--origam-font__size---md);
+  --origam-command-palette__input---border-color: var(--origam-color__border---subtle);
+  --origam-command-palette__input---icon-color: var(--origam-color__text---secondary);
+  --origam-command-palette__input---placeholder-color: var(--origam-color__text---disabled);
+  --origam-command-palette__list---padding: var(--origam-space---2);
   --origam-command-palette__item---height: 40px;
   --origam-command-palette__item---padding: 8px 12px;
-  --origam-command-palette__item---border-radius: 8px;
+  --origam-command-palette__item---border-radius: var(--origam-radius---md);
   --origam-command-palette__item---background-color: rgba(0, 0, 0, 0);
-  --origam-command-palette__item---background-color-active: #e6e6e6;
-  --origam-command-palette__item---color: #171717;
-  --origam-command-palette__item---color-active: #171717;
-  --origam-command-palette__item---icon-color: #525252;
-  --origam-command-palette__item---description-color: #525252;
-  --origam-command-palette---item-kbd-gap: 4px;
+  --origam-command-palette__item---background-color-active: var(--origam-color__action--secondary---bg);
+  --origam-command-palette__item---color: var(--origam-color__text---primary);
+  --origam-command-palette__item---color-active: var(--origam-color__text---primary);
+  --origam-command-palette__item---icon-color: var(--origam-color__text---secondary);
+  --origam-command-palette__item---description-color: var(--origam-color__text---secondary);
+  --origam-command-palette---item-kbd-gap: var(--origam-space---1);
   --origam-command-palette---group-title-padding: 10px 12px 6px;
-  --origam-command-palette---group-title-color: #525252;
-  --origam-command-palette---group-title-font-size: 0.625rem;
-  --origam-command-palette__empty---color: #525252;
+  --origam-command-palette---group-title-color: var(--origam-color__text---secondary);
+  --origam-command-palette---group-title-font-size: var(--origam-font__size---xs);
+  --origam-command-palette__empty---color: var(--origam-color__text---secondary);
   --origam-command-palette__footer---padding: 8px 12px;
-  --origam-command-palette__footer---border-color: #d4d4d4;
-  --origam-command-palette__footer---color: #525252;
+  --origam-command-palette__footer---border-color: var(--origam-color__border---subtle);
+  --origam-command-palette__footer---color: var(--origam-color__text---secondary);
   --origam-command-palette__backdrop---background-color: rgba(0, 0, 0, 0.45);
   --origam-command-palette__backdrop---backdrop-filter: blur(6px);
-  --origam-blockquote---padding-block: 16px;
-  --origam-blockquote---padding-inline: 24px;
-  --origam-blockquote---font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
-  --origam-blockquote---font-size: 1rem;
+  --origam-blockquote---padding-block: var(--origam-space---4);
+  --origam-blockquote---padding-inline: var(--origam-space---6);
+  --origam-blockquote---font-family: var(--origam-font__family---sans);
+  --origam-blockquote---font-size: var(--origam-font__size---lg);
   --origam-blockquote---font-style: normal;
-  --origam-blockquote---font-weight: 400;
-  --origam-blockquote---line-height: 1.625;
-  --origam-blockquote---color: #171717;
-  --origam-blockquote__accent---color: #7c3aed;
+  --origam-blockquote---font-weight: var(--origam-font__weight---regular);
+  --origam-blockquote---line-height: var(--origam-font__lineHeight---relaxed);
+  --origam-blockquote---color: var(--origam-color__text---primary);
+  --origam-blockquote__accent---color: var(--origam-color__action--primary---bg);
   --origam-blockquote__accent---width: 4px;
-  --origam-blockquote__author---color: #525252;
-  --origam-blockquote__author---font-size: 0.875rem;
+  --origam-blockquote__author---color: var(--origam-color__text---secondary);
+  --origam-blockquote__author---font-size: var(--origam-font__size---md);
   --origam-blockquote__author---font-style: normal;
-  --origam-blockquote__author---font-weight: 500;
-  --origam-blockquote__author---margin-top: 12px;
-  --origam-blockquote__source---color: #525252;
-  --origam-blockquote__source---font-size: 0.875rem;
+  --origam-blockquote__author---font-weight: var(--origam-font__weight---medium);
+  --origam-blockquote__author---margin-top: var(--origam-space---3);
+  --origam-blockquote__source---color: var(--origam-color__text---secondary);
+  --origam-blockquote__source---font-size: var(--origam-font__size---md);
   --origam-blockquote__source---font-style: italic;
-  --origam-blockquote---quote-mark-font-size: 2.25rem;
-  --origam-blockquote---quote-mark-color: #7c3aed;
+  --origam-blockquote---quote-mark-font-size: var(--origam-font__size---5xl);
+  --origam-blockquote---quote-mark-color: var(--origam-color__action--primary---bg);
   --origam-blockquote---quote-mark-opacity: 0.25;
-  --origam-blockquote---quote-mark-line-height: 1;
+  --origam-blockquote---quote-mark-line-height: var(--origam-font__lineHeight---none);
   --origam-blockquote__quoted---glyph-size: 8rem;
   --origam-blockquote__quoted---glyph-opacity: 0.08;
   --origam-blockquote__quoted---glyph-offset-top: -0.1em;
   --origam-blockquote__quoted---glyph-offset-left: -0.05em;
   --origam-blockquote__quoted---glyph-padding-extra: 1rem;
-  --origam-blockquote__elegant---font-family: Georgia, 'Times New Roman', serif;
-  --origam-blockquote__elegant---font-size: 1.125rem;
+  --origam-blockquote__elegant---font-family: var(--origam-font__family---serif);
+  --origam-blockquote__elegant---font-size: var(--origam-font__size---xl);
   --origam-blockquote__elegant---font-style: italic;
-  --origam-blockquote__elegant---line-height: 2;
-  --origam-blockquote__elegant---padding-block: 24px;
-  --origam-blockquote__minimal---font-size: 0.875rem;
+  --origam-blockquote__elegant---line-height: var(--origam-font__lineHeight---loose);
+  --origam-blockquote__elegant---padding-block: var(--origam-space---6);
+  --origam-blockquote__minimal---font-size: var(--origam-font__size---md);
   --origam-blockquote__minimal---font-style: italic;
-  --origam-blockquote__minimal---padding-inline: 12px;
-  --origam-blockquote__pull---font-family: Georgia, 'Times New Roman', serif;
-  --origam-blockquote__pull---font-size: 1.5rem;
-  --origam-blockquote__pull---font-weight: 500;
-  --origam-blockquote__pull---line-height: 1.375;
-  --origam-blockquote__pull---padding-block: 24px;
+  --origam-blockquote__minimal---padding-inline: var(--origam-space---3);
+  --origam-blockquote__pull---font-family: var(--origam-font__family---serif);
+  --origam-blockquote__pull---font-size: var(--origam-font__size---3xl);
+  --origam-blockquote__pull---font-weight: var(--origam-font__weight---medium);
+  --origam-blockquote__pull---line-height: var(--origam-font__lineHeight---snug);
+  --origam-blockquote__pull---padding-block: var(--origam-space---6);
   --origam-blockquote__pull---rule-width: 2px;
-  --origam-video---background-color: #000000;
-  --origam-video---border-radius: 8px;
-  --origam-video__poster---background-color: #000000;
-  --origam-video---poster-btn-size: 64px;
-  --origam-video---poster-btn-background-color: #0a0a0a;
-  --origam-video---poster-btn-background-color-hover: #171717;
-  --origam-video---poster-btn-color: #ffffff;
-  --origam-video---poster-btn-font-size: 1.5rem;
-  --origam-video__controls---background-color: #0a0a0a;
-  --origam-video__controls---color: #ffffff;
-  --origam-video__controls---padding: 8px;
-  --origam-video__controls---gap: 8px;
-  --origam-video__btn---size: 32px;
-  --origam-video__btn---color: #ffffff;
-  --origam-video__btn---color-hover: #ffffff;
-  --origam-video__btn---background-color-hover: #262626;
-  --origam-video__btn---background-color-active: #404040;
-  --origam-video__btn---border-radius: 4px;
-  --origam-video__btn---font-size: 1rem;
-  --origam-video__time---color: #ffffff;
-  --origam-video__time---font-size: 0.625rem;
-  --origam-video__time---font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  --origam-video__scrubber---color: #8b5cf6;
-  --origam-video__scrubber---thumb-size: 16px;
-  --origam-video__volume---color: #ffffff;
-  --origam-video__volume---width: 80px;
-  --origam-video__loading---color: #ffffff;
-  --origam-video__loading---font-size: 1.5rem;
-  --origam-video--error---background-color: #0a0a0a;
-  --origam-video--error---color: #cf6679;
-  --origam-video--error---font-size: 0.75rem;
-  --origam-video--error---gap: 8px;
-  --origam-video--error---padding: 16px;
-  --origam-video--error---icon-font-size: 1.5rem;
-  --origam-audio---background-color: #ffffff;
-  --origam-audio---color: #171717;
-  --origam-audio---accent-color: #7c3aed;
-  --origam-audio---secondary-color: #525252;
-  --origam-audio---border-color: #d4d4d4;
+  --origam-video---background-color: var(--origam-color---black);
+  --origam-video---border-radius: var(--origam-radius---md);
+  --origam-video__poster---background-color: var(--origam-color---black);
+  --origam-video---poster-btn-size: var(--origam-space---16);
+  --origam-video---poster-btn-background-color: var(--origam-color__neutral---950);
+  --origam-video---poster-btn-background-color-hover: var(--origam-color__neutral---900);
+  --origam-video---poster-btn-color: var(--origam-color__neutral---0);
+  --origam-video---poster-btn-font-size: var(--origam-font__size---3xl);
+  --origam-video__controls---background-color: var(--origam-color__neutral---950);
+  --origam-video__controls---color: var(--origam-color__neutral---0);
+  --origam-video__controls---padding: var(--origam-space---2);
+  --origam-video__controls---gap: var(--origam-space---2);
+  --origam-video__btn---size: var(--origam-space---8);
+  --origam-video__btn---color: var(--origam-color__neutral---0);
+  --origam-video__btn---color-hover: var(--origam-color__neutral---0);
+  --origam-video__btn---background-color-hover: var(--origam-color__neutral---800);
+  --origam-video__btn---background-color-active: var(--origam-color__neutral---700);
+  --origam-video__btn---border-radius: var(--origam-radius---sm);
+  --origam-video__btn---font-size: var(--origam-font__size---lg);
+  --origam-video__time---color: var(--origam-color__neutral---0);
+  --origam-video__time---font-size: var(--origam-font__size---xs);
+  --origam-video__time---font-family: var(--origam-font__family---mono);
+  --origam-video__scrubber---color: var(--origam-color__primary---500);
+  --origam-video__scrubber---thumb-size: var(--origam-space---4);
+  --origam-video__volume---color: var(--origam-color__neutral---0);
+  --origam-video__volume---width: var(--origam-space---20);
+  --origam-video__loading---color: var(--origam-color__neutral---0);
+  --origam-video__loading---font-size: var(--origam-font__size---3xl);
+  --origam-video--error---background-color: var(--origam-color__neutral---950);
+  --origam-video--error---color: var(--origam-color__red---400);
+  --origam-video--error---font-size: var(--origam-font__size---sm);
+  --origam-video--error---gap: var(--origam-space---2);
+  --origam-video--error---padding: var(--origam-space---4);
+  --origam-video--error---icon-font-size: var(--origam-font__size---3xl);
+  --origam-audio---background-color: var(--origam-color__surface---raised);
+  --origam-audio---color: var(--origam-color__text---primary);
+  --origam-audio---accent-color: var(--origam-color__action--primary---bg);
+  --origam-audio---secondary-color: var(--origam-color__text---secondary);
+  --origam-audio---border-color: var(--origam-color__border---subtle);
   --origam-audio---border-width: 1px;
   --origam-audio---box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.06), 0px 1px 2px -1px rgba(0,0,0,0.06);
-  --origam-audio---border-radius: 12px;
-  --origam-audio---gap: 16px;
-  --origam-audio---padding: 16px;
-  --origam-audio__body---gap: 12px;
-  --origam-audio__metadata---gap: 4px;
-  --origam-audio__meta---gap: 8px;
+  --origam-audio---border-radius: var(--origam-radius---lg);
+  --origam-audio---gap: var(--origam-space---4);
+  --origam-audio---padding: var(--origam-space---4);
+  --origam-audio__body---gap: var(--origam-space---3);
+  --origam-audio__metadata---gap: var(--origam-space---1);
+  --origam-audio__meta---gap: var(--origam-space---2);
   --origam-audio__meta---font-size: 13px;
-  --origam-audio__meta---color: #525252;
+  --origam-audio__meta---color: var(--origam-color__text---secondary);
   --origam-audio__cover---size: 96px;
-  --origam-audio__cover---border-radius: 8px;
-  --origam-audio__title---color: #171717;
+  --origam-audio__cover---border-radius: var(--origam-radius---md);
+  --origam-audio__title---color: var(--origam-color__text---primary);
   --origam-audio__title---font-size: 18px;
   --origam-audio__title---font-weight: 700;
   --origam-audio__title---line-height: 1.25;
-  --origam-audio__artist---color: #525252;
-  --origam-audio__album---color: #525252;
-  --origam-audio__duration---color: #525252;
+  --origam-audio__artist---color: var(--origam-color__text---secondary);
+  --origam-audio__album---color: var(--origam-color__text---secondary);
+  --origam-audio__duration---color: var(--origam-color__text---secondary);
   --origam-audio__waveform---height: 48px;
-  --origam-audio__waveform---color: #7c3aed;
-  --origam-audio__transport---gap: 8px;
+  --origam-audio__waveform---color: var(--origam-color__action--primary---bg);
+  --origam-audio__transport---gap: var(--origam-space---2);
   --origam-audio__transport---btn-size: 32px;
   --origam-audio__transport---btn-icon-size: 20px;
   --origam-audio---play-btn-size: 48px;
   --origam-audio__compact---cover-size: 48px;
-  --origam-audio__compact---body-gap: 8px;
-  --origam-audio__compact---metadata-gap: 8px;
+  --origam-audio__compact---body-gap: var(--origam-space---2);
+  --origam-audio__compact---metadata-gap: var(--origam-space---2);
   --origam-audio__compact---title-font-size: 14px;
-  --origam-audio__loading---font-size: 0.75rem;
-  --origam-audio__loading---color: #525252;
-  --origam-audio--error---background-color: #fff1f2;
-  --origam-audio--error---color: #b91c1c;
-  --origam-audio--error---font-size: 0.75rem;
-  --origam-audio--error---border-radius: 4px;
-  --origam-audio--error---padding: 8px 12px;
-  --origam-audio--error---gap: 8px;
-  --origam-audio--error---icon-font-size: 1rem;
-  --origam-media-scrubber---color: #7c3aed;
-  --origam-media-scrubber---primary: #7c3aed;
+  --origam-audio__loading---font-size: var(--origam-font__size---sm);
+  --origam-audio__loading---color: var(--origam-color__text---secondary);
+  --origam-audio--error---background-color: var(--origam-color__feedback--danger---bgSubtle);
+  --origam-audio--error---color: var(--origam-color__feedback--danger---fgSubtle);
+  --origam-audio--error---font-size: var(--origam-font__size---sm);
+  --origam-audio--error---border-radius: var(--origam-radius---sm);
+  --origam-audio--error---padding: var(--origam-space---2) var(--origam-space---3);
+  --origam-audio--error---gap: var(--origam-space---2);
+  --origam-audio--error---icon-font-size: var(--origam-font__size---lg);
+  --origam-media-scrubber---color: var(--origam-color__action--primary---bg);
+  --origam-media-scrubber---primary: var(--origam-color__action--primary---bg);
   --origam-media-scrubber__track---thickness: 4px;
   --origam-media-scrubber__track---thickness-active: 6px;
   --origam-media-scrubber__track---size: 4px;
   --origam-media-scrubber__track---size-active: 6px;
-  --origam-media-scrubber__track---background-color: #f5f5f5;
-  --origam-media-scrubber__track---bg: #f5f5f5;
-  --origam-media-scrubber__buffer---background-color: #e6e6e6;
-  --origam-media-scrubber__buffer---bg: #e6e6e6;
+  --origam-media-scrubber__track---background-color: var(--origam-color__surface---overlay);
+  --origam-media-scrubber__track---bg: var(--origam-color__surface---overlay);
+  --origam-media-scrubber__buffer---background-color: var(--origam-color__surface---disabled);
+  --origam-media-scrubber__buffer---bg: var(--origam-color__surface---disabled);
   --origam-media-scrubber__thumb---diameter: 12px;
   --origam-media-scrubber__thumb---size: 12px;
-  --origam-media-scrubber__tooltip---background-color: #171717;
-  --origam-media-scrubber__tooltip---color: #ffffff;
-  --origam-media-controller---color: #171717;
-  --origam-media-controller__scrubber---color: #7c3aed;
+  --origam-media-scrubber__tooltip---background-color: var(--origam-color__neutral---900);
+  --origam-media-scrubber__tooltip---color: var(--origam-color__neutral---0);
+  --origam-media-controller---color: var(--origam-color__text---primary);
+  --origam-media-controller__scrubber---color: var(--origam-color__action--primary---bg);
 }