/* -------------------------
   THEME VARIABLES
   default: dark theme (no class)
   .theme-light -> light theme overrides
   ------------------------- */

/* core variables already in :root; keep them. Add variant overrides below */
:root {
  /* existing variables — keep these */
  --bg1:#0D1A28;
  --bg2:#0F2335;
  --card-bg:rgba(15,35,53,0.65);
  --glass:rgba(255,255,255,0.05);
  --border:rgba(255,255,255,0.08);
  --text:#ECF3FF;
  --muted:#9CB3C9;
  --accent1:#3AB4F2;
  --accent2:#63E6BE;
  --radius:14px;
  --max-width:1200px;
}

html.theme-light {
  --bg1: #F8FBFF;
  --bg2: #F2F7FF;

  --card-bg: #ffffffF2; /* subtle glass white */
  --glass: rgba(0, 0, 0, 0.03);
  --border: rgba(0, 0, 0, 0.06);

  --text: #0A1A2F;
  --muted: #5A6E88;

  --accent1: #0EA5E9; /* sky blue */
  --accent2: #2DD4BF; /* aqua green */
}


/* Apply background using variables */
body {
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--text);
  transition: background 240ms ease, color 240ms ease;
}
html, body, button, input, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
  Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
  system-ui, sans-serif !important;
}

/* Card transitions */
.hero-card, .tool-card, .icon-box {
  transition: background 240ms ease, box-shadow 200ms ease, color 240ms ease;
}

/* Theme toggle styling */
#themeToggle {
    display: flex;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--glass);
    border: 1px solid var(--border);
    align-items: center;
}
#themeToggle:hover { transform:translateY(-2px); transition: transform 150ms; }

/* Icon contrast for light mode */
html.theme-light #themeIcon { filter: none; }
#themeIcon { font-size:18px; line-height:1; }

/* ensure smooth icon change */
.theme-animated { transition: all 200ms ease; }


.page {
  max-width:var(--max-width);
  margin:auto;
  padding:22px;
}

/* ===== HEADER ===== */
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo-link {
  text-decoration:none;
  color:inherit;
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-box {
  width:40px;height:40px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  display:grid;
  place-items:center;
}

.site-title {
  font-size:20px;
  font-weight:700;
}

.site-tagline {
  font-size:12px;
  color:var(--muted);
}

.nav-links {
  display:flex;
  gap:10px;
}

/* ===== BUTTONS ===== */
.btn {
  padding:8px 12px;
  border-radius:var(--radius);
  background:var(--glass);
  border:1px solid var(--border);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  justify-content: center;
}

.btn.primary {
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  border:none;
  color:#fff;
}

/* ===== HERO ===== */
.hero {
  display:grid;
  grid-template-columns:1fr 420px;
  gap:28px;
  margin-top:28px;
}
@media(max-width:900px){
  .hero { grid-template-columns:1fr; }
}

.hero-card {
  padding:24px;
  border-radius:18px;
  background:var(--card-bg);
  border:1px solid var(--border);
  backdrop-filter:blur(6px);
}

/* ===== INPUT ===== */
.input {
  width:100%;
  padding:12px;
  background:rgba(255,255,255,0.05);
  border-radius:12px;
  border:1px solid var(--border);
  color:var(--text);
}

/* ===== TOOLS GRID ===== */
.tools-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin-top:18px;
}

.tool-card {
  display:flex;
  gap:14px;
  padding:16px;
  border-radius:var(--radius);
  background:var(--glass);
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  transition:0.2s;
}

.tool-card:hover {
  transform:translateY(-3px);
  background:rgba(255,255,255,0.08);
}

.icon-box {
  width:58px;
  height:58px;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  display:grid;
  place-items:center;
}

.icon-box svg {
  width:28px;
  height:28px;
  stroke:var(--accent1);
  stroke-width:1.7;
}

/* ===== FOOTER ===== */
footer {
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid var(--border);
  color:var(--muted);
  display:flex;
  justify-content:space-between;
}

.footer-links a {
  color:var(--muted);
  text-decoration:none;
  margin-left:12px;
}
/* LCP optimization: disable heavy blur on first hero card */
.hero-card:first-child {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Mobile header layout */
@media (max-width: 768px) {
            .page {
            padding: 10px;
        }
          header {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
          }
        
        .nav-links {
            width: 100%;
            display: flex;
            justify-content: space-between;
            gap: 15px;
            flex-wrap: wrap;
        }
.btn, #themeToggle {
    padding: 6px 10px;
    height: 23px;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    text-transform: uppercase;
}
       #themeToggle {height: 35px;} 
       
form .btn.primary {
    height: 35px;
    width: 100% !important;
    max-width: 180px;
}
          .logo-link {
            gap: 10px;
          }
        
          .logo-box {
            width: 34px;
            height: 34px;
          }
        
          .site-title {
            font-size: 18px;
          }
        
        footer {
            flex-direction: column;
            gap: 10px;
            text-align: center;
        }
        
          .footer-links {
            display: flex;
            gap: 16px;
            justify-content: center;
          }
          .footer-links a {
            margin-left: 0;
        }
}