/* ============================================================
   SHARED DESIGN TOKENS & REUSABLE COMPONENTS
   ============================================================ */

/* --- Shared Layout --- */
.slide-base {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* --- Typography --- */
.section-title {
    font-size: 32px;
    margin-bottom: 8px;
    color: #0f172a;
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-align: center;
}

.section-subtitle {
    color: #64748b;
    font-size: 18px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 800px;
    text-align: center;
}

/* --- Surfaces --- */
.card-surface {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* --- Tags & Badges --- */
.panel-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* --- Metrics --- */
.metric-label {
    font-size: 12px;
    color: #64748b;
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.metric-val {
    font-weight: 700;
    font-size: 22px;
    color: #0f172a;
}

/* --- Dots (browser chrome) --- */
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.red { background: #ef4444; }
.dot.yellow { background: #fbbf24; }
.dot.green { background: #22c55e; }

/* --- Responsive shared --- */
@media (max-width: 560px) {
    .section-title { font-size: 28px; }
    .section-subtitle { font-size: 16px; }
}

@media (max-width: 420px) {
    .section-title { font-size: 24px; }
}