/*
 * Singapore theme for Bootstrap 5.3.8.
 * Colours inspired by the Singapore flag red, Marina Bay at night and the Vanda Miss Joaquim orchid.
 * site.css only uses the --brand-* variables below, so another country site can swap this file.
 */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
}

:root {
    /* Brand palette */
    --brand-primary: #C8102E;        /* Singapore red (AA on white: 5.9:1) */
    --brand-primary-dark: #A00D25;
    --brand-primary-darker: #8A0B20;
    --brand-primary-soft: #FBE7EA;
    --brand-accent-bright: #EF3340;  /* flag red, decorative only */
    --brand-dark: #14213D;           /* Marina Bay night navy */
    --brand-dark-2: #1F3157;
    --brand-orchid: #A4307A;         /* Vanda Miss Joaquim */
    --brand-orchid-soft: #F6E7F0;
    --brand-green: #1E7F5C;          /* garden city green */
    --brand-green-soft: #E6F4EE;
    --brand-sand: #F7F3EE;
    --brand-ink: #1E2433;
    --brand-official-soft: #EEF1F7;

    /* Hero sky: night navy to sunset over the bay */
    --brand-hero-gradient: linear-gradient(180deg, #14213D 0%, #1C2A50 34%, #4A2A5C 60%, #9C2F4E 80%, #E2694F 100%);
    --brand-page-hero-gradient: linear-gradient(120deg, #14213D 0%, #1F3157 55%, #4A2A5C 100%);

    /* Bootstrap overrides */
    --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: #1E2433;
    --bs-body-color-rgb: 30, 36, 51;
    --bs-emphasis-color: #14213D;
    --bs-secondary-color: rgba(30, 36, 51, .72);
    --bs-primary: #C8102E;
    --bs-primary-rgb: 200, 16, 46;
    --bs-primary-text-emphasis: #7A0A1C;
    --bs-primary-bg-subtle: #FBE7EA;
    --bs-primary-border-subtle: #F1B5BF;
    --bs-success: #1E7F5C;
    --bs-success-rgb: 30, 127, 92;
    --bs-dark: #14213D;
    --bs-dark-rgb: 20, 33, 61;
    --bs-link-color: #C8102E;
    --bs-link-color-rgb: 200, 16, 46;
    --bs-link-hover-color: #A00D25;
    --bs-link-hover-color-rgb: 160, 13, 37;
    --bs-border-radius: .625rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.5rem;
    --bs-focus-ring-color: rgba(200, 16, 46, .3);
}

.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-primary-darker);
    --bs-btn-active-border-color: var(--brand-primary-darker);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 200, 16, 46;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-focus-shadow-rgb: 200, 16, 46;
}

.btn-outline-light {
    --bs-btn-hover-color: var(--brand-dark);
}

.text-primary { color: var(--brand-primary) !important; }
.bg-brand-dark { background-color: var(--brand-dark) !important; }
.bg-brand-sand { background-color: var(--brand-sand) !important; }
.text-orchid { color: var(--brand-orchid) !important; }

.badge-orchid {
    background-color: var(--brand-orchid-soft);
    color: #7C2259;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand-primary);
    --bs-dropdown-link-hover-bg: var(--brand-primary-soft);
    --bs-dropdown-link-hover-color: var(--brand-primary-darker);
}

.form-control:focus,
.btn:focus-visible {
    border-color: var(--bs-primary-border-subtle);
}