/* MD Canônico — Design System CSS ================================ Como usar: 1. Adicione no do seu HTML: 2. Adicione as fontes (também no , ANTES do CSS): 3. Use as classes nos seus elementos HTML. 4. Para modo escuro, adicione data-theme="dark" no . 5. Para serifa, adicione data-font="serif" no . */ /* ══════════════════════════════════════ TOKENS — variáveis globais ══════════════════════════════════════ */ :root { --font-sans: 'Outfit', sans-serif; --font-serif: 'Lora', serif; --font-main: var(--font-sans); --sz-xs: 11px; --sz-sm: 14px; --sz-md: 20px; --sz-lg: 32px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --r-sm: 5px; --r-md: 9px; --r-lg: 14px; --r-pill: 999px; /* Fundo e superfícies */ --bg: oklch(98.5% 0.004 75); --bg-surface: oklch(96.5% 0.006 72); --bg-raised: oklch(100% 0.002 70); --bg-sunken: oklch(94% 0.008 70); /* Bordas */ --border: oklch(86% 0.012 220); --border-strong: oklch(72% 0.016 220); /* Texto */ --text: oklch(22% 0.012 60); --text-2: oklch(46% 0.010 60); --text-3: oklch(64% 0.008 60); /* Prata */ --silver: oklch(78% 0.010 225); --silver-light: oklch(93% 0.006 220); --silver-dark: oklch(56% 0.016 225); /* Bronze */ --bronze: oklch(58% 0.092 58); --bronze-light: oklch(88% 0.038 62); --bronze-dark: oklch(42% 0.080 55); --bronze-tint: oklch(96% 0.016 65); /* Vibrantes */ --pink: oklch(62% 0.22 340); --pink-tint: oklch(95% 0.04 340); --orange: oklch(68% 0.19 48); --orange-tint: oklch(96% 0.04 52); --cyan: oklch(64% 0.18 200); --cyan-tint: oklch(95% 0.04 200); --green: oklch(66% 0.20 148); --green-tint: oklch(95% 0.04 148); --red: oklch(58% 0.20 22); --red-tint: oklch(96% 0.04 22); /* Gradientes */ --grad-header: linear-gradient(135deg, oklch(96% 0.010 225) 0%, oklch(94% 0.022 68) 100%); --grad-card: linear-gradient(160deg, oklch(99% 0.004 220) 0%, oklch(97% 0.012 65) 100%); /* Sombras */ --shadow-sm: 0 1px 3px oklch(40% 0.01 60 / 0.08), 0 1px 2px oklch(40% 0.01 60 / 0.06); --shadow-md: 0 4px 12px oklch(30% 0.01 60 / 0.10), 0 2px 4px oklch(30% 0.01 60 / 0.06); --shadow-lg: 0 8px 28px oklch(25% 0.01 60 / 0.12), 0 3px 8px oklch(25% 0.01 60 / 0.07); /* Acento padrão (troque para --pink, --orange, --cyan ou --green) */ --accent: var(--bronze); --accent-tint: var(--bronze-tint); --accent-dark: var(--bronze-dark); } /* ── MODO ESCURO ── */ [data-theme="dark"] { --bg: oklch(16% 0.008 240); --bg-surface: oklch(20% 0.010 240); --bg-raised: oklch(23% 0.010 238); --bg-sunken: oklch(13% 0.007 240); --border: oklch(30% 0.014 230); --border-strong: oklch(42% 0.016 230); --text: oklch(93% 0.006 70); --text-2: oklch(70% 0.008 65); --text-3: oklch(52% 0.008 65); --silver-light: oklch(28% 0.012 230); --bronze-tint: oklch(22% 0.022 60); --grad-header: linear-gradient(135deg, oklch(24% 0.015 225) 0%, oklch(22% 0.025 62) 100%); --grad-card: linear-gradient(160deg, oklch(22% 0.010 230) 0%, oklch(20% 0.018 65) 100%); --shadow-sm: 0 1px 3px oklch(5% 0.01 60 / 0.4); --shadow-md: 0 4px 12px oklch(5% 0.01 60 / 0.5); --shadow-lg: 0 8px 28px oklch(5% 0.01 60 / 0.6); } /* ── CONTRASTE ALTO ── */ [data-contrast="high"] { --border: oklch(60% 0.02 220); --border-strong: oklch(40% 0.025 220); --text-2: oklch(36% 0.012 60); --text-3: oklch(48% 0.010 60); } /* ── SERIFA ── */ [data-font="serif"] { --font-main: var(--font-serif); } /* ══════════════════════════════════════ BASE ══════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-main); font-size: var(--sz-sm); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ══════════════════════════════════════ TIPOGRAFIA Uso:

etc. ══════════════════════════════════════ */ .mdc-display { font-size: var(--sz-lg); font-family: var(--font-serif); font-weight: 500; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; } .mdc-heading { font-size: var(--sz-md); font-family: var(--font-serif); font-weight: 500; color: var(--text); letter-spacing: -0.01em; line-height: 1.25; } .mdc-body { font-size: var(--sz-sm); font-family: var(--font-main); font-weight: 400; color: var(--text-2); line-height: 1.65; } .mdc-caption { font-size: var(--sz-xs); font-family: var(--font-sans); font-weight: 400; color: var(--text-3); line-height: 1.4; } .mdc-label { font-size: var(--sz-xs); font-family: var(--font-sans); font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; } /* ══════════════════════════════════════ LAYOUT ══════════════════════════════════════ */ /* Container principal */ .mdc-layout { display: flex; height: 100vh; overflow: hidden; } /* Sidebar */ .mdc-sidebar { width: 220px; flex-shrink: 0; background: var(--grad-card); border-right: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: var(--shadow-sm); overflow-y: auto; } .mdc-sidebar-brand { padding: var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--grad-header); } .mdc-sidebar-brand h1 { font-size: var(--sz-md); font-family: var(--font-serif); font-weight: 600; color: var(--bronze); letter-spacing: -0.01em; margin: 0; } .mdc-sidebar-brand small { font-size: var(--sz-xs); color: var(--text-3); display: block; margin-top: 2px; } .mdc-sidebar-body { flex: 1; padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 2px; } .mdc-sidebar-footer { padding: var(--sp-3) var(--sp-2); border-top: 1px solid var(--border); } /* Conteúdo principal */ .mdc-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .mdc-content { flex: 1; overflow-y: auto; padding: var(--sp-6); } /* Topbar */ .mdc-topbar { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-5); background: var(--grad-header); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); flex-shrink: 0; } /* ══════════════════════════════════════ MENU / NAV ITEMS Uso: ══════════════════════════════════════ */ .mdc-nav-item { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 10px; border-radius: var(--r-sm); font-size: var(--sz-sm); font-family: var(--font-main); font-weight: 400; color: var(--text-2); text-decoration: none; cursor: pointer; border-left: 2px solid transparent; transition: background 0.12s, color 0.12s, border-color 0.12s; user-select: none; } .mdc-nav-item:hover { background: var(--bg-surface); color: var(--text); } .mdc-nav-item--active, .mdc-nav-item.active { background: var(--bronze-tint); color: var(--bronze-dark); font-weight: 500; border-left-color: var(--bronze); } /* Item filho (sub-menu) */ .mdc-nav-item--sub { font-size: var(--sz-xs); padding: 5px 8px 5px 28px; } .mdc-nav-icon { font-size: 13px; width: 16px; text-align: center; opacity: 0.65; } .mdc-nav-item--active .mdc-nav-icon, .mdc-nav-item.active .mdc-nav-icon { opacity: 1; } /* ══════════════════════════════════════ BOTÕES Uso: