/* Theme: TimeUHave — Light/Dark, RTL/LTR friendly */

/* ===== CSS Variables (Light) ===== */
:root{
  --bg:#f7fbff;
  --ink:#0a2540;
  --ink-2:#4a5a72;
  --muted:#6c7a90;

  --brand1:#6b8afd;
  --brand2:#7bd3ff;
  --brand3:#ffe17d;
  --brand4:#a1f0c4;

  --card:#ffffff;
  --ring:rgba(107,138,253,.35);
  --shadow:0 10px 30px rgba(0,0,0,.06);
}

/* ===== Dark Mode (opt-in by adding :root.dark to html) ===== */
:root.dark{
  --bg:#0b1020;
  --card:#121831;
  --ink:#eaf0ff;
  --ink-2:#cdd6ff;
  --muted:#99a1c3;
  --shadow:0 10px 30px rgba(0,0,0,.4);
}

/* ===== Base ===== */
html,body{ background:var(--bg); color:var(--ink); }
a { text-decoration: none; }
a.hover-underline:hover { text-decoration: underline; }

/* Nice subtle background */
.soft-bg{
  background:
    radial-gradient(900px 450px at 20% -10%, #eef4ff, transparent 60%),
    radial-gradient(700px 350px at 120% -20%, #fff8dc, transparent 60%),
    linear-gradient(180deg, #fcfeff 0%, #f7fbff 100%);
  color: var(--ink);
}
.soft-bg::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(currentColor 1px, transparent 1px),
    radial-gradient(currentColor 1px, transparent 1px);
  background-color: transparent;
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
  opacity:.06; color:#5c79d8; /* light dot grid */
}
:root.dark .soft-bg::before{ opacity:.08; color:#6b8afd; }

/* Cards & Buttons */
.card{
  background: var(--card)!important;
  border:none; border-radius:1.2rem;
  box-shadow: var(--shadow);
}
.btn:focus{ box-shadow:0 0 0 .2rem var(--ring) }

/* Topbar */
.topbar{ background:rgba(255,255,255,.7); backdrop-filter:saturate(120%) blur(6px); }

/* Brand gradient text */
.brand-gradient-text{
  background: linear-gradient(90deg,var(--brand1),var(--brand2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Navbar gradient border under it */
.brand-gradient-border{
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg,var(--brand1),var(--brand2),var(--brand3),var(--brand4)) 1;
}

/* Glow CTA */
.glow{
  box-shadow: 0 0 0 .15rem rgba(123,211,255,.25);
}
.glow:hover{
  box-shadow: 0 0 0 .25rem rgba(123,211,255,.35);
}

/* Utilities */
.text-muted{ color: var(--muted)!important; }

/* Dark adjustments */
:root.dark .navbar{ background:#111735!important; }
:root.dark .brand-gradient-border{ border-bottom-color:#2a355e; }