/* ============================================================
   GTME Pulse — Reusable Components
   Layer 2 of 3: tokens.css -> components.css -> styles.css
   All values reference --gtme-* tokens. Zero hardcoded hex. No forced specificity.
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--gtme-font-body);
    color: var(--gtme-text-primary);
    background: var(--gtme-bg-primary);
    line-height: 1.65;
    font-size: var(--gtme-text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Links ---- */
a {
    color: var(--gtme-accent);
    text-decoration: none;
    transition: color var(--gtme-duration-fast) var(--gtme-ease);
}

a:hover {
    color: var(--gtme-accent-hover);
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gtme-font-heading);
    font-weight: var(--gtme-weight-bold);
    color: var(--gtme-text-primary);
    line-height: 1.2;
    margin-top: 0;
}

h1 { font-size: var(--gtme-text-3xl); letter-spacing: -1px; }
h2 { font-size: var(--gtme-text-2xl); letter-spacing: -0.5px; }
h3 { font-size: var(--gtme-text-xl); }
h4 { font-size: var(--gtme-text-lg); }
h5 { font-size: var(--gtme-text-base); }
h6 { font-size: var(--gtme-text-sm); }

/* ---- Container ---- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gtme-space-6);
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gtme-space-2);
    padding: var(--gtme-space-3) var(--gtme-space-6);
    border-radius: var(--gtme-radius-md);
    font-family: var(--gtme-font-body);
    font-weight: var(--gtme-weight-semibold);
    font-size: var(--gtme-text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--gtme-duration-fast) var(--gtme-ease);
    border: none;
    line-height: 1.4;
}

.btn--primary {
    background: var(--gtme-accent);
    color: var(--gtme-text-on-accent);
}

.btn--primary:hover {
    background: var(--gtme-accent-hover);
    box-shadow: var(--gtme-shadow-accent);
    color: var(--gtme-text-on-accent);
}

.btn--ghost {
    background: transparent;
    color: var(--gtme-text-primary);
    border: 1px solid var(--gtme-border);
}

.btn--ghost:hover {
    background: var(--gtme-bg-primary);
    border-color: var(--gtme-accent-hover);
    color: var(--gtme-accent-hover);
}

/* ---- Cards ---- */
.card {
    background: var(--gtme-bg-surface);
    border: 1px solid var(--gtme-border);
    border-radius: var(--gtme-radius-xl);
    padding: var(--gtme-space-6);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gtme-space-6);
}

/* ---- Stat Blocks ---- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--gtme-space-4);
}

.stat-block {
    text-align: center;
}

.stat-value {
    display: block;
    font-family: var(--gtme-font-heading);
    font-size: var(--gtme-text-2xl);
    font-weight: var(--gtme-weight-bold);
    color: var(--gtme-text-primary);
    white-space: nowrap;
}

.stat-label {
    display: block;
    font-size: var(--gtme-text-sm);
    color: var(--gtme-text-secondary);
    margin-top: var(--gtme-space-1);
}

/* ---- Breadcrumb ---- */
.breadcrumb {
    font-size: var(--gtme-text-sm);
    color: var(--gtme-text-secondary);
    margin-bottom: var(--gtme-space-4);
}

.breadcrumb-link {
    color: var(--gtme-text-secondary);
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: var(--gtme-accent-hover);
}

.breadcrumb-sep {
    margin: 0 var(--gtme-space-2);
}

.breadcrumb-current {
    color: var(--gtme-text-primary);
}

/* ---- Data Tables ---- */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: var(--gtme-space-3) var(--gtme-space-4);
    text-align: left;
    border-bottom: 1px solid var(--gtme-border-subtle);
}

.data-table th {
    font-weight: var(--gtme-weight-semibold);
    font-size: var(--gtme-text-sm);
    color: var(--gtme-text-secondary);
}

/* ---- FAQ ---- */
.faq-section {
    margin-top: var(--gtme-space-12);
}

.faq-item {
    border-bottom: 1px solid var(--gtme-border-subtle);
    padding: var(--gtme-space-4) 0;
}

.faq-question {
    font-family: var(--gtme-font-heading);
    font-weight: var(--gtme-weight-semibold);
}

.faq-answer {
    color: var(--gtme-text-secondary);
    margin-top: var(--gtme-space-2);
}

/* ---- Newsletter CTA ---- */
.newsletter-cta {
    background: var(--gtme-bg-dark);
    color: var(--gtme-text-inverse);
    border-radius: var(--gtme-radius-lg);
    padding: var(--gtme-space-12) var(--gtme-space-8);
    text-align: center;
}

.newsletter-cta h2 {
    color: var(--gtme-text-inverse);
}

.newsletter-cta p {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-cta-form {
    display: flex;
    gap: var(--gtme-space-2);
    max-width: 460px;
    margin: 0 auto;
}

.newsletter-cta-form input {
    flex: 1;
    padding: var(--gtme-space-3) var(--gtme-space-4);
    border-radius: var(--gtme-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: var(--gtme-text-inverse);
    font-family: var(--gtme-font-body);
    font-size: var(--gtme-text-base);
}

.newsletter-cta-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-cta-form input:focus {
    outline: none;
    border-color: var(--gtme-accent);
}

/* ---- Page Header ---- */
.page-header {
    padding: var(--gtme-space-12) 0 var(--gtme-space-8);
}

.page-header h1 {
    font-family: var(--gtme-font-heading);
    font-weight: var(--gtme-weight-bold);
    letter-spacing: -0.5px;
}

/* ---- Source Citation ---- */
.source-citation {
    margin-top: var(--gtme-space-6);
    padding: var(--gtme-space-4);
    border-left: 3px solid var(--gtme-accent);
    background: var(--gtme-bg-surface);
    border-radius: 0 var(--gtme-radius-sm) var(--gtme-radius-sm) 0;
    font-size: 0.875rem;
    color: var(--gtme-text-secondary);
}

/* ---- Related Links ---- */
.related-links {
    margin-top: var(--gtme-space-12);
    padding-top: var(--gtme-space-8);
    border-top: 1px solid var(--gtme-border-subtle);
}