/* Marcos Filho Design System components — 1.2.4. Import tokens.css first. */
.mf-button,.mf-icon-button{appearance:none;border:var(--borders-hairline) solid transparent;background:var(--semantic-colors-action-primary-bg);color:var(--semantic-colors-action-primary-fg);font:var(--typography-font-weights-medium) var(--typography-font-sizes-sm)/var(--typography-line-heights-normal) var(--font-sans);cursor:pointer;transition:background var(--motion-durations-fast) var(--ease),transform var(--motion-durations-fast) var(--ease)}
.mf-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--sizing-control);padding:var(--space-2) var(--space-4);border-radius:var(--radii-button)}
.mf-button--secondary{background:var(--semantic-colors-surface-card);border-color:var(--semantic-colors-border-default);color:var(--semantic-colors-text-heading)}
.mf-icon-button{display:inline-grid;place-items:center;width:var(--sizing-control);height:var(--sizing-control);padding:0;border-radius:var(--radii-md)}
.mf-text-link{color:var(--semantic-colors-text-heading);font:var(--typography-font-weights-medium) var(--typography-font-sizes-sm)/var(--typography-line-heights-normal) var(--font-sans);border-bottom:var(--borders-hairline) solid currentColor;text-underline-offset:var(--space-1)}
.mf-eyebrow{color:var(--semantic-colors-text-muted);font:var(--typography-font-weights-bold) var(--typography-font-sizes-xs)/var(--typography-line-heights-normal) var(--font-mono);letter-spacing:var(--typography-letter-spacing-widest);text-transform:uppercase}
.mf-divider{border:0;border-top:var(--borders-hairline) solid var(--semantic-colors-border-default);margin:0}
.mf-tag,.mf-badge,.mf-status{display:inline-flex;align-items:center;gap:var(--space-1);border:var(--borders-hairline) solid var(--semantic-colors-border-default);border-radius:var(--radii-full);padding:var(--space-1) var(--space-2);font:var(--typography-font-sizes-xs)/var(--typography-line-heights-normal) var(--font-mono)}
.mf-tag{background:var(--semantic-colors-bg-muted);color:var(--semantic-colors-text-body)}
.mf-badge--design{background:var(--colors-blue-50);border-color:var(--colors-blue-100);color:var(--colors-blue-600)}
.mf-badge--development{background:var(--colors-purple-50);border-color:var(--colors-purple-100);color:var(--colors-purple-600)}
.mf-badge--branding{background:var(--colors-emerald-50);border-color:var(--colors-emerald-100);color:var(--colors-emerald-600)}
.mf-status{background:var(--semantic-colors-status-success-bg);border-color:var(--semantic-colors-status-success-border);color:var(--semantic-colors-status-success-fg)}
.mf-card,.mf-callout,.mf-code{border:var(--borders-hairline) solid var(--semantic-colors-border-default);border-radius:var(--radii-lg)}
.mf-card,.mf-callout{background:var(--semantic-colors-surface-card);padding:var(--space-4)}
.mf-code{display:block;overflow:auto;background:var(--semantic-colors-surface-code);color:var(--semantic-colors-text-inverse);padding:var(--space-4);font:var(--typography-font-sizes-xs)/var(--typography-line-heights-relaxed) var(--font-mono)}
.mf-figure{margin:0}.mf-figure img{display:block;width:100%;border-radius:var(--radii-media)}.mf-figure figcaption{margin-top:var(--space-2);color:var(--semantic-colors-text-muted);font:var(--typography-font-sizes-xs)/var(--typography-line-heights-relaxed) var(--font-mono)}
.mf-table-wrap{overflow-x:auto}.mf-table{width:100%;border-collapse:collapse;font:var(--typography-font-sizes-sm)/var(--typography-line-heights-relaxed) var(--font-sans)}.mf-table th,.mf-table td{padding:var(--space-3);border-bottom:var(--borders-hairline) solid var(--semantic-colors-border-default);text-align:left}.mf-table caption{text-align:left;margin-bottom:var(--space-2);font:var(--typography-font-sizes-xs)/var(--typography-line-heights-relaxed) var(--font-mono);color:var(--semantic-colors-text-muted)}
.mf-button:hover,.mf-icon-button:hover{background:var(--semantic-colors-action-primary-hover)}.mf-button--secondary:hover{background:var(--semantic-colors-bg-subtle)}.mf-button:active,.mf-icon-button:active{transform:translateY(var(--motion-hover-lift))}.mf-button:focus-visible,.mf-icon-button:focus-visible,.mf-text-link:focus-visible{outline:var(--borders-strong) solid var(--semantic-colors-border-ink);outline-offset:var(--space-1)}.mf-button:disabled,.mf-icon-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed;transform:none}
@media (prefers-reduced-motion: reduce){.mf-button,.mf-icon-button{transition:none}}

