:root {
    --utw-pink: #ec3b8f;
    --utw-pink-dark: #b91c64;
    --utw-pink-deep: #7f1748;
    --utw-pink-soft: #fff0f7;
    --utw-yellow: #ffd83d;
    --utw-yellow-dark: #c79100;
    --utw-yellow-soft: #fff8d8;
    --utw-cream: #fffaf4;
    --utw-ink: #3a2934;
    --utw-muted: #7b6874;
    --utw-border: #f0d8e5;
    --utw-shadow: 0 10px 28px rgba(127, 23, 72, .08);
    --accent: var(--utw-pink);
}

body {
    font-family: "Noto Sans Thai", "Tahoma", sans-serif;
    color: var(--utw-ink);
    background: #f8f7fa;
}

/* Bootstrap color remap for the school theme */
.btn-success,
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--utw-pink);
    --bs-btn-border-color: var(--utw-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--utw-pink-dark);
    --bs-btn-hover-border-color: var(--utw-pink-dark);
    --bs-btn-active-bg: var(--utw-pink-deep);
    --bs-btn-active-border-color: var(--utw-pink-deep);
}

.btn-outline-primary,
.btn-outline-success {
    --bs-btn-color: var(--utw-pink-dark);
    --bs-btn-border-color: var(--utw-pink);
    --bs-btn-hover-bg: var(--utw-pink);
    --bs-btn-hover-border-color: var(--utw-pink);
    --bs-btn-active-bg: var(--utw-pink-dark);
    --bs-btn-active-border-color: var(--utw-pink-dark);
}

.text-success,
.text-primary { color: var(--utw-pink-dark) !important; }
.bg-success,
.bg-primary { background-color: var(--utw-pink) !important; }
.border-success,
.border-primary { border-color: var(--utw-pink) !important; }

a { color: var(--utw-pink-dark); }
a:hover { color: var(--utw-pink-deep); }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(236, 59, 143, .65);
    box-shadow: 0 0 0 .25rem rgba(236, 59, 143, .14);
}
.form-check-input:checked {
    background-color: var(--utw-pink);
    border-color: var(--utw-pink);
}

.card {
    border-color: rgba(236, 59, 143, .10);
    border-radius: 1rem;
}

.table thead th {
    background: #fff6fa;
    color: var(--utw-pink-deep);
    border-bottom-color: #f2dce7;
}

.badge.text-bg-success,
.badge.bg-success { background-color: var(--utw-pink) !important; }

.page-link { color: var(--utw-pink-dark); }
.active > .page-link,
.page-link.active {
    background-color: var(--utw-pink);
    border-color: var(--utw-pink);
}

/* Shared school identity */
.utw-logo {
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
}
.utw-brand-pink { color: var(--utw-pink-dark); }
.utw-brand-yellow { color: var(--utw-yellow-dark); }
.utw-soft-pink { background: var(--utw-pink-soft); }
.utw-soft-yellow { background: var(--utw-yellow-soft); }