/* === Notion‑Lite Pastel Override (drop-in) ===
   Place this after your existing CSS (or import in App.jsx).
   Designed to *override* without changing your HTML/JS.
===============================================*/

/* 1) Base palette & typography */
:root{
  --bg:#0e1117;
  --surface:#121a26;
  --text:#eaf0f8;
  --muted:#a8b7cc;
  --border:#213147;
  --ring:rgba(122,162,255,.35);
  --shadow:0 10px 28px rgba(0,0,0,.28);
  --radius:14px;
  --fs:16px; --fs-sm:14px; --fs-lg:18px;

  /* Pastel accents per module */
  --acc-dashboard:#bae6fd; /* sky */
  --acc-todo:#ffd1dc;       /* pink */
  --acc-books:#b3e5fc;      /* blue */
  --acc-games:#ffd6a5;      /* peach */
  --acc-sales:#caffbf;      /* green */
  --acc-goals:#d1c2ff;      /* violet */
  --acc-progress:#ffe9a8;   /* lemon */
  --acc-links:#a7f3d0;      /* mint */
}

html,body{background:var(--bg) !important;color:var(--text) !important;font-size:var(--fs);line-height:1.65;-webkit-font-smoothing:antialiased;}

/* Preferred reading fonts (safe fallbacks) */
body,button,input,select,textarea{
  font-family: "Noto Sans Thai","Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji" !important;
  letter-spacing:.2px;
}

/* 2) Global containers */
[class*="card"], .card, .panel, .box, .widget, section.glass, .glass{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/* 3) Headings & labels */
h1,h2,h3,.h1,.h2,.h3,.title{
  color: var(--text) !important;
  letter-spacing:.15px;
}
h1,.h1{font-size:1.45rem !important;font-weight:800 !important}
h2,.h2{font-size:1.2rem !important;font-weight:700 !important}
h3,.h3{font-size:1.05rem !important;font-weight:700 !important}
label{color:var(--muted) !important;font-weight:600 !important}

/* 4) Inputs */
input,textarea,select{
  background:#0f172a !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  padding:.66rem .8rem !important;
  border-radius:12px !important;
  outline:0 !important;
  font-size:1rem !important;
}
input::placeholder,textarea::placeholder{color:#8ea0b8 !important}
input:focus,textarea:focus,select:focus{
  border-color:#4978c5 !important;
  box-shadow:0 0 0 4px var(--ring) !important;
}

/* 5) Buttons & pills */
button,.btn,[class*="btn-"],[class*="pill"],.pill,[class*="chip"],.chip,[class*="tag"],.tag,.badge{
  border:1px solid var(--border) !important;
  background:#0e1626 !important;
  color:var(--text) !important;
  border-radius:12px !important;
  padding:.5rem .8rem !important;
  font-weight:700 !important;
}
button:hover,.btn:hover,[class*="pill"]:hover,.pill:hover,[class*="chip"]:hover{
  border-color:#33507d !important;
  transform:translateY(-1px);
}
/* Bigger icons/text inside nav/buttons */
button > svg, .btn > svg, nav svg{width:1.15em;height:1.15em;margin-right:.35em}
nav button, .tabs button{font-size:1rem !important}

/* 6) Active nav/tab */
nav .active, nav [aria-current="page"], .tabs .is-active, .is-active{
  background:#10243f !important;
  border-color:#4067b1 !important;
  color:#eaf2ff !important;
}

/* 7) Progress bars */
.progress,[class*="progress"]{
  background:#0f172a !important;
  border:1px solid var(--border) !important;
  height:10px !important;border-radius:999px !important;overflow:hidden
}
.progress>div,[class*="progress"]>div{
  height:100%;background:linear-gradient(90deg,#80caff,#d1c2ff,#ffd1dc) !important;
}

/* 8) Calendar day cells (generic selectors) */
[class*="calendar"] [class*="day"], .calendar .day, [class*="month"] [class*="cell"]{
  background:transparent !important;border-color:rgba(255,255,255,.05) !important;color:#dbe7f7 !important;
}
[class*="calendar"] [class*="day"]:hover{background:rgba(255,255,255,.04) !important}

/* 9) Pastel accents (use any that match your DOM) */
.accent, .module-accent{height:.4rem;border-radius:8px;margin-bottom:.6rem;opacity:.9}
.accent-dashboard,.module-dashboard{background:var(--acc-dashboard) !important}
.accent-todo,.module-todo{background:var(--acc-todo) !important}
.accent-books,.module-books{background:var(--acc-books) !important}
.accent-games,.module-games{background:var(--acc-games) !important}
.accent-sales,.module-sales{background:var(--acc-sales) !important}
.accent-goals,.module-goals{background:var(--acc-goals) !important}
.accent-progress,.module-progress{background:var(--acc-progress) !important}
.accent-links,.module-links{background:var(--acc-links) !important}

/* 10) Tables (if any) */
table{border-collapse:separate;border-spacing:0;width:100%}
thead th{background:#0f172a !important;color:#cfe1ff !important}
td,th{border-bottom:1px solid rgba(255,255,255,.06) !important;padding:.6rem .5rem}
tbody tr:hover{background:rgba(255,255,255,.04) !important}

/* 11) Utility fixes */
.small, .text-sm{color:var(--muted) !important}
hr{border-color:rgba(255,255,255,.08) !important}
a{color:#d6e6ff !important}
/* Ensure everything is readable */
*{text-rendering:optimizeLegibility}