.m2-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: var(--font-weight-medium);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
transition: background-color var(--motion-fast) var(--motion-ease),
border-color var(--motion-fast) var(--motion-ease),
color var(--motion-fast) var(--motion-ease);
text-decoration: none;
} .m2-btn--primary {
background: var(--color-action);
color: var(--color-text-inverse);
}
.m2-btn--primary:hover  { background: var(--color-action-hover); color: var(--color-text-inverse); }
.m2-btn--primary:active { background: var(--color-primary-900); color: var(--color-text-inverse); }
.m2-btn--primary:disabled,
.m2-btn--primary[aria-disabled="true"] {
background: var(--color-action-disabled);
color: var(--color-neutral-0);
cursor: not-allowed;
} .m2-btn--secondary {
background: transparent;
border-color: var(--color-action);
color: var(--color-action);
}
.m2-btn--secondary:hover  { background: var(--color-primary-50); color: var(--color-action); }
.m2-btn--secondary:active { background: var(--color-primary-100); color: var(--color-action-hover); }
.m2-btn--secondary:disabled,
.m2-btn--secondary[aria-disabled="true"] {
border-color: var(--color-neutral-300);
color: var(--color-neutral-400);
cursor: not-allowed;
}
.m2-btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-small); }
.m2-btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-body-lg); } .m2-btn--accent {
background: var(--color-accent-500);
color: var(--color-neutral-900);
}
.m2-btn--accent:hover  { background: var(--color-accent-700); }
.m2-btn--accent:active { background: var(--color-accent-700); }
.m2-btn--accent:disabled,
.m2-btn--accent[aria-disabled="true"] {
background: var(--color-neutral-300);
color: var(--color-neutral-0);
cursor: not-allowed;
} .m2-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-caption);
font-weight: var(--font-weight-medium);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
background: var(--color-primary-50);
color: var(--color-primary-700);
}
.m2-badge--accent  { background: #faf3dc; color: var(--color-accent-700); }
.m2-badge--success { background: var(--color-success-bg); color: var(--color-success); }
.m2-badge--error   { background: var(--color-error-bg); color: var(--color-error); }
.m2-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); } .m2-field {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.m2-field__label {
font-size: var(--text-small);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
.m2-field__input,
.m2-field__select {
font-family: var(--font-body);
font-size: var(--text-body);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
background: var(--color-surface);
transition: border-color var(--motion-fast) var(--motion-ease);
}
.m2-field__input:focus,
.m2-field__select:focus {
outline: none;
border-color: var(--color-action);
}
.m2-field--error .m2-field__input,
.m2-field--error .m2-field__select {
border-color: var(--color-error);
}
.m2-field__message {
font-size: var(--text-caption);
}
.m2-field__message--error   { color: var(--color-error); }
.m2-field__message--success { color: var(--color-success); } .m2-search-field {
display: flex;
align-items: center;
gap: var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
max-width: 480px;
}
.m2-search-field__icon {
color: var(--color-text-muted);
flex-shrink: 0;
}
.m2-search-field__input {
flex: 1;
border: none;
outline: none;
font: inherit;
color: var(--color-text);
background: transparent;
}
.m2-search-field__input::placeholder {
color: var(--color-text-muted);
} .m2-progress__label {
display: flex;
justify-content: space-between;
font-size: var(--text-small);
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.m2-progress__track {
height: 8px;
border-radius: var(--radius-full);
background: var(--color-primary-50);
overflow: hidden;
}
.m2-progress__fill {
height: 100%;
border-radius: var(--radius-full);
background: var(--color-action);
transition: width var(--motion-base) var(--motion-ease);
} .m2-check {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-body);
cursor: pointer;
}
.m2-check input {
accent-color: var(--color-action);
width: 18px;
height: 18px;
} .m2-icon {
display: inline-flex;
width: 1.25em;
height: 1.25em;
flex-shrink: 0;
}
.m2-icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
} .m2-text--lg      { font-size: var(--text-body-lg); }
.m2-text--small   { font-size: var(--text-small); }
.m2-text--caption { font-size: var(--text-caption); color: var(--color-text-muted); }
.m2-text--muted   { color: var(--color-text-muted); }
.m2-text--accent  { color: var(--color-action); }
.m2-text--center  { text-align: center; }