/**
 * Link Component Styles
 * 
 * Styled to be consistent with button component.
 */

.link {
    text-decoration: none;
    transition: all var(--transition-base);
}

/* Default - simple text link */
.link--default {
    color: var(--text-muted);
}

.link--default:hover {
    color: var(--text-primary);
}

/* Primary - blue underlined link */
.link--primary {
    color: var(--accent-primary);
}

.link--primary:hover {
    color: var(--accent-primary-hover);
    text-decoration: underline;
}

/* CTA - button-like link (matches btn--accent) */
.link--cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    color: white;
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    border-radius: var(--radius-md);
}

.link--cta:hover {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    color: white;
}

/* Secondary - outlined button-like link (matches btn--secondary) */
.link--secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: white;
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.link--secondary:hover {
    border-color: var(--gray-300);
    background: var(--bg-subtle);
}

/* Sizes */
.link--sm {
    font-size: var(--text-sm);
}

.link--sm.link--cta,
.link--sm.link--secondary {
    padding: var(--space-1) var(--space-3);
}

.link--lg {
    font-size: var(--text-md);
}

.link--lg.link--cta,
.link--lg.link--secondary {
    padding: var(--space-3) var(--space-6);
}