/* ============================================================
   CSSPS Theme  —  white background / blue primary
   ============================================================ */

:root {
    --theme-bg:           #ffffff;
    --theme-primary:      #2563eb;   /* blue-600 */
    --theme-primary-dark: #1d4ed8;   /* blue-700 */
    --theme-text:         #1f2937;   /* gray-800 */
}

/* ----- base ----- */
html { scroll-behavior: smooth; }

body {
    background-color: var(--theme-bg);
    color: var(--theme-text);
    font-family: inherit;
}

/* ----- utility classes ----- */
.theme-bg           { background-color: var(--theme-bg); }
.theme-text         { color: var(--theme-text); }
.theme-primary-text { color: var(--theme-primary); }

.theme-primary-bg {
    background-color: var(--theme-primary);
    transition: background-color .15s;
}
.theme-primary-bg:hover { background-color: var(--theme-primary-dark); }

/* card */
.theme-card {
    background-color: #ffffff;
    border: 1px solid #dbeafe;      /* blue-100 */
    border-radius: 0.875rem;
    transition: box-shadow .2s, border-color .2s;
}
.theme-card:hover {
    box-shadow: 0 4px 16px 0 rgba(37,99,235,.10);
    border-color: #bfdbfe;          /* blue-200 */
}

/* section helpers */
.section-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.section-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    background: #eff6ff;            /* blue-50 */
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--theme-primary);
    margin-bottom: 0.125rem;
}
.section-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1e3a5f;
    line-height: 1.25;
}
@media (min-width: 640px) {
    .section-title { font-size: 1.625rem; }
}