/* ===== Soft Tinted Light Theme (keep white icons readable) ===== */

/* Default: Soft Sky (cool, clean) */
:root {
    --bg: #f7f9fc; /* page background (not pure white) */
    --surface: #ffffff; /* cards/sections */
    --surface-2: #f2f5fa; /* alt rows / muted blocks */
    --text: #0c1023; /* headings/body */
    --muted: #62829a; /* secondary text */
    --border: #e4e8ef; /* lines */

    --primary: #219bf1;
    --primary-600: #0b7ac7;
    --accent: #ca416e; /* your pink accent */
    --focus: rgba(33,155,241,.28);
    --radius: 14px;
    --shadow: 0 6px 18px rgba(12,16,35,.06);
}

/* ===== Optional Palette Variants ===== */
/* Warm Gray (softer, editorial feel) */
body.theme-warm-gray {
    --bg: #f6f5f3;
    --surface: #ffffff;
    --surface-2: #f1efec;
    --text: #111827;
    --muted: #6b7280;
    --border: #e6e3dd;
    --primary: #0ea5e9;
    --primary-600: #0284c7;
    --accent: #dd8b20;
}

/* Eggshell (slight cream; icons pop on top) */
body.theme-eggshell {
    --bg: #fbfaf7;
    --surface: #ffffff;
    --surface-2: #f5f3ee;
    --text: #0f172a;
    --muted: #667085;
    --border: #e9e4da;
    --primary: #219bf1;
    --primary-600: #0b7ac7;
    --accent: #20aa2a;
}

/* ===== Global ===== */
html, body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text) !important;
}

a {
   /* color: var(--primary) !important;*/
}

    a:hover {
        color: var(--primary-600) !important;
    }

/* Sections previously dark (.ds) -> light tinted */
.ds, .ds.ms, .page_header.ds, .page_footer.ds, .page_copyright.ds {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Topline/Header/Footer separators */
.page_topline {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
}

.page_header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
}

.page_footer {
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
}

.page_copyright {
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
}

/* Cards / hero soft background */
.hero-bg, .card, .widget, .box {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
}

/* Alternate subtle blocks */
.section-alt, .strip, .table thead th {
    background: var(--surface-2) !important;
}

/* Nav */
.page_header .nav.sf-menu > li > a {
    color: white !important;
}

    .page_header .nav.sf-menu > li > a:hover,
    .page_header .nav.sf-menu > li.active > a {
        color: #fce414 !important;
    }

/* Buttons */
.btn, input[type="submit"], button {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    border-radius: calc(var(--radius) - 4px) !important;
}

    .btn:hover, input[type="submit"]:hover, button:hover {
        background: transparent !important;
        color: var(--accent) !important;
    }

/* Forms */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"], textarea, select, .form-control {
    background: #fff !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: calc(var(--radius) - 6px) !important;
    box-shadow: none !important;
}

    input:focus, select:focus, textarea:focus, .form-control:focus {
        outline: none !important;
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 4px var(--focus) !important;
    }

/* Tables */
table {
    background: #fff !important;
}

    table td, table th {
        border: 1px solid var(--border) !important;
    }

    table tr:hover td {
        background: var(--surface-2) !important;
    }

    table th {
        color: var(--text) !important;
    }

/* Subtle gradients (optional utility) */
.bg-soft {
    background: radial-gradient(1200px 500px at 10% -10%, rgba(33,155,241,.06), transparent 60%), radial-gradient(900px 400px at 110% 10%, rgba(202,65,110,.08), transparent 55%), var(--bg) !important;
}

/* White icons visibility helpers */
.icon-white, .fa, .icon {
    /* drop-shadow so white glyphs pop on light bg */
    filter: drop-shadow(0 0 1px rgba(0,0,0,.35));
}

.icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(12,16,35,.06);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .35rem .55rem;
}

/* Marks and accents */
mark, .mark {
    color: var(--accent) !important;
    background: transparent !important;
}

blockquote > p::before {
    background-color: var(--accent) !important;
}

hr {
    border-color: var(--border) !important;
}