@layer components{.metric-card{border-width:1px;transition:transform .15s ease,box-shadow .15s ease}.metric-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-elevated)}.metric-card .metric-icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.625rem}.metric-pink{background:var(--metric-pink-bg);border-color:color-mix(in oklab,var(--metric-pink-fg) 22%,transparent)}.metric-pink .metric-icon{background:color-mix(in oklab,var(--metric-pink-fg) 18%,white);color:var(--metric-pink-fg)}.metric-pink .metric-value{color:var(--metric-pink-fg)}.metric-purple{background:var(--metric-purple-bg);border-color:color-mix(in oklab,var(--metric-purple-fg) 22%,transparent)}.metric-purple .metric-icon{background:color-mix(in oklab,var(--metric-purple-fg) 18%,white);color:var(--metric-purple-fg)}.metric-purple .metric-value{color:var(--metric-purple-fg)}.metric-cyan{background:var(--metric-cyan-bg);border-color:color-mix(in oklab,var(--metric-cyan-fg) 22%,transparent)}.metric-cyan .metric-icon{background:color-mix(in oklab,var(--metric-cyan-fg) 18%,white);color:var(--metric-cyan-fg)}.metric-cyan .metric-value{color:var(--metric-cyan-fg)}.metric-mint{background:var(--metric-mint-bg);border-color:color-mix(in oklab,var(--metric-mint-fg) 22%,transparent)}.metric-mint .metric-icon{background:color-mix(in oklab,var(--metric-mint-fg) 18%,white);color:var(--metric-mint-fg)}.metric-mint .metric-value{color:var(--metric-mint-fg)}.metric-amber{background:var(--metric-amber-bg);border-color:color-mix(in oklab,var(--metric-amber-fg) 22%,transparent)}.metric-amber .metric-icon{background:color-mix(in oklab,var(--metric-amber-fg) 18%,white);color:var(--metric-amber-fg)}.metric-amber .metric-value{color:var(--metric-amber-fg)}}