/* ============================================================
   CodingEasily — "Fresh Light" theme layer  (v6.0, Oct 2026)
   Loads LAST on every main-site page. Only colours / surfaces are
   changed — layout, URLs and content stay exactly the same.
   Palette: mint green (brand) + sky blue + soft lavender, on near-white.
   ============================================================ */
:root{
  --bg-base:#f8fbfa;
  --bg-soft:#f1f8f5;
  --border:#e2ece6;
  --border-strong:#cfe3d7;
  --text-primary:#14213d;
  --text-secondary:#3c4b63;
  --text-muted:#6a778c;
  --green:#16a34a;
  --green-dark:#0f7a35;
  --green-soft:#ecfdf3;
  --gold:#f59e0b;
  --gold-dark:#b45309;
  --gold-soft:#fff7e6;
  --cyan:#0ea5a4;
  --shadow-sm:0 2px 10px rgba(20,33,61,.05);
  --shadow-md:0 10px 28px rgba(20,33,61,.07);
  --shadow-lg:0 20px 50px rgba(20,33,61,.10);
  /* home/blog/notes inline-token names */
  --bg:#f8fbfa;
  --ink:#14213d;
  --muted:#5a6880;
  --mint:#ecfdf3;
  --yellow:#fde68a;
}

/* ---------- page canvas: airy pastel wash ---------- */
html body{
  background:
    radial-gradient(900px 420px at -10% -5%, rgba(187,247,208,.45), transparent 60%),
    radial-gradient(900px 420px at 110% -5%, rgba(191,219,254,.45), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(221,214,254,.30), transparent 60%),
    #f8fbfa;
  background-attachment:fixed;
  color:var(--text-primary);
}
::selection{background:#bbf7d0;color:#052e16}
a:focus-visible,button:focus-visible{outline:3px solid #93c5fd;outline-offset:2px;border-radius:8px}

/* ---------- static pages (About, Privacy, Contact ...) ---------- */
.static-page{background:transparent!important}
.static-card{border-color:#e3eee8!important;box-shadow:0 18px 50px rgba(20,33,61,.06)!important}
.static-card h1{
  text-shadow:none!important;
  background:linear-gradient(90deg,#0f7a35,#0ea5a4 60%,#4f46e5);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#0f7a35!important;
}
.static-card h2{color:#0f766e!important}
.static-card h3{color:#0f7a35!important}
.static-card li{color:#334155!important}
.notice-box{background:linear-gradient(135deg,#ecfdf3,#eff6ff)!important;border-color:#d5ebe0!important;color:#14532d!important}

/* ---------- tutorial pages ---------- */
.content-title{background:linear-gradient(90deg,#0f7a35,#0ea5a4 60%,#4f46e5)!important;-webkit-background-clip:text!important;background-clip:text!important}
.content-header::before{background:linear-gradient(180deg,#22c55e,#38bdf8,#a78bfa)!important}
.tutorial-content h2{background:linear-gradient(135deg,#f0fdf6,#ffffff 70%)!important;border-color:#e0efe6!important}
.tutorial-content h2[id^="summary"],.tutorial-content h2[id^="intro"]{border-left-color:#38bdf8!important}
.tutorial-content h3::before{background:linear-gradient(135deg,#22c55e,#38bdf8)!important}
.tutorial-right,.tutorial-sidebar{background:rgba(255,255,255,.85)!important}
.progress-bar-fill{background:linear-gradient(90deg,#22c55e,#38bdf8)!important}
.ad-box{display:none!important}

/* ---------- homepage ---------- */
.hero{background:linear-gradient(120deg,#ecfdf3 0%,#ffffff 46%,#eef6ff 78%,#f5f0ff 100%)!important}
.tag,.eyebrow{background:#ffffff!important;border:1px solid #bfe8cf!important;color:#0f7a35!important}
.h1 span{background:linear-gradient(90deg,#16a34a,#0ea5a4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.btn.g,.btn.primary{background:linear-gradient(135deg,#22c55e,#0f9f6e)!important;color:#fff!important;box-shadow:0 8px 20px rgba(22,163,74,.22)}
.btn.w,.btn.light{background:#fff!important;border:1px solid #cfe6d8!important;color:#0f7a35!important}
.hchip{border-color:#d3ece0!important}
.tut-badge{background:#eef6ff!important;color:#1d4ed8!important}
.tut-card,.card,.nhcard,.ncard,.topic-card{border-color:#e3eee8!important;box-shadow:0 8px 24px rgba(20,33,61,.05)}
.trust-bar{background:linear-gradient(135deg,#ecfdf3,#eef6ff 55%,#f5f0ff)!important;border-top:1px solid #e3eee8;border-bottom:1px solid #e3eee8}
.trust-item{color:#14213d!important}
.trust-item .tn{color:#0f7a35}
.trust-item .tl{color:#475569;opacity:1!important}
.code-card{background:#1e293b!important}

/* ---------- blog / digital tips / cyber security ---------- */
.side-num{background:#ecfdf3!important;color:#0f7a35!important}
.topic-card .small{color:#0e7490!important}
.cmp-table th{background:linear-gradient(135deg,#16a34a,#0f9f6e)!important}
.related-box{background:linear-gradient(135deg,#ecfdf3,#eef6ff)!important;border-color:#d8e9f5!important}
.warn{background:#fff8eb!important;border-left-color:#f59e0b!important}
.nhero{background:linear-gradient(120deg,#ecfdf3,#ffffff 50%,#eef6ff)!important}
.nhero .tag{background:#fff!important;border-color:#bfe8cf!important;color:#0f7a35!important}

/* ---------- LIGHT FOOTER (all main-site templates) ---------- */
.site-footer,.ce-foot,footer.footer{
  background:linear-gradient(180deg,#f3fbf6 0%,#eef6ff 100%)!important;
  color:#334155!important;
  border-top:0!important;
  position:relative;
  margin-top:40px!important;
}
.site-footer::before,.ce-foot::before,footer.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#22c55e,#38bdf8,#a78bfa,#f472b6);
}
.site-footer a,.ce-foot a,footer.footer a{color:#1e3a5f!important}
.site-footer a:hover,.ce-foot a:hover,footer.footer a:hover{color:#16a34a!important}
.footer-logo,.footer-logo .logo-text strong,.footer-logo .logo-text span{color:#14213d!important}
.footer-logo .logo-text strong{color:#16a34a!important}
.footer-brand p{color:#475569!important}
.footer-links h4{color:#0f766e!important}
.footer-links span{color:#475569!important}
.footer-community{background:linear-gradient(135deg,#ffffff,#f5f9ff)!important;border:1px solid #dfe9f5;box-shadow:0 10px 26px rgba(20,33,61,.05)}
.fc-text,.fc-text strong{color:#14213d!important}
.fc-text span{color:#475569!important}
.site-footer .fc-btn{color:#fff!important}
.footer-note{color:#64748b!important;font-weight:600!important}
.footer-bottom{border-top-color:#dbe7f0!important;color:#64748b!important}

/* ---------- course index heroes (C++, Java, PHP, MySQL) -> light ---------- */
.cpp-hero-panel,.mysql-hero{
  background:radial-gradient(500px 220px at 100% 0,rgba(196,181,253,.35),transparent 70%),linear-gradient(135deg,#f5f0ff 0%,#ffffff 52%,#eef6ff 100%)!important;
  color:#14213d!important;border:1px solid #e6e1f7;box-shadow:0 16px 40px rgba(79,70,229,.08)!important}
.mysql-hero{background:radial-gradient(500px 220px at 100% 0,rgba(134,239,172,.35),transparent 70%),linear-gradient(135deg,#ecfdf3 0%,#ffffff 52%,#eef6ff 100%)!important;border-color:#d8eee2}
.cpp-hero-panel:after{background:rgba(167,139,250,.14)!important}
.mysql-hero:after{color:rgba(22,163,74,.08)!important}
.cpp-hero-panel h1,.mysql-hero h1{color:#14213d!important}
.cpp-hero-panel p,.mysql-hero p{color:#3c4b63!important}
.mysql-hero>div>div:first-child{color:#0f7a35!important}
.cpp-badges span,.mysql-tags span{background:#ffffff!important;border:1px solid #e1e7f3!important;color:#24324a!important}
.cpp-start,.start-btn{background:linear-gradient(135deg,#6366f1,#4f46e5)!important;color:#fff!important;box-shadow:0 10px 22px rgba(79,70,229,.22)}
.start-btn{background:linear-gradient(135deg,#22c55e,#0f9f6e)!important;box-shadow:0 10px 22px rgba(22,163,74,.22)}
.hero-eyebrow{background:#fff7e6!important;color:#92400e!important;border:1px solid #fde4b0!important}

/* ---------- "one-line meaning" callouts on AI / ChatGPT / Computer / Internet pages ---------- */
.ai-onel,.cg-onel,.cb-onel,.in-onel{background:linear-gradient(135deg,#ecfdf3,#eef6ff)!important;color:#14213d!important;border:1px solid #cfe9dc}
.ai-onel b,.cg-onel b,.cb-onel b,.in-onel b,.ai-onel a,.cg-onel a,.cb-onel a,.in-onel a{color:#0f7a35!important}
.cs-onel{background:linear-gradient(135deg,#fff1f2,#fff7ed)!important;color:#7f1d1d!important;border:1px solid #fecdd3}
.cs-onel b{color:#be123c!important}
.site-footer .footer-links{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}