.mf-navigation,.mf-breadcrumb,.mf-pagination,.mf-footer{display:flex;align-items:center;gap:var(--space-3);font:var(--typography-font-sizes-sm)/var(--typography-line-heights-normal) var(--font-sans)}
.mf-navigation a,.mf-breadcrumb a{border-bottom:var(--borders-hairline) solid transparent}.mf-navigation a:hover,.mf-breadcrumb a:hover{border-color:currentColor}
.mf-side-rail{display:flex;width:max-content;gap:var(--space-2);padding:var(--space-2);border:var(--borders-hairline) solid var(--semantic-colors-border-default);border-radius:var(--radii-full);box-shadow:var(--shadows-lg)}.mf-side-rail a{display:grid;place-items:center;width:var(--sizing-control);height:var(--sizing-control);border-radius:var(--radii-full);color:var(--semantic-colors-text-heading)}.mf-side-rail a[aria-current="page"]{background:var(--semantic-colors-bg-muted)}
.mf-rule{display:flex;align-items:center;gap:var(--space-3)}.mf-rule::after{content:"";flex:1;border-top:var(--borders-hairline) solid var(--semantic-colors-border-default)}.mf-section-header h2,.mf-project h3{margin:var(--space-3) 0 var(--space-2);font:var(--typography-font-weights-semibold) var(--typography-font-sizes-3xl)/var(--typography-line-heights-tight) var(--font-sans);letter-spacing:var(--typography-letter-spacing-tight)}.mf-section-header p,.mf-project p{margin:0;color:var(--semantic-colors-text-body);font:var(--typography-font-sizes-base)/var(--typography-line-heights-relaxed) var(--font-sans)}.mf-project{padding:var(--space-6);border-top:var(--borders-strong) solid var(--semantic-colors-border-ink)}
.mf-quote{margin:0;padding:var(--space-6) 0;font:var(--typography-font-weights-semibold) var(--typography-font-sizes-2xl)/var(--typography-line-heights-tight) var(--font-sans);letter-spacing:var(--typography-letter-spacing-tight)}.mf-quote footer{margin-top:var(--space-3);color:var(--semantic-colors-text-muted);font:var(--typography-font-sizes-xs)/var(--typography-line-heights-normal) var(--font-mono);letter-spacing:var(--typography-letter-spacing-normal)}
.mf-chart{margin:0;padding:var(--space-4);border:var(--borders-hairline) solid var(--semantic-colors-border-default);border-radius:var(--radii-lg)}.mf-chart figcaption{display:grid;gap:var(--space-1);font:var(--typography-font-sizes-sm)/var(--typography-line-heights-normal) var(--font-sans)}.mf-chart figcaption span{color:var(--semantic-colors-text-muted);font-family:var(--font-mono)}.mf-chart-bars{display:flex;align-items:end;gap:var(--space-2);height:var(--space-16);margin-top:var(--space-4);border-bottom:var(--borders-hairline) solid var(--semantic-colors-border-default)}.mf-chart-bars i{flex:1;background:var(--semantic-colors-text-heading)}.mf-chart-bars i:nth-child(1){height:42%}.mf-chart-bars i:nth-child(2){height:50%}.mf-chart-bars i:nth-child(3){height:58%}.mf-chart-bars i:nth-child(4){height:68%}.mf-footer{justify-content:space-between;padding-top:var(--space-4);border-top:var(--borders-hairline) solid var(--semantic-colors-border-default)}.mf-footer span{color:var(--semantic-colors-text-muted);font-family:var(--font-mono)}
.mf-knot-fallback{position:relative;width:var(--space-24);height:var(--space-24);border:var(--borders-hairline) solid var(--semantic-colors-border-strong);border-radius:var(--radii-full);transform:rotate(28deg)}.mf-knot-fallback i{position:absolute;top:var(--space-4);left:var(--space-6);width:var(--space-1);height:var(--space-1);border-radius:var(--radii-full);background:var(--colors-gold-value)}
.mf-field{display:grid;gap:var(--space-2);color:var(--semantic-colors-text-heading);font:var(--typography-font-sizes-xs)/var(--typography-line-heights-normal) var(--font-mono)}.mf-input,.mf-select{width:100%;min-height:var(--sizing-control);padding:var(--space-2) var(--space-3);border:var(--borders-hairline) solid var(--semantic-colors-border-default);border-radius:var(--radii-md);background:var(--semantic-colors-surface-card);color:var(--semantic-colors-text-heading);font:var(--typography-font-sizes-sm)/var(--typography-line-heights-normal) var(--font-sans)}.mf-choice{display:flex;align-items:center;gap:var(--space-2);font:var(--typography-font-sizes-sm)/var(--typography-line-heights-normal) var(--font-sans)}.mf-toggle{min-height:var(--sizing-control);padding:var(--space-2) var(--space-3);border:var(--borders-hairline) solid var(--semantic-colors-border-default);border-radius:var(--radii-full);background:var(--semantic-colors-surface-card);color:var(--semantic-colors-text-heading);font:var(--typography-font-sizes-sm)/var(--typography-line-heights-normal) var(--font-sans)}.mf-toggle[aria-pressed="true"]{background:var(--semantic-colors-action-primary-bg);color:var(--semantic-colors-action-primary-fg)}
.mf-tabs{display:flex;border-bottom:var(--borders-hairline) solid var(--semantic-colors-border-default)}.mf-tabs button{padding:var(--space-2) var(--space-3);border:0;border-bottom:var(--borders-strong) solid transparent;background:transparent;color:var(--semantic-colors-text-muted);font:var(--typography-font-sizes-sm)/var(--typography-line-heights-normal) var(--font-sans)}.mf-tabs button[aria-selected="true"]{border-color:var(--semantic-colors-border-ink);color:var(--semantic-colors-text-heading)}.mf-tab-panel{padding:var(--space-3) 0;color:var(--semantic-colors-text-body);font:var(--typography-font-sizes-sm)/var(--typography-line-heights-relaxed) var(--font-sans)}.mf-dropdown{position:relative;width:max-content;border:var(--borders-hairline) solid var(--semantic-colors-border-default);border-radius:var(--radii-md);padding:var(--space-2) var(--space-3);font:var(--typography-font-sizes-sm)/var(--typography-line-heights-normal) var(--font-sans)}.mf-dropdown a{display:block;margin-top:var(--space-2);color:var(--semantic-colors-text-body)}.mf-pagination a{display:grid;place-items:center;width:var(--sizing-control);height:var(--sizing-control);border:var(--borders-hairline) solid var(--semantic-colors-border-default);border-radius:var(--radii-md)}.mf-pagination a[aria-current="page"]{background:var(--semantic-colors-action-primary-bg);color:var(--semantic-colors-action-primary-fg)}
.mf-progress{display:grid;gap:var(--space-2);font:var(--typography-font-sizes-xs)/var(--typography-line-heights-normal) var(--font-mono)}.mf-progress progress{width:100%;accent-color:var(--semantic-colors-action-primary-bg)}.mf-empty-state{padding:var(--space-6);border:var(--borders-hairline) solid var(--semantic-colors-border-default);border-radius:var(--radii-lg);background:var(--semantic-colors-bg-subtle)}.mf-empty-state h2{margin:0;font:var(--typography-font-weights-semibold) var(--typography-font-sizes-lg)/var(--typography-line-heights-tight) var(--font-sans)}.mf-empty-state p{margin:var(--space-2) 0 0;color:var(--semantic-colors-text-body);font:var(--typography-font-sizes-sm)/var(--typography-line-heights-relaxed) var(--font-sans)}.mf-tooltip{position:relative;display:inline-flex}.mf-tooltip [role="tooltip"]{position:absolute;bottom:calc(100% + var(--space-2));left:0;width:max-content;max-width:var(--containers-prose);padding:var(--space-2);border-radius:var(--radii-sm);background:var(--semantic-colors-surface-code);color:var(--semantic-colors-text-inverse);font:var(--typography-font-sizes-xs)/var(--typography-line-heights-normal) var(--font-mono);opacity:0;pointer-events:none}.mf-tooltip:focus-within [role="tooltip"],.mf-tooltip:hover [role="tooltip"]{opacity:1}.mf-input:focus-visible,.mf-select:focus-visible,.mf-toggle:focus-visible,.mf-tabs button:focus-visible,.mf-dropdown summary:focus-visible,.mf-pagination a:focus-visible,.mf-side-rail a:focus-visible{outline:var(--borders-strong) solid var(--semantic-colors-border-ink);outline-offset:var(--space-1)}
 .mf-toast{display:grid;gap:var(--space-1);max-width:var(--containers-prose);padding:var(--space-3);border:var(--borders-hairline) solid var(--semantic-colors-border-default);border-radius:var(--radii-md);background:var(--semantic-colors-surface-card);box-shadow:var(--shadows-xl);font:var(--typography-font-sizes-sm)/var(--typography-line-heights-normal) var(--font-sans)}.mf-toast span{color:var(--semantic-colors-text-body)}