@24vlh/vds 0.1.10 → 0.2.0

package/dist/components/hero.min.css

@@ -1 +1 @@
-.vds-hero,[data-vds-hero]{--hero-skeleton-speed:1.2s;--hero-eyebrow-letter-spacing:var(--letter-loose);--hero-text-max-default:60ch;--hero-text-max-a:70ch;--hero-text-max-c:55ch;--hero-text-max-compact:50ch;--hero-media-aspect-ratio:16/9;--hero-media-max-width:32rem;--hero-metric-min-width:11rem;--hero-accent-line-thickness:3px;--hero-full-overlay:linear-gradient(180deg,rgba(0,0,0,.4),transparent)}.hero{background-color:var(--color-surface);color:var(--color-text);padding-bottom:var(--space-16);padding-top:var(--space-12);width:100%}.hero__inner{display:flex;flex-direction:column;gap:var(--space-8);margin-left:auto;margin-right:auto;max-width:var(--content-width-xl)}.hero__eyebrow{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--hero-eyebrow-letter-spacing);text-transform:uppercase}.hero__title{font-size:var(--text-4xl);font-weight:var(--font-weight-bold);line-height:1.15}.hero__desc,.hero__title{max-width:var(--hero-text-max-default)}.hero__desc{color:var(--color-text-muted);font-size:var(--text-md);line-height:var(--line-height-normal)}.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6)}.hero__text-pill{background:var(--color-surface-translucent-strong);border-radius:var(--radius-sm);color:var(--color-text-on-strong);display:inline-block}.hero--a .hero{padding-bottom:var(--space-24);padding-top:var(--space-20)}.hero--a .hero__title{font-size:var(--text-5xl);max-width:var(--hero-text-max-a)}.hero--a .hero__desc{font-size:var(--text-lg)}.hero--b .hero{padding-bottom:var(--space-20);padding-top:var(--space-16)}.hero--b .hero__title{font-size:var(--text-4xl)}.hero--b .hero__desc{font-size:var(--text-md)}.hero--c .hero{padding-bottom:var(--space-16);padding-top:var(--space-12)}.hero--c .hero__title{font-size:var(--text-3xl);max-width:var(--hero-text-max-c)}.hero--c .hero__desc{font-size:var(--text-sm)}.hero--compact .hero{padding-bottom:var(--space-12);padding-top:var(--space-10)}.hero--compact .hero__title{font-size:var(--text-2xl);max-width:var(--hero-text-max-compact)}.hero--compact .hero__desc{font-size:var(--text-sm)}.hero--minimal .hero{padding-bottom:var(--space-10);padding-top:var(--space-8)}.hero--minimal .hero__title{font-size:var(--text-xl)}.hero--minimal .hero__desc{display:none}.hero--split .hero__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 1fr}.hero--with-media .hero__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr var(--hero-media-max-width)}.hero__media{align-items:center}.hero__media,.hero__media-inner{display:flex;justify-content:center}.hero__media-inner{align-items:stretch;background-color:var(--color-surface-subtle);border-radius:var(--radius-lg);max-width:100%;overflow:hidden;width:100%}.hero__media-inner>*{height:100%;width:100%}.hero__media img,.hero__media picture{aspect-ratio:var(--hero-media-aspect-ratio);border-radius:var(--radius-lg);-o-object-fit:cover;object-fit:cover;width:100%}.hero--full{background-color:var(--color-bg-elevated);color:var(--color-text-on-strong);padding-bottom:var(--space-32);padding-top:var(--space-24);position:relative}.hero--full:before{background:var(--hero-full-overlay,var(--color-surface-translucent-strong));bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:0}.hero--full .hero__inner{position:relative;z-index:1}.hero--full,.hero--full .hero__actions,.hero--full .hero__actions *,.hero--full .hero__body,.hero--full .hero__desc,.hero--full .hero__eyebrow,.hero--full .hero__metrics *,.hero--full .hero__points *,.hero--full .hero__subtitle{color:var(--color-text-on-strong)}.hero--full .hero__desc,.hero--full .hero__eyebrow,.hero--full .hero__subtitle,.hero--full .hero__title{text-shadow:0 1px 2px rgba(0,0,0,.45)}.hero--inset{background:var(--color-bg);padding:var(--space-8)}.hero--inset .hero{background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding-bottom:var(--space-16);padding-top:var(--space-12)}.hero__accent-line{background-color:var(--hero-accent-line,var(--color-accent));border-radius:var(--radius-pill);height:var(--space-20);width:var(--hero-accent-line-thickness)}.hero__metrics{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(var(--hero-metric-min-width),1fr));margin-top:var(--space-8)}.hero__metric{background-color:var(--hero-metric-bg);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}.hero__metric-value{font-size:var(--text-xl);font-weight:var(--font-weight-bold)}.hero__metric-label{color:var(--color-text-muted);font-size:var(--text-sm)}.hero__metric-trend{font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.hero__metric-trend--up{color:var(--hero-trend-up,var(--color-success-strong))}.hero__metric-trend--down{color:var(--hero-trend-down,var(--color-danger-strong))}.hero__metric-trend--neutral{color:var(--hero-trend-neutral,var(--color-text-muted))}.hero__metric--muted{background-color:var(--color-muted-bg);border-left:var(--border-width) solid var(--color-border-subtle)}.hero__metric--error{background-color:var(--hero-error-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--hero-error-border,var(--color-danger-strong))}.hero__points{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6)}.hero__point{align-items:flex-start;color:var(--color-text-muted);display:flex;font-size:var(--text-sm);gap:var(--space-2);max-width:var(--hero-text-max-default)}.hero__point-icon{color:var(--color-accent);flex-shrink:0;height:var(--icon-sm);margin-top:.125rem;width:var(--icon-sm)}.hero--loading .hero__body{visibility:hidden}.hero--loading .hero__skeleton{display:block}.hero__skeleton{border-radius:var(--radius-md);display:none;height:var(--space-40)}.hero__skeleton,.hero__skeleton-line{animation:hero-skeleton-shimmer var(--hero-skeleton-speed) linear infinite;background:linear-gradient(90deg,var(--color-surface-subtle) 0,var(--color-surface-soft) 50%,var(--color-surface-subtle) 100%);background-size:200% 100%;width:100%}.hero__skeleton-line{border-radius:var(--radius-sm);height:var(--space-3);margin-bottom:var(--space-1);margin-top:var(--space-1)}@keyframes hero-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.hero--error .hero__body{opacity:.4}.hero--error .hero__error{align-items:center;background-color:var(--hero-error-banner-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--hero-error-banner-border,var(--color-danger));border-radius:var(--radius-md);display:flex;gap:var(--space-2);padding:var(--space-4)}.hero__error-title{color:var(--hero-error-title,var(--color-danger-strong));font-size:var(--text-sm);font-weight:var(--font-weight-semibold);margin:0}.hero__error-actions{display:inline-flex;flex-wrap:wrap;gap:var(--space-2);margin-left:auto}@media (max-width:1024px){.hero--split .hero__inner,.hero--with-media .hero__inner{grid-template-columns:1fr}}@media (max-width:768px){.hero{padding-bottom:var(--space-14);padding-top:var(--space-10)}.hero__title{font-size:var(--text-3xl)}}@media (max-width:640px){.hero__title{font-size:var(--text-2xl)}.hero__metrics{grid-template-columns:repeat(auto-fit,minmax(calc(var(--hero-metric-min-width)*.8),1fr))}}
+.vds-hero,[data-vds-hero]{--hero-skeleton-speed:1.2s;--hero-eyebrow-letter-spacing:var(--letter-loose);--hero-eyebrow-color:var(--color-text-muted);--hero-text-max-default:60ch;--hero-text-max-a:70ch;--hero-text-max-c:55ch;--hero-text-max-compact:50ch;--hero-media-aspect-ratio:16/9;--hero-media-max-width:32rem;--hero-media-radius:var(--radius-lg);--hero-metric-min-width:11rem;--hero-metric-bg:var(--color-surface-subtle);--hero-metric-border:transparent;--hero-accent-line-thickness:3px;--hero-body-gap:var(--space-4);--hero-actions-gap:var(--space-4);--hero-actions-margin-top:var(--space-6);--hero-meta-gap:var(--space-3);--hero-meta-color:var(--color-text-muted);--hero-badge-bg:var(--color-surface-subtle);--hero-badge-border:var(--color-border-subtle);--hero-badge-text:var(--color-text);--hero-point-icon:var(--color-accent);--hero-border-color:var(--color-border-subtle);--hero-soft-bg:var(--color-surface-subtle);--hero-full-overlay:linear-gradient(180deg,rgba(0,0,0,.4),transparent)}.hero{background-color:var(--color-surface);color:var(--color-text);padding:var(--space-12) var(--hero-padding-inline,var(--space-6)) var(--space-16);width:100%}.hero__inner{display:flex;flex-direction:column;gap:var(--space-8);margin-left:auto;margin-right:auto;max-width:var(--content-width-xl)}.hero__eyebrow{color:var(--hero-eyebrow-color);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--hero-eyebrow-letter-spacing);text-transform:uppercase}.hero__title{font-size:var(--text-4xl);font-weight:var(--font-weight-bold);line-height:1.15;max-width:var(--hero-text-max-default)}.hero__body{display:flex;flex-direction:column;gap:var(--hero-body-gap);min-width:0}.hero__desc,.hero__subtitle{color:var(--color-text-muted);font-size:var(--text-md);line-height:var(--line-height-normal);max-width:var(--hero-text-max-default)}.hero__actions{display:flex;flex-wrap:wrap;gap:var(--hero-actions-gap);margin-top:var(--hero-actions-margin-top)}.hero__actions--stack{align-items:flex-start;flex-direction:column}.hero__actions--center{justify-content:center;width:100%}.hero__text-pill{background:var(--color-surface-translucent-strong);border-radius:var(--radius-sm);color:var(--color-text-on-strong);display:inline-block}.hero__badge,.hero__text-pill{align-self:flex-start;font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.hero__badge{align-items:center;background:var(--hero-badge-bg);border:var(--border-width) solid var(--hero-badge-border);border-radius:999px;color:var(--hero-badge-text);display:inline-flex;gap:var(--space-2)}.hero__meta{color:var(--hero-meta-color);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--hero-meta-gap)}.hero--a .hero,.hero.hero--a{padding-bottom:var(--space-24);padding-top:var(--space-20)}.hero--a .hero__title,.hero.hero--a .hero__title{font-size:var(--text-5xl);max-width:var(--hero-text-max-a)}.hero--a .hero__desc,.hero--a .hero__subtitle,.hero.hero--a .hero__desc,.hero.hero--a .hero__subtitle{font-size:var(--text-lg)}.hero--b .hero,.hero.hero--b{padding-bottom:var(--space-20);padding-top:var(--space-16)}.hero--b .hero__title,.hero.hero--b .hero__title{font-size:var(--text-4xl)}.hero--b .hero__desc,.hero--b .hero__subtitle,.hero.hero--b .hero__desc,.hero.hero--b .hero__subtitle{font-size:var(--text-md)}.hero--c .hero,.hero.hero--c{padding-bottom:var(--space-16);padding-top:var(--space-12)}.hero--c .hero__title,.hero.hero--c .hero__title{font-size:var(--text-3xl);max-width:var(--hero-text-max-c)}.hero--c .hero__desc,.hero--c .hero__subtitle,.hero.hero--c .hero__desc,.hero.hero--c .hero__subtitle{font-size:var(--text-sm)}.hero--compact .hero,.hero.hero--compact{padding-bottom:var(--space-12);padding-top:var(--space-10)}.hero--compact .hero__title,.hero.hero--compact .hero__title{font-size:var(--text-2xl);max-width:var(--hero-text-max-compact)}.hero--compact .hero__desc,.hero--compact .hero__subtitle,.hero.hero--compact .hero__desc,.hero.hero--compact .hero__subtitle{font-size:var(--text-sm)}.hero--minimal .hero,.hero.hero--minimal{padding-bottom:var(--space-10);padding-top:var(--space-8)}.hero--minimal .hero__title,.hero.hero--minimal .hero__title{font-size:var(--text-xl)}.hero--minimal .hero__desc,.hero--minimal .hero__subtitle,.hero.hero--minimal .hero__desc,.hero.hero--minimal .hero__subtitle{display:none}.hero--split .hero__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero--with-media .hero__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr) minmax(0,var(--hero-media-max-width))}.hero--split.hero--split-reverse .hero__points,.hero--with-media.hero--media-left .hero__media{order:-1}.hero--center .hero__inner{align-items:center;text-align:center}.hero--center .hero__actions,.hero--center .hero__metrics,.hero--center .hero__points{justify-content:center}.hero--soft{background-color:var(--hero-soft-bg)}.hero--bordered{border-bottom:var(--border-width) solid var(--hero-border-color);border-top:var(--border-width) solid var(--hero-border-color)}.hero__media{align-items:center;min-width:0}.hero__media,.hero__media-inner{display:flex;justify-content:center}.hero__media-inner{align-items:stretch;background-color:var(--color-surface-subtle);border-radius:var(--hero-media-radius);max-width:100%;overflow:hidden;width:100%}.hero__media-inner>*{height:100%;width:100%}.hero__media img,.hero__media picture{aspect-ratio:var(--hero-media-aspect-ratio);border-radius:var(--hero-media-radius);-o-object-fit:cover;object-fit:cover;width:100%}.hero__media--bleed .hero__media-inner,.hero__media--bleed img,.hero__media--bleed picture{border-radius:0}.hero--full{background-color:var(--color-bg-elevated);color:var(--color-text-on-strong);padding-bottom:var(--space-32);padding-top:var(--space-24);position:relative}.hero--full:before{background:var(--hero-full-overlay,var(--color-surface-translucent-strong));bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:0}.hero--full .hero__inner{position:relative;z-index:1}.hero--full,.hero--full .hero__actions,.hero--full .hero__actions *,.hero--full .hero__body,.hero--full .hero__desc,.hero--full .hero__eyebrow,.hero--full .hero__metrics *,.hero--full .hero__points *,.hero--full .hero__subtitle{color:var(--color-text-on-strong)}.hero--full .hero__desc,.hero--full .hero__eyebrow,.hero--full .hero__subtitle,.hero--full .hero__title{text-shadow:0 1px 2px rgba(0,0,0,.45)}.hero--inset{background:var(--color-bg);padding:var(--space-8)}.hero--inset .hero{background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding-bottom:var(--space-16);padding-top:var(--space-12)}.hero__accent-line{background-color:var(--hero-accent-line,var(--color-accent));border-radius:var(--radius-pill);height:var(--space-20);width:var(--hero-accent-line-thickness)}.hero__metrics{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(var(--hero-metric-min-width),1fr));margin-top:var(--space-8)}.hero__metrics--compact{gap:var(--space-4)}.hero__metric{background-color:var(--hero-metric-bg);border:var(--border-width) solid var(--hero-metric-border);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}.hero__metric--outline{--hero-metric-border:var(--color-border-subtle)}.hero__metric-value{font-size:var(--text-xl);font-weight:var(--font-weight-bold)}.hero__metric-label{color:var(--color-text-muted);font-size:var(--text-sm)}.hero__metric-trend{font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.hero__metric-trend--up{color:var(--hero-trend-up,var(--color-success-strong))}.hero__metric-trend--down{color:var(--hero-trend-down,var(--color-danger-strong))}.hero__metric-trend--neutral{color:var(--hero-trend-neutral,var(--color-text-muted))}.hero__metric--muted{background-color:var(--color-muted-bg);border-left:var(--border-width) solid var(--color-border-subtle)}.hero__metric--error{background-color:var(--hero-error-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--hero-error-border,var(--color-danger-strong))}.hero__points{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6)}.hero__point{align-items:flex-start;color:var(--color-text-muted);display:flex;font-size:var(--text-sm);gap:var(--space-2);max-width:var(--hero-text-max-default)}.hero__point-icon{color:var(--hero-point-icon);flex-shrink:0;height:var(--icon-sm);margin-top:.125rem;width:var(--icon-sm)}.hero__row{align-items:flex-start;display:flex;gap:var(--space-4)}.hero--loading .hero__body{visibility:hidden}.hero--loading .hero__skeleton{display:block}.hero__skeleton{border-radius:var(--radius-md);display:none;height:var(--space-40)}.hero__skeleton,.hero__skeleton-line{animation:hero-skeleton-shimmer var(--hero-skeleton-speed) linear infinite;background:linear-gradient(90deg,var(--color-surface-subtle) 0,var(--color-surface-soft) 50%,var(--color-surface-subtle) 100%);background-size:200% 100%;width:100%}.hero__skeleton-line{border-radius:var(--radius-sm);height:var(--space-3);margin-bottom:var(--space-1);margin-top:var(--space-1)}@keyframes hero-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.hero--error .hero__body{opacity:.4}.hero--error .hero__error{align-items:center;background-color:var(--hero-error-banner-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--hero-error-banner-border,var(--color-danger));border-radius:var(--radius-md);display:flex;gap:var(--space-2);padding:var(--space-4)}.hero__error-title{color:var(--hero-error-title,var(--color-danger-strong));font-size:var(--text-sm);font-weight:var(--font-weight-semibold);margin:0}.hero__error-actions{display:inline-flex;flex-wrap:wrap;gap:var(--space-2);margin-left:auto}@media (max-width:1024px){.hero--split .hero__inner,.hero--with-media .hero__inner{grid-template-columns:1fr}}@media (max-width:768px){.hero{padding-bottom:var(--space-14);padding-top:var(--space-10)}.hero__title{font-size:var(--text-3xl)}}@media (max-width:640px){.hero__title{font-size:var(--text-2xl)}.hero__metrics{grid-template-columns:repeat(auto-fit,minmax(calc(var(--hero-metric-min-width)*.8),1fr))}}

