@layer components {

    /* 
   * Base Button 
   * Provides structure, spacing, and typography without strong opinions on color
   */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);

        font-family: inherit;
        font-size: var(--text-normal);
        font-weight: var(--font-weight-semibold);
        line-height: normal;
        text-align: center;
        text-decoration: none;

        background-color: transparent;
        border: var(--border-width-1) solid transparent;
        border-radius: var(--radius-md);

        cursor: pointer;
        user-select: none;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    /* Make sure link buttons don't have underlines and override the default `a` styles */
    a.btn {
        text-decoration: none;
    }

    /* 
   * Variants 
   */

    /* Primary: For the main call to action */
    .btn-primary {
        background-color: var(--color-blue-accent);
        color: var(--color-ink-inverted);
        border-color: var(--color-blue-accent);
    }

    .btn-primary:where(:hover, :active) {
        /* Uses color-mix for a reliable hover state without needing a new variable */
        background-color: color-mix(in srgb, var(--color-blue-accent) 85%, white);
        border-color: color-mix(in srgb, var(--color-blue-accent) 85%, white);
    }

    /* Secondary/Outline: For alternative actions (e.g., Cancel, Back) */
    .btn-secondary {
        background-color: var(--white);
        color: var(--color-ink);
        border-color: var(--color-border);
    }

    .btn-secondary:where(:hover, :active) {
        background-color: var(--color-surface);
        border-color: var(--border-color-strong, var(--color-muted));
    }

    /* Ghost/Tertiary: For less important actions, sits flat until hovered */
    .btn-ghost {
        color: var(--color-ink);
        background-color: transparent;
    }

    .btn-ghost:where(:hover, :active) {
        background-color: var(--color-surface);
    }

    /* Danger: For destructive actions (e.g., Delete, Remove) */
    .btn-danger {
        background-color: var(--color-negative);
        color: var(--color-ink-inverted);
        border-color: var(--color-negative);
    }

    .btn-danger:where(:hover, :active) {
        background-color: color-mix(in srgb, var(--color-negative) 85%, black);
        border-color: color-mix(in srgb, var(--color-negative) 85%, black);
    }

    /* 
   * Sizing Modifiers
   */
    .btn-small {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-small);
        border-radius: var(--radius-sm);
    }

    .btn-large {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-large);
    }
}