/*!
* sm-theme.css — StarMart shared design system (B12.2).
*
* Single source of truth for design tokens, base components, and utility
* classes. Pages can opt in by linking this file; it does NOT override
* existing inline styles (no !important, low specificity defaults).
*
* Load AFTER Google Fonts:
*
*
*
* Then set body class:
*/
/* ---- design tokens (canonical) -------------------------------------------- */
:root {
/* surface palette */
--sm-bg: #0a0e10;
--sm-surface: #111618;
--sm-card: #171d20;
--sm-border: #222e34;
--sm-brand: #84ef3c;
--sm-text: #ddeae8;
--sm-text-dim: #6c8088;
--sm-text-mute: #445a60;
--sm-danger: #ff3355;
--sm-warning: #ffd700;
--sm-info: #00d4ff;
--sm-success: #84ef3c;
--sm-glow: 0 0 14px rgba(132, 239, 60, 0.2);
/* typography */
--sm-font-display: "Orbitron", ui-monospace, monospace;
--sm-font-body: "Rajdhani", system-ui, sans-serif;
/* spacing scale */
--sm-space-xs: 4px;
--sm-space-sm: 8px;
--sm-space-md: 16px;
--sm-space-lg: 24px;
--sm-space-xl: 40px;
/* radii */
--sm-radius-sm: 6px;
--sm-radius-md: 10px;
--sm-radius-lg: 16px;
/* transitions */
--sm-tx-fast: 0.15s ease;
--sm-tx-med: 0.3s ease;
/* shadows */
--sm-shadow-card: 0 2px 8px rgba(0,0,0,0.3);
--sm-shadow-pop: 0 4px 24px rgba(0,0,0,0.5);
/* z-index scale */
--sm-z-nav: 100;
--sm-z-overlay: 500;
--sm-z-modal: 900;
--sm-z-tour: 9999;
}
/* ---- light theme variant -------------------------------------------------- */
.sm-light, .sm-light :root {
--sm-bg: #f0f4f0;
--sm-surface: #ffffff;
--sm-card: #e6ede6;
--sm-border: #b8ccb8;
--sm-brand: #2d7a00;
--sm-text: #1a2a1a;
--sm-text-dim: #5a6a5a;
--sm-text-mute: #8a9a8a;
--sm-glow: 0 0 14px rgba(45, 122, 0, 0.15);
--sm-shadow-card: 0 2px 8px rgba(0,0,0,0.08);
--sm-shadow-pop: 0 4px 24px rgba(0,0,0,0.12);
}
/* ---- base typography ------------------------------------------------------ */
.sm-themed {
font-family: var(--sm-font-body);
color: var(--sm-text);
background: var(--sm-bg);
}
.sm-display {
font-family: var(--sm-font-display);
letter-spacing: 0.06em;
}
/* ---- buttons -------------------------------------------------------------- */
.sm-btn {
display: inline-flex;
align-items: center;
gap: var(--sm-space-xs);
padding: var(--sm-space-sm) var(--sm-space-md);
border: 1px solid var(--sm-border);
border-radius: var(--sm-radius-sm);
background: var(--sm-surface);
color: var(--sm-text);
font-family: var(--sm-font-body);
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all var(--sm-tx-fast);
text-decoration: none;
white-space: nowrap;
}
.sm-btn:hover {
border-color: var(--sm-brand);
box-shadow: var(--sm-glow);
}
.sm-btn:active { transform: translateY(1px); }
.sm-btn-primary {
background: var(--sm-brand);
color: #06120a;
border-color: var(--sm-brand);
font-weight: 700;
}
.sm-btn-primary:hover { filter: brightness(1.1); }
.sm-btn-ghost {
background: transparent;
border-color: transparent;
}
.sm-btn-ghost:hover {
background: var(--sm-card);
border-color: var(--sm-border);
}
.sm-btn-danger {
border-color: var(--sm-danger);
color: var(--sm-danger);
}
.sm-btn-danger:hover {
background: var(--sm-danger);
color: #fff;
}
.sm-btn:disabled,
.sm-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* ---- cards ---------------------------------------------------------------- */
.sm-card {
background: var(--sm-card);
border: 1px solid var(--sm-border);
border-radius: var(--sm-radius-md);
padding: var(--sm-space-md);
box-shadow: var(--sm-shadow-card);
}
.sm-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sm-space-md);
padding-bottom: var(--sm-space-sm);
border-bottom: 1px solid var(--sm-border);
}
.sm-card-title {
font-family: var(--sm-font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--sm-brand);
}
/* ---- badges / chips ------------------------------------------------------- */
.sm-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
font-family: var(--sm-font-display);
border: 1px solid var(--sm-border);
background: var(--sm-surface);
color: var(--sm-text-dim);
}
.sm-badge-success { color: var(--sm-success); border-color: var(--sm-success); }
.sm-badge-danger { color: var(--sm-danger); border-color: var(--sm-danger); }
.sm-badge-warning { color: var(--sm-warning); border-color: var(--sm-warning); }
.sm-badge-info { color: var(--sm-info); border-color: var(--sm-info); }
/* ---- inputs --------------------------------------------------------------- */
.sm-input {
width: 100%;
padding: var(--sm-space-sm) var(--sm-space-md);
background: var(--sm-surface);
border: 1px solid var(--sm-border);
border-radius: var(--sm-radius-sm);
color: var(--sm-text);
font-family: var(--sm-font-body);
font-size: 14px;
transition: border-color var(--sm-tx-fast);
}
.sm-input:focus {
outline: none;
border-color: var(--sm-brand);
box-shadow: 0 0 0 2px rgba(132,239,60,0.15);
}
/* ---- tables --------------------------------------------------------------- */
.sm-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.sm-table th {
text-align: left;
padding: var(--sm-space-sm) var(--sm-space-md);
border-bottom: 1px solid var(--sm-border);
color: var(--sm-text-dim);
font-family: var(--sm-font-display);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sm-table td {
padding: var(--sm-space-sm) var(--sm-space-md);
border-bottom: 1px solid var(--sm-border);
}
.sm-table tr:hover td { background: rgba(132,239,60,0.04); }
/* ---- alerts --------------------------------------------------------------- */
.sm-alert {
padding: var(--sm-space-sm) var(--sm-space-md);
border-radius: var(--sm-radius-sm);
border: 1px solid;
font-size: 13px;
display: flex;
align-items: flex-start;
gap: var(--sm-space-sm);
}
.sm-alert-info { border-color: var(--sm-info); background: rgba(0,212,255,0.08); color: var(--sm-info); }
.sm-alert-success { border-color: var(--sm-success); background: rgba(132,239,60,0.08); color: var(--sm-success); }
.sm-alert-warning { border-color: var(--sm-warning); background: rgba(255,215,0,0.08); color: var(--sm-warning); }
.sm-alert-danger { border-color: var(--sm-danger); background: rgba(255,51,85,0.08); color: var(--sm-danger); }
/* ---- utilities ------------------------------------------------------------ */
.sm-flex { display: flex; }
.sm-flex-col { display: flex; flex-direction: column; }
.sm-flex-center { display: flex; align-items: center; justify-content: center; }
.sm-gap-sm { gap: var(--sm-space-sm); }
.sm-gap-md { gap: var(--sm-space-md); }
.sm-grow { flex: 1; }
.sm-text-dim { color: var(--sm-text-dim); }
.sm-text-brand { color: var(--sm-brand); }
.sm-text-center { text-align: center; }
.sm-text-right { text-align: right; }
.sm-mt-sm { margin-top: var(--sm-space-sm); }
.sm-mt-md { margin-top: var(--sm-space-md); }
.sm-mt-lg { margin-top: var(--sm-space-lg); }
.sm-hidden { display: none !important; }
.sm-mono { font-family: var(--sm-font-display); }
/* ---- responsive helpers --------------------------------------------------- */
@media (max-width: 768px) {
.sm-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
.sm-hide-desktop { display: none !important; }
}
/* ---- skeleton loader ------------------------------------------------------ */
.sm-skeleton {
background: linear-gradient(90deg, var(--sm-card) 25%, var(--sm-surface) 50%, var(--sm-card) 75%);
background-size: 200% 100%;
animation: sm-shimmer 1.5s infinite;
border-radius: var(--sm-radius-sm);
}
@keyframes sm-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ---- modal / dialog ------------------------------------------------------- */
.sm-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: var(--sm-z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--sm-space-md);
animation: sm-fade-in var(--sm-tx-fast);
}
.sm-modal {
background: var(--sm-surface);
border: 1px solid var(--sm-border);
border-radius: var(--sm-radius-lg);
max-width: 600px;
width: 100%;
max-height: 85vh;
overflow-y: auto;
box-shadow: var(--sm-shadow-pop);
animation: sm-slide-up var(--sm-tx-med);
}
@keyframes sm-fade-in { from { opacity: 0; } }
@keyframes sm-slide-up { from { opacity: 0; transform: translateY(20px); } }