/* ══════════════════════════════════════════════════════════════
MotorSpec Design System — CSS Tokens & Component Classes
Versao: 1.0
Gerado: 2026-03-20
COMO USAR:
Depois de importar, use as classes diretamente nas views Razor:
● Em Producao
══════════════════════════════════════════════════════════════ */
/* ── Google Fonts (adicionar no _Layout.cshtml ) ─────
──────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
1. TOKENS — Fonte da verdade (--ms-*)
═══════════════════════════════════════════════════════════ */
:root {
/* ── Navy Scale (Primaria — logo background) ──── */
--ms-navy-50: #EEF2F7;
--ms-navy-100: #D5DEEB;
--ms-navy-200: #A8BAD4;
--ms-navy-300: #7B96BD;
--ms-navy-400: #4E72A6;
--ms-navy-500: #1B2D50;
--ms-navy-600: #172646;
--ms-navy-700: #131F3B;
--ms-navy-800: #0F1830;
--ms-navy-900: #0A1025;
--ms-navy-950: #060A18;
/* ── Coral Scale (Accent — logo chevron) ───────── */
--ms-coral-50: #FEF0F2;
--ms-coral-100: #FDD8DE;
--ms-coral-200: #F9A8B5;
--ms-coral-300: #F4788C;
--ms-coral-400: #EF4860;
--ms-coral-500: #E8284A;
--ms-coral-600: #C72040;
--ms-coral-700: #A61936;
--ms-coral-800: #84132B;
--ms-coral-900: #630E20;
--ms-coral-950: #420815;
/* ── Teal Scale (Electric/EV) ──────────────────── */
--ms-teal-50: #ECFEFF;
--ms-teal-100: #CFFAFE;
--ms-teal-200: #A5F3FC;
--ms-teal-300: #67E8F9;
--ms-teal-400: #22D3EE;
--ms-teal-500: #06B6D4;
--ms-teal-600: #0891B2;
--ms-teal-700: #0E7490;
--ms-teal-800: #155E75;
--ms-teal-900: #164E63;
--ms-teal-950: #083344;
/* ── Neutral Scale (Blue-gray frio) ────────────── */
--ms-neutral-50: #F7F8FA;
--ms-neutral-100: #ECEEF2;
--ms-neutral-200: #D8DCE4;
--ms-neutral-300: #B8BFC9;
--ms-neutral-400: #9BA3B0;
--ms-neutral-500: #6B7280;
--ms-neutral-600: #545B67;
--ms-neutral-700: #3D434D;
--ms-neutral-800: #272B33;
--ms-neutral-900: #15181E;
--ms-neutral-950: #0B0D11;
/* ── Semanticas ────────────────────────────────── */
--ms-success: #10B981;
--ms-success-active: #059669;
--ms-success-light: #ECFDF5;
--ms-success-clarity: rgba(16, 185, 129, 0.20);
--ms-danger: #EF4444;
--ms-danger-active: #DC2626;
--ms-danger-light: #FEF2F2;
--ms-danger-clarity: rgba(239, 68, 68, 0.20);
--ms-warning: #F59E0B;
--ms-warning-active: #D97706;
--ms-warning-light: #FFFBEB;
--ms-warning-clarity: rgba(245, 158, 11, 0.20);
--ms-info: #3B82F6;
--ms-info-active: #2563EB;
--ms-info-light: #EFF6FF;
--ms-info-clarity: rgba(59, 130, 246, 0.20);
--ms-electric: var(--ms-teal-500);
--ms-electric-active: var(--ms-teal-600);
--ms-electric-light: var(--ms-teal-50);
--ms-electric-clarity: rgba(6, 182, 212, 0.20);
/* ── Derivados Light (aliases semanticos) ──── */
--ms-primary: var(--ms-navy-500);
--ms-primary-active: var(--ms-navy-600);
--ms-primary-light: var(--ms-navy-50);
--ms-primary-clarity: rgba(27, 45, 80, 0.15);
--ms-primary-inverse: #ffffff;
--ms-accent: var(--ms-coral-400);
--ms-accent-active: var(--ms-coral-500);
--ms-accent-light: var(--ms-coral-50);
--ms-accent-clarity: rgba(239, 72, 96, 0.15);
--ms-accent-inverse: #ffffff;
/* ── Tipografia ────────────────────────────────── */
--ms-font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
--ms-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--ms-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* ── Gradients ─────────────────────────────────── */
--ms-gradient-navy: linear-gradient(135deg, var(--ms-navy-500), var(--ms-navy-400));
--ms-gradient-coral: linear-gradient(135deg, var(--ms-coral-500), var(--ms-coral-300));
--ms-gradient-navy-coral: linear-gradient(135deg, var(--ms-navy-500), var(--ms-coral-500));
--ms-gradient-neutral: linear-gradient(135deg, var(--ms-neutral-900), var(--ms-neutral-600));
--ms-gradient-subtle: linear-gradient(135deg, var(--ms-neutral-50), #ffffff);
--ms-gradient-editorial: linear-gradient(160deg, var(--ms-navy-600), var(--ms-navy-400), var(--ms-coral-500));
--ms-gradient-electric: linear-gradient(135deg, var(--ms-teal-600), var(--ms-teal-400));
/* ── Spacing ───────────────────────────────────── */
--ms-space-xs: 0.25rem;
--ms-space-sm: 0.5rem;
--ms-space-md: 1rem;
--ms-space-lg: 1.5rem;
--ms-space-xl: 2rem;
--ms-space-2xl: 3rem;
--ms-space-3xl: 4rem;
/* ── Border Radius ─────────────────────────────── */
--ms-radius-sm: 4px;
--ms-radius-md: 8px;
--ms-radius-lg: 12px;
--ms-radius-xl: 16px;
--ms-radius-2xl: 24px;
--ms-radius-full: 9999px;
/* ── Shadows ───────────────────────────────────── */
--ms-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
--ms-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
--ms-shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
--ms-shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
--ms-shadow-xl: 0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04);
--ms-shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
}
/* ═══════════════════════════════════════════════════════════
2. TEMA — Tokens semanticos (light/dark auto-switch)
═══════════════════════════════════════════════════════════ */
:root, .light {
--ms-bg-page: var(--ms-neutral-50);
--ms-bg-card: #ffffff;
--ms-bg-elevated: #ffffff;
--ms-bg-overlay: rgba(0, 0, 0, 0.60);
--ms-text-primary: var(--ms-neutral-900);
--ms-text-secondary: var(--ms-neutral-600);
--ms-text-muted: var(--ms-neutral-400);
--ms-text-inverse: #ffffff;
--ms-border-default: var(--ms-neutral-200);
--ms-border-strong: var(--ms-neutral-300);
--ms-border-subtle: var(--ms-neutral-100);
--ms-ui-primary: var(--ms-navy-500);
--ms-ui-primary-active: var(--ms-navy-600);
--ms-ui-primary-light: var(--ms-navy-50);
--ms-ui-accent: var(--ms-coral-400);
--ms-ui-accent-active: var(--ms-coral-500);
--ms-ui-accent-light: var(--ms-coral-50);
--ms-table-head-bg: var(--ms-neutral-50);
--ms-input-bg: #ffffff;
--ms-input-border: var(--ms-neutral-300);
--ms-input-focus: var(--ms-navy-400);
color-scheme: light;
}
.dark {
--ms-bg-page: var(--ms-neutral-950);
--ms-bg-card: var(--ms-neutral-900);
--ms-bg-elevated: var(--ms-neutral-800);
--ms-bg-overlay: rgba(0, 0, 0, 0.80);
--ms-text-primary: #ECEEF2;
--ms-text-secondary: #7E8592;
--ms-text-muted: #5E6573;
--ms-text-inverse: var(--ms-neutral-900);
--ms-border-default: #22262E;
--ms-border-strong: #2E333D;
--ms-border-subtle: #1A1D24;
--ms-ui-primary: var(--ms-navy-300);
--ms-ui-primary-active: var(--ms-navy-200);
--ms-ui-primary-light: #151C2A;
--ms-ui-accent: var(--ms-coral-400);
--ms-ui-accent-active: var(--ms-coral-300);
--ms-ui-accent-light: #2A1518;
--ms-table-head-bg: var(--ms-neutral-800);
--ms-input-bg: var(--ms-neutral-800);
--ms-input-border: #2E333D;
--ms-input-focus: var(--ms-navy-300);
--ms-shadow-xs: none;
--ms-shadow-sm: none;
--ms-shadow-md: 0 4px 6px rgba(0,0,0,0.20);
--ms-shadow-lg: 0 10px 15px rgba(0,0,0,0.30);
--ms-shadow-xl: 0 20px 25px rgba(0,0,0,0.40);
--ms-shadow-card: 0 1px 3px rgba(0,0,0,0.12);
color-scheme: dark;
}
/* ═══════════════════════════════════════════════════════════
3. BASE — Reset minimo + defaults
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: var(--ms-font-body);
background: var(--ms-bg-page);
color: var(--ms-text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
margin: 0;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--ms-font-heading);
font-weight: 400;
line-height: 1.2;
margin: 0;
}
/* ═══════════════════════════════════════════════════════════
4. TIPOGRAFIA
═══════════════════════════════════════════════════════════ */
.text-display { font-family: var(--ms-font-heading); font-size: 3.5rem; line-height: 1.1; letter-spacing: -0.01em; }
.text-h1 { font-family: var(--ms-font-heading); font-size: 2.5rem; line-height: 1.15; }
.text-h2 { font-family: var(--ms-font-heading); font-size: 2rem; line-height: 1.2; }
.text-h3 { font-family: var(--ms-font-heading); font-size: 1.5rem; line-height: 1.25; }
.text-h4 { font-family: var(--ms-font-heading); font-size: 1.25rem; line-height: 1.3; }
.text-body-lg { font-size: 1.125rem; line-height: 1.6; }
.text-body { font-size: 0.9375rem; line-height: 1.6; }
.text-body-sm { font-size: 0.8125rem; line-height: 1.5; }
.text-caption { font-size: 0.75rem; line-height: 1.4; }
.text-overline { font-family: var(--ms-font-body); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
/* ═══════════════════════════════════════════════════════════
5. BOTOES
═══════════════════════════════════════════════════════════ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
font-family: var(--ms-font-body); font-weight: 600; font-size: 0.8125rem;
padding: 0.5625rem 1.25rem; border-radius: var(--ms-radius-md);
border: 1px solid transparent; transition: all 150ms ease;
cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1.4;
}
.btn:active { transform: scale(0.97); }
.btn-sm { font-size: 0.75rem; padding: 0.4rem 0.875rem; }
.btn-lg { font-size: 0.9rem; padding: 0.75rem 1.75rem; }
.btn-primary { background: var(--ms-ui-primary); color: #fff; }
.btn-primary:hover { background: var(--ms-ui-primary-active); box-shadow: 0 4px 12px rgba(27,45,80,0.30); }
.btn-accent { background: var(--ms-ui-accent); color: #fff; }
.btn-accent:hover { background: var(--ms-ui-accent-active); box-shadow: 0 4px 12px rgba(239,72,96,0.30); }
.btn-outline-primary { border-color: var(--ms-ui-primary); color: var(--ms-ui-primary); background: transparent; }
.btn-outline-primary:hover { background: var(--ms-ui-primary); color: #fff; }
.btn-outline-accent { border-color: var(--ms-ui-accent); color: var(--ms-ui-accent); background: transparent; }
.btn-outline-accent:hover { background: var(--ms-ui-accent); color: #fff; }
.btn-ghost { color: var(--ms-text-secondary); background: transparent; }
.btn-ghost:hover { background: var(--ms-border-subtle); color: var(--ms-text-primary); }
.btn-light { background: var(--ms-bg-card); border-color: var(--ms-border-default); color: var(--ms-text-primary); }
.btn-light:hover { background: var(--ms-neutral-100); border-color: var(--ms-border-strong); }
.btn-success { background: var(--ms-success); color: #fff; }
.btn-danger { background: var(--ms-danger); color: #fff; }
.btn-warning { background: var(--ms-warning); color: #fff; }
.btn-info { background: var(--ms-info); color: #fff; }
.btn-electric { background: var(--ms-electric); color: #fff; }
.btn-electric:hover { background: var(--ms-electric-active); box-shadow: 0 4px 12px rgba(6,182,212,0.30); }
/* ═══════════════════════════════════════════════════════════
6. BADGES
═══════════════════════════════════════════════════════════ */
.badge {
display: inline-flex; align-items: center; gap: 0.25rem;
font-family: var(--ms-font-body); font-weight: 600; font-size: 0.6875rem;
padding: 0.2rem 0.625rem; border-radius: var(--ms-radius-full); line-height: 1.4;
}
.badge-primary { background: rgba(27,45,80,0.12); color: var(--ms-ui-primary); }
.badge-accent { background: rgba(239,72,96,0.12); color: var(--ms-ui-accent); }
.badge-success { background: var(--ms-success-clarity); color: var(--ms-success); }
.badge-danger { background: var(--ms-danger-clarity); color: var(--ms-danger); }
.badge-warning { background: var(--ms-warning-clarity); color: var(--ms-warning); }
.badge-info { background: var(--ms-info-clarity); color: var(--ms-info); }
.badge-neutral { background: var(--ms-border-subtle); color: var(--ms-text-secondary); }
.badge-electric { background: var(--ms-electric-clarity); color: var(--ms-electric); }
.badge-solid-primary { background: var(--ms-ui-primary); color: #fff; }
.badge-solid-accent { background: var(--ms-ui-accent); color: #fff; }
.badge-solid-electric { background: var(--ms-electric); color: #fff; }
/* ═══════════════════════════════════════════════════════════
7. CARDS
═══════════════════════════════════════════════════════════ */
.ms-card {
background: var(--ms-bg-card); border: 1px solid var(--ms-border-default);
border-radius: var(--ms-radius-lg); box-shadow: var(--ms-shadow-card); overflow: hidden;
}
.ms-card-header {
padding: 1rem 1.5rem; border-bottom: 1px solid var(--ms-border-default);
display: flex; align-items: center; justify-content: space-between;
}
.ms-card-body { padding: 1.5rem; }
.ms-card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--ms-border-default); }
.ms-card-title { font-family: var(--ms-font-body); font-size: 0.9rem; font-weight: 700; color: var(--ms-text-primary); }
/* ═══════════════════════════════════════════════════════════
8. TABELAS
═══════════════════════════════════════════════════════════ */
.ms-table { width: 100%; font-size: 0.85rem; border-collapse: collapse; }
.ms-table th {
text-align: left; padding: 0.625rem 1rem;
background: var(--ms-table-head-bg); font-weight: 600;
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--ms-text-secondary); border-bottom: 1px solid var(--ms-border-default);
}
.ms-table td {
padding: 0.625rem 1rem; border-bottom: 1px solid var(--ms-border-subtle); vertical-align: middle;
}
.ms-table tbody tr:hover { background: var(--ms-ui-primary-light); }
/* Group header (Motor e Performance, Dimensoes, etc.) */
.ms-table-group {
padding: 0.625rem 1rem; background: var(--ms-table-head-bg);
border-bottom: 1px solid var(--ms-border-default);
font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--ms-ui-primary);
}
/* ═══════════════════════════════════════════════════════════
9. INPUTS
═══════════════════════════════════════════════════════════ */
.ms-input {
display: block; width: 100%; padding: 0.5rem 0.875rem; font-size: 0.85rem;
background: var(--ms-input-bg); border: 1px solid var(--ms-input-border);
border-radius: var(--ms-radius-md); color: var(--ms-text-primary);
transition: all 150ms ease; outline: none;
}
.ms-input:focus { border-color: var(--ms-input-focus); box-shadow: 0 0 0 3px rgba(27,45,80,0.12); }
.ms-input::placeholder { color: var(--ms-text-muted); }
.ms-select {
display: block; width: 100%; padding: 0.5rem 0.875rem; font-size: 0.85rem;
background: var(--ms-input-bg); border: 1px solid var(--ms-input-border);
border-radius: var(--ms-radius-md); color: var(--ms-text-primary);
transition: all 150ms ease; outline: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.25rem;
}
.ms-select:focus { border-color: var(--ms-input-focus); box-shadow: 0 0 0 3px rgba(27,45,80,0.12); }
.ms-label { font-size: 0.78rem; font-weight: 600; display: block; margin-bottom: 0.25rem; color: var(--ms-text-primary); }
/* ═══════════════════════════════════════════════════════════
10. ALERTS
═══════════════════════════════════════════════════════════ */
.ms-alert {
display: flex; align-items: flex-start; gap: 0.75rem;
padding: 0.875rem 1rem; border-radius: var(--ms-radius-md);
font-size: 0.8125rem; line-height: 1.5; border: 1px solid transparent;
}
.ms-alert-success { background: var(--ms-success-light); color: var(--ms-success-active); border-color: var(--ms-success-clarity); }
.ms-alert-danger { background: var(--ms-danger-light); color: var(--ms-danger-active); border-color: var(--ms-danger-clarity); }
.ms-alert-warning { background: var(--ms-warning-light); color: var(--ms-warning-active); border-color: var(--ms-warning-clarity); }
.ms-alert-info { background: var(--ms-info-light); color: var(--ms-info-active); border-color: var(--ms-info-clarity); }
.ms-alert-electric { background: var(--ms-electric-light); color: var(--ms-electric-active); border-color: var(--ms-electric-clarity); }
/* ═══════════════════════════════════════════════════════════
11. NAVEGACAO
═══════════════════════════════════════════════════════════ */
.ms-breadcrumb { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; }
.ms-breadcrumb a { color: var(--ms-text-muted); transition: color 150ms ease; }
.ms-breadcrumb a:hover { color: var(--ms-ui-primary); }
.ms-breadcrumb .sep { color: var(--ms-text-muted); font-size: 0.7rem; }
.ms-breadcrumb .current { color: var(--ms-text-primary); font-weight: 600; }
.ms-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--ms-border-default); }
.ms-tab {
padding: 0.625rem 1.25rem; font-size: 0.8125rem; font-weight: 500;
color: var(--ms-text-secondary); border-bottom: 2px solid transparent;
margin-bottom: -2px; transition: all 150ms ease; cursor: pointer;
}
.ms-tab:hover { color: var(--ms-text-primary); }
.ms-tab.active { color: var(--ms-ui-primary); border-bottom-color: var(--ms-ui-primary); font-weight: 600; }
/* ═══════════════════════════════════════════════════════════
12. SWITCH
═══════════════════════════════════════════════════════════ */
.ms-switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.8125rem; }
.ms-switch input { display: none; }
.ms-switch-track {
width: 40px; height: 22px; background: var(--ms-neutral-300);
border-radius: 11px; position: relative; transition: background 200ms ease;
}
.ms-switch-track::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 18px; height: 18px; background: #fff; border-radius: 50%;
transition: transform 200ms ease; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.ms-switch input:checked + .ms-switch-track { background: var(--ms-ui-primary); }
.ms-switch input:checked + .ms-switch-track::after { transform: translateX(18px); }
/* ═══════════════════════════════════════════════════════════
13. VEHICLE CARD (composto)
═══════════════════════════════════════════════════════════ */
.ms-vehicle-card {
background: var(--ms-bg-card); border: 1px solid var(--ms-border-default);
border-radius: var(--ms-radius-lg); box-shadow: var(--ms-shadow-card);
overflow: hidden; cursor: pointer; transition: all 200ms ease;
}
.ms-vehicle-card:hover { box-shadow: var(--ms-shadow-lg); transform: translateY(-2px); }
.ms-vehicle-card-img {
height: 160px; display: flex; align-items: center; justify-content: center;
background: var(--ms-gradient-subtle); overflow: hidden;
}
.ms-vehicle-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ms-vehicle-card-body { padding: 1rem 1.25rem; }
.ms-vehicle-card-brand {
font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--ms-text-muted);
}
.ms-vehicle-card-name { font-family: var(--ms-font-heading); font-size: 1.25rem; margin: 0.25rem 0; }
.ms-vehicle-card-meta { font-size: 0.78rem; color: var(--ms-text-secondary); margin-bottom: 0.75rem; }
.ms-vehicle-card-specs { display: flex; gap: 1.25rem; font-size: 0.72rem; color: var(--ms-text-secondary); }
.ms-vehicle-card-specs .val { font-weight: 700; color: var(--ms-text-primary); font-size: 0.85rem; }
/* ═══════════════════════════════════════════════════════════
14. NEWS CARD (composto)
═══════════════════════════════════════════════════════════ */
.ms-news-card {
background: var(--ms-bg-card); border: 1px solid var(--ms-border-default);
border-radius: var(--ms-radius-lg); box-shadow: var(--ms-shadow-card);
overflow: hidden; cursor: pointer; transition: all 200ms ease;
}
.ms-news-card:hover { box-shadow: var(--ms-shadow-lg); transform: translateY(-2px); }
.ms-news-card-img {
height: 140px; display: flex; align-items: center; justify-content: center;
background: var(--ms-gradient-subtle); overflow: hidden;
}
.ms-news-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ms-news-card-body { padding: 1rem 1.25rem; }
.ms-news-card-headline { font-family: var(--ms-font-heading); font-size: 1.125rem; line-height: 1.25; margin-bottom: 0.5rem; }
.ms-news-card-excerpt { font-size: 0.8rem; color: var(--ms-text-secondary); line-height: 1.5; }