/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-ui), sans-serif;
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-ui);
  line-height: 1;
  transition: background 0.1s ease, border 0.1s ease, color 0.1s ease;
}

/* Button size modifiers */
.btn--small {
    padding: 0 12px;
    height: 28px;
    border-radius: 9px;
}
.btn--medium {
    padding: 0 14px;
    height: 32px;
    border-radius: 10px;
}
.btn--large {
    padding: 0 18px;
    height: 40px;
    border-radius: 11px;
}
.btn--xlarge {
    padding: 0 20px;
    height: 44px;
    border-radius: 12px;
}

 .btn--primary {
    text-decoration: none;
    font-family: var(--font-ui), sans-serif;
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-ui);
    color: var(--header-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color, #e6e6e6);
    border: 1px solid var(--accent-color, #e6e6e6);
    box-shadow: 0 8px 2px 0 transparent,
        0 5px 2px 0 rgba(0, 0, 0, .01),
        0 3px 2px 0 rgba(0, 0, 0, .04),
        0 1px 1px 0 rgba(0, 0, 0, .07),
        0 0 1px 0 rgba(0, 0, 0, .08);
    transition: background 0.1s ease, border 0.1s ease, color 0.1s ease;
}
 .btn--primary:hover {
    color: var(--header-bg);
    background: #FFF;
    border: 1px solid #FFF;
}
.btn--primary:active {
    transform: scale(0.98); /* optional 'pressed in' effect */
    background: #dcdcdc;    /* darker shade for visual feedback */
    border-color: #dcdcdc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* subtle inset-like effect */
}