/* ================================================================
   TGT THEME: BUTTONS COMPONENT
   - File: assets/css/buttons.css
   - Defines the global styles for all button elements.
   - Uses a base class `.tgt-btn` with modifiers for different
     appearances (e.g., .tgt-btn--primary, .tgt-btn--secondary).
   - All variables are pulled from variables.css.
   ================================================================ */

/* 1. BASE BUTTON STYLES (.tgt-btn)
   ---------------------------------------------------------------- */
.tgt-btn {
    /* Layout & Box Model */
    display: inline-flex; /* Use flex for easy alignment of text/icons */
    align-items: center;
    justify-content: center;
    gap: var(--tgt-space-xs);
    padding: 0.8em 1.6em;
    border-width: var(--tgt-border-width-md);
    border-style: solid;
    border-radius: var(--tgt-radius-full); /* Default to pill shape */

    /* Typography */
    font-family: var(--tgt-font-family-heading);
    font-weight: var(--tgt-font-weight-bold);
    font-size: var(--tgt-font-size-sm);
    text-decoration: none;
    line-height: 1.2;
    text-align: center;

    /* Other Properties */
    cursor: pointer;
    transition: all var(--tgt-transition-default);
}


/* 2. BUTTON STYLE MODIFIERS
   ---------------------------------------------------------------- */

/* --- Primary Button (Gold) --- */
.tgt-btn--primary {
    background-color: var(--tgt-color-gold);
    border-color: var(--tgt-color-gold);
    color: var(--tgt-color-primary);
}

.tgt-btn--primary:hover,
.tgt-btn--primary:focus {
    background-color: #c59461; /* A slightly darker gold for hover */
    border-color: #c59461;
    color: var(--tgt-color-primary);
    transform: translateY(-2px);
    box-shadow: var(--tgt-shadow-md);
}


/* --- Secondary Button (Outline) --- */
.tgt-btn--secondary {
    background-color: transparent;
    border-color: var(--tgt-color-gold);
    color: var(--tgt-color-gold);
}

.tgt-btn--secondary:hover,
.tgt-btn--secondary:focus {
    background-color: var(--tgt-color-gold);
    border-color: var(--tgt-color-gold);
    color: var(--tgt-color-primary);
}


/* --- Accent Button (Magenta/Maroon) --- */
.tgt-btn--accent {
    background-color: var(--tgt-color-accent);
    border-color: var(--tgt-color-accent);
    color: var(--tgt-color-white);
}

.tgt-btn--accent:hover,
.tgt-btn--accent:focus {
    background-color: #611c39; /* A slightly darker accent for hover */
    border-color: #611c39;
    color: var(--tgt-color-white);
    transform: translateY(-2px);
    box-shadow: var(--tgt-shadow-md);
}


/* --- Dark Button (Primary Navy) --- */
/* This is used for the header CTA button */
.tgt-btn--dark {
    background-color: var(--tgt-color-primary);
    border-color: var(--tgt-color-primary);
    color: var(--tgt-color-white);
    border-radius: var(--tgt-radius-md); /* Header button has a more standard radius */
}

.tgt-btn--dark:hover,
.tgt-btn--dark:focus {
    background-color: var(--tgt-color-accent);
    border-color: var(--tgt-color-accent);
    color: var(--tgt-color-white);
    transform: translateY(-2px);
}


/* 3. BUTTON SIZE MODIFIERS (Optional)
   ---------------------------------------------------------------- */
.tgt-btn--large {
    font-size: var(--tgt-font-size-base);
    padding: 1em 2em;
}


/* 4. BUTTONS WITH ICONS
   ---------------------------------------------------------------- */
.tgt-btn svg {
    width: 1.2em;
    height: 1.2em;
    stroke-width: 2.5; /* Good default for feather icons */
}```

---

### **Theme Build Progress**

With the button system in place, we've established a crucial part of the site's interactive language. Next, we will style the hero section, another major visual component.