package/dist/components/icons.css

@@ -271,8 +271,8 @@
 }
 
 .icon--x-circle {
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cline x1='5' y1='5' x2='11' y2='11'/%3E%3Cline x1='11' y1='5' x2='5' y2='11'/%3E%3C/svg%3E");
-    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cline x1='5' y1='5' x2='11' y2='11'/%3E%3Cline x1='11' y1='5' x2='5' y2='11'/%3E%3C/svg%3E");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='5.5' y1='5.5' x2='10.5' y2='10.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='10.5' y1='5.5' x2='5.5' y2='10.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='5.5' y1='5.5' x2='10.5' y2='10.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='10.5' y1='5.5' x2='5.5' y2='10.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 
 .icon--home {
@@ -414,13 +414,13 @@
 --------------------------------------------------------- */
 
 .icon--money {
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='8' rx='1.5' fill='white'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='white'/%3E%3C/svg%3E");
-    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='8' rx='1.5' fill='white'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='white'/%3E%3C/svg%3E");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='4' width='14' height='8' rx='1' fill='white'/%3E%3Ccircle cx='8' cy='8' r='2' fill='black'/%3E%3Cpath d='M8 6.5v3M7 7.5h2M7 8.5h2' stroke='white' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='4' width='14' height='8' rx='1' fill='white'/%3E%3Ccircle cx='8' cy='8' r='2' fill='black'/%3E%3Cpath d='M8 6.5v3M7 7.5h2M7 8.5h2' stroke='white' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
 }
 
 .icon--coins {
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='7' r='3.5' fill='white'/%3E%3Ccircle cx='7' cy='9' r='3.5' fill='white'/%3E%3C/svg%3E");
-    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='7' r='3.5' fill='white'/%3E%3Ccircle cx='7' cy='9' r='3.5' fill='white'/%3E%3C/svg%3E");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6 a5 2 0 0 1 10 0 a5 2 0 0 1 -10 0' fill='white'/%3E%3Cpath d='M3 6 v3 a5 2 0 0 0 10 0 v-3 a5 2 0 0 1 -10 0' fill='white'/%3E%3Cpath d='M3 9 v3 a5 2 0 0 0 10 0 v-3 a5 2 0 0 1 -10 0' fill='white'/%3E%3Cpath d='M3 6 a5 2 0 0 1 10 0 a5 2 0 0 1 -10 0' fill='none' stroke='black' stroke-width='0.5'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6 a5 2 0 0 1 10 0 a5 2 0 0 1 -10 0' fill='white'/%3E%3Cpath d='M3 6 v3 a5 2 0 0 0 10 0 v-3 a5 2 0 0 1 -10 0' fill='white'/%3E%3Cpath d='M3 9 v3 a5 2 0 0 0 10 0 v-3 a5 2 0 0 1 -10 0' fill='white'/%3E%3Cpath d='M3 6 a5 2 0 0 1 10 0 a5 2 0 0 1 -10 0' fill='none' stroke='black' stroke-width='0.5'/%3E%3C/svg%3E");
 }
 
 /* ---------------------------------------------------------
@@ -782,8 +782,8 @@
 }
 
 .icon--money-outline {
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='8' rx='1.5' fill='none' stroke='white' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
-    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='8' rx='1.5' fill='none' stroke='white' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='4' width='14' height='8' rx='1' fill='none' stroke='white' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='8' r='2' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M8 7v2' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='4' width='14' height='8' rx='1' fill='none' stroke='white' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='8' r='2' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M8 7v2' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
 }
 
 .icon--file-outline {
@@ -797,8 +797,8 @@
 }
 
 .icon--coins-outline {
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='7' r='3.5' fill='none' stroke='white' stroke-width='1.5'/%3E%3Ccircle cx='7' cy='9' r='3.5' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
-    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='7' r='3.5' fill='none' stroke='white' stroke-width='1.5'/%3E%3Ccircle cx='7' cy='9' r='3.5' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6 a5 2 0 0 1 10 0 a5 2 0 0 1 -10 0' fill='none' stroke='white' stroke-width='1.2'/%3E%3Cpath d='M3 6 v3 a5 2 0 0 0 10 0 v-3' fill='none' stroke='white' stroke-width='1.2'/%3E%3Cpath d='M3 9 v3 a5 2 0 0 0 10 0 v-3' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6 a5 2 0 0 1 10 0 a5 2 0 0 1 -10 0' fill='none' stroke='white' stroke-width='1.2'/%3E%3Cpath d='M3 6 v3 a5 2 0 0 0 10 0 v-3' fill='none' stroke='white' stroke-width='1.2'/%3E%3Cpath d='M3 9 v3 a5 2 0 0 0 10 0 v-3' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
 }
 
 /* ---------------------------------------------------------
@@ -958,7 +958,7 @@
 }
 
 .icon-container--muted {
-    background-color: var(--color-muted-bg);
+    background-color: var(--color-bg-subtle);
     color: var(--color-text-muted);
 }
 
@@ -1006,6 +1006,18 @@
     color: var(--color-text-on-strong);
 }
 
+.icon--no-stroke {
+    stroke-width: 0;
+}
+
+.icon--stroke-1 {
+    stroke-width: 1;
+}
+
+.icon--stroke-2 {
+    stroke-width: 2;
+}
+
 /* ---------------------------------------------------------
    8. ICON IN BUTTONS
 --------------------------------------------------------- */