/* ================================================================
   FILE: /css/components/buttons.css
   PURPOSE: Defines global styles for all button components.
   - All classes are prefixed with `ch-` for namespacing.
   ================================================================ */

.ch-btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    font-family: var(--ch-font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--ch-border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--ch-transition-main);
    text-decoration: none; /* Removes underline from links styled as buttons */
    line-height: 1.2;
}

.ch-btn:hover,
.ch-btn:focus {
    transform: translateY(-3px);
    box-shadow: var(--ch-box-shadow);
    border-bottom: 2px solid transparent; /* Overrides link hover style */
}

/* -- Primary Call-to-Action Button -- */
.ch-btn--primary {
    background-color: var(--ch-color-accent);
    color: var(--ch-color-contrast);
    border-color: var(--ch-color-accent);
}

.ch-btn--primary:hover,
.ch-btn--primary:focus {
    background-color: #d1b492; /* A slightly darker gold for hover */
    border-color: #d1b492;
    color: var(--ch-color-contrast);
}

/* -- Secondary Button for less important actions -- */
.ch-btn--secondary {
    background-color: transparent;
    color: var(--ch-color-primary);
    border-color: var(--ch-color-primary);
}

.ch-btn--secondary:hover,
.ch-btn--secondary:focus {
    background-color: var(--ch-color-primary);
    color: var(--ch-color-contrast);
}