/* =========================================================
   Main site (Home → About → Services → Specialists → Contact) in the
   CheckApps login palette: logo teal #12D6C8 / #0A9FB0, purple #7C3AED / #5B21F5,
   ink #16161E on cool paper #F4F5FA, near-black #0B0B0E for dark bands.
   Loaded by includes/header.php on those five pages.

   Each page defines its own colour variables in an inline <style> (":root");
   "html:root" is more specific, so these win regardless of load order.
   ========================================================= */
html:root {
    /* shared login palette */
    --lp-teal:        #12D6C8;
    --lp-teal-mid:    #0FC2C4;
    --lp-teal-deep:   #0A9FB0;
    --lp-teal-ink:    #08848F;   /* teal that stays readable as text on white */
    --lp-purple:      #7C3AED;
    --lp-purple-2:    #5B21F5;
    --lp-ink:         #16161E;
    --lp-ink-soft:    #23232E;
    --lp-muted:       #545768;
    --lp-paper:       #F4F5FA;
    --lp-line:        #E3E5EE;
    --lp-night:       #0B0B0E;
    --lp-night-2:     #16161C;
    --lp-grad:        linear-gradient(120deg, #19E3D2 0%, #0FC2C4 45%, #0A9FB0 100%);
    --lp-grad-brand:  linear-gradient(120deg, #12D6C8 0%, #7C3AED 100%);

    /* index.php */
    --marine:       var(--lp-night);
    --marine-light: var(--lp-night-2);
    --amber:        var(--lp-teal-mid);
    --amber-warm:   var(--lp-teal);
    --paper:        var(--lp-paper);
    --slate:        #33364A;
    --slate-light:  var(--lp-muted);
    --line:         var(--lp-line);

    /* about / services / contact (and appointment-style pages) */
    --ink:          var(--lp-ink);
    --ink-soft:     var(--lp-ink-soft);
    --yellow:       var(--lp-teal-mid);
    --yellow-light: #3FE3D6;
    --gold-ink:     var(--lp-teal-ink);
    --gray:         var(--lp-muted);

    /* specialists */
    --navy-deep:  var(--lp-night);
    --navy:       var(--lp-night-2);
    --teal:       var(--lp-teal-ink);
    --teal-light: #DDF7F4;
    --gold:       var(--lp-teal-mid);
    --gold-light: #3FE3D6;
    --bg:         var(--lp-paper);
    --panel:      #FFFFFF;
    --muted:      var(--lp-muted);
}

/* index.php repeats the navbar variables in its own :root — keep them on the login palette too */
html:root {
    --nav-black:      #0B0B0E;
    --nav-black-soft: #16161C;
    --nav-yellow:     #12D6C8;
    --nav-line:       rgba(18, 214, 200, 0.18);
    --nav-line-soft:  rgba(18, 214, 200, 0.08);
}

/* ---------- index.php: hard-coded gold → login palette ---------- */
/* Hero accent line: gold italic → logo teal→violet gradient text (like the login's headline) */
html body .home-hero-title em {
    color: transparent;
    background: linear-gradient(120deg, #19E3D2 0%, #7FE7FF 45%, #A57BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    border-color: rgba(18, 214, 200, .5);
}
/* Teal buttons/badges carry dark text, like the login's primary button */
html body .btn-yellow,
html body .btn-yellow:hover,
html body .btn-yellow:focus { background: var(--lp-grad); border-color: transparent; color: #041A19; }
html body .btn-yellow:hover { box-shadow: 0 12px 24px -10px rgba(18, 214, 200, .55); }
html body .badge-yellow { background: var(--lp-grad); color: #041A19; box-shadow: 0 4px 12px -4px rgba(18, 214, 200, .45); }
html body .telemedicine-image-frame::before { background: radial-gradient(circle, rgba(18, 214, 200, .20), rgba(124, 58, 237, .10) 45%, transparent 70%); }

/* Dark call-to-action bands: login-style night background with teal + purple glows */
html body .cta-section {
    background:
        radial-gradient(circle at 85% 15%, rgba(124, 58, 237, .38), transparent 55%),
        radial-gradient(circle at 10% 95%, rgba(18, 214, 200, .22), transparent 55%),
        var(--lp-night);
}