/* ============================================================================
* WEB — COMPONENT LAYER
* ----------------------------------------------------------------------------
* Reusable web/UI components built on foundations/tokens.css. Theme-agnostic:
* every component reads tokens, so it renders correctly in both the dark and
* light variants. Load AFTER tokens.css:
*
*
*
*
* Switch theme with `data-theme="light"` on .
* ==========================================================================*/
/* ---- Layout primitives ----------------------------------------------------*/
.ui-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.ui-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.ui-row { display: flex; align-items: center; gap: var(--space-3); }
.ui-grid { display: grid; gap: var(--space-6); }
/* ===========================================================================
* BUTTONS
* ==========================================================================*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 40px;
padding: 0 var(--space-4);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: background var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}
.btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn-lg { height: 48px; padding: 0 var(--space-6); font-size: var(--text-base); }
.btn-primary {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.btn-primary:hover {
background: hsl(var(--primary) / 0.90);
box-shadow: var(--glow-sm);
}
.btn-secondary {
background: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
}
.btn-secondary:hover { background: hsl(var(--accent)); }
.btn-outline {
background: transparent;
border-color: hsl(var(--border));
color: hsl(var(--foreground));
}
.btn-outline:hover { background: hsl(var(--accent)); }
.btn-ghost {
background: transparent;
color: hsl(var(--foreground));
}
.btn-ghost:hover { background: hsl(var(--accent)); }
.btn-destructive {
background: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
}
.btn-destructive:hover { background: hsl(var(--destructive) / 0.90); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
/* ===========================================================================
* CARDS
* ==========================================================================*/
.card {
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
}
.card-compact { padding: var(--space-4); }
/* Actionable card — glow + border shift on hover. The signature elevation. */
.card-interactive {
cursor: pointer;
transition: border-color var(--duration-base) var(--ease-standard),
box-shadow var(--duration-base) var(--ease-standard);
}
.card-interactive:hover {
border-color: hsl(var(--primary) / 0.45);
box-shadow: var(--glow-md);
}
.card-header { display: flex; align-items: flex-start; gap: var(--space-3); }
.card-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0; }
.card-desc { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); margin: var(--space-1) 0 0; }
/* Left-stripe accent — signals type/category on list & kanban cards. */
.card-stripe { border-left: 3px solid hsl(var(--primary)); }
/* ===========================================================================
* ICON TILE — recurring pattern: tinted square holding a same-coloured icon
* ==========================================================================*/
.icon-tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: hsl(var(--primary) / 0.10);
color: hsl(var(--primary));
flex-shrink: 0;
transition: background var(--duration-fast) var(--ease-standard);
}
.icon-tile svg { width: 20px; height: 20px; }
.icon-tile-lg { width: 56px; height: 56px; border-radius: var(--radius-lg); }
.icon-tile-lg svg { width: 28px; height: 28px; }
*:hover > .icon-tile { background: hsl(var(--primary) / 0.20); }
.icon-tile.emerald { background: rgb(16 185 129 / 0.12); color: var(--accent-emerald); }
.icon-tile.amber { background: rgb(245 158 11 / 0.12); color: var(--accent-amber); }
.icon-tile.violet { background: rgb(139 92 246 / 0.12); color: var(--accent-violet); }
.icon-tile.rose { background: rgb(244 63 94 / 0.12); color: var(--accent-rose); }
.icon-tile.cyan { background: rgb(6 182 212 / 0.12); color: var(--accent-cyan); }
.icon-tile.orange { background: rgb(249 115 22 / 0.12); color: var(--accent-orange); }
/* ===========================================================================
* INPUTS
* ==========================================================================*/
.input, .textarea, .select {
width: 100%;
height: 40px;
padding: 0 var(--space-3);
font-family: var(--font-sans);
font-size: var(--text-sm);
color: hsl(var(--foreground));
background: hsl(var(--secondary));
border: 1px solid hsl(var(--input));
border-radius: var(--radius-md);
transition: border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
.textarea { height: auto; min-height: 96px; padding: var(--space-3); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus, .textarea:focus, .select:focus {
outline: none;
border-color: hsl(var(--ring));
box-shadow: 0 0 0 3px hsl(var(--ring) / 0.20);
}
.label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: hsl(var(--foreground));
}
/* ===========================================================================
* BADGES & PILLS
* ==========================================================================*/
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
border-radius: var(--radius-sm);
background: hsl(var(--primary) / 0.12);
color: hsl(var(--primary));
}
.badge-outline {
background: transparent;
border: 1px solid hsl(var(--border));
color: hsl(var(--muted-foreground));
}
.badge-emerald { background: rgb(16 185 129 / 0.12); color: var(--accent-emerald); }
.badge-amber { background: rgb(245 158 11 / 0.12); color: var(--accent-amber); }
.badge-rose { background: rgb(244 63 94 / 0.12); color: var(--accent-rose); }
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
border-radius: var(--radius-full);
border: 1px solid hsl(var(--border));
}
/* Live status dot — pairs with .ds-pulse-glow */
.status-dot {
width: 8px; height: 8px;
border-radius: var(--radius-full);
background: hsl(var(--success));
box-shadow: 0 0 8px hsl(var(--success) / 0.7);
}
/* ===========================================================================
* NAVIGATION
* ==========================================================================*/
.nav-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
color: hsl(var(--muted-foreground));
font-size: var(--text-sm);
font-weight: var(--weight-medium);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard);
}
.nav-row:hover { background: hsl(var(--accent) / 0.6); color: hsl(var(--foreground)); }
.nav-row.active {
background: hsl(var(--primary) / 0.10);
color: hsl(var(--primary));
}
/* ===========================================================================
* METRIC TILE — compact dashboard stat
* ==========================================================================*/
.metric {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: var(--radius-lg);
}
.metric-value {
font-family: var(--font-mono);
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
font-feature-settings: "tnum" 1;
}
.metric-label {
font-size: 10px;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: hsl(var(--muted-foreground));
}
/* ===========================================================================
* DIVIDER
* ==========================================================================*/
.divider { height: 1px; background: hsl(var(--border)); border: 0; margin: var(--space-6) 0; }