:root{
  --max: 860px;

  /* Light theme (default) */
  --bg: #ffffff;
  --surface: rgba(255, 255, 255, 0.96);
  --text: #111;
  --muted: #555;
  --line: #e9e9e9;
  --shadow: rgba(0, 0, 0, 0.06);

  /* page tints (light) */
  --tint-home: #f7f9fb;
  --tint-start: #f9faf8;
  --tint-about: #faf7f9;
  --tint-work: #f6f8f7;
  --tint-products: #f8f7fa;
}

/* Dark theme overrides */
.theme-dark {
  --bg: #0b0d12;
  --surface: rgba(18, 21, 30, 0.92);
  --text: #f2f4f8;
  --muted: #b2b8c6;
  --line: rgba(255, 255, 255, 0.10);
  --shadow: rgba(0, 0, 0, 0.45);

  /* page tints (dark) */
  --tint-home: #0f141c;
  --tint-start: #101a16;
  --tint-about: #16111a;
  --tint-work: #101519;
  --tint-products: #12111a;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  color:var(--text);
}

body{
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
}

/* Page-level background tints */
.page-home{
  background: linear-gradient(180deg, var(--tint-home), var(--bg) 40%);
}

.page-start{
  background: linear-gradient(180deg, var(--tint-start), var(--bg) 40%);
}

.page-about{
  background: linear-gradient(180deg, var(--tint-about), var(--bg) 40%);
}

.page-work{
  background: linear-gradient(180deg, var(--tint-work), var(--bg) 40%);
}

.page-products{
  background: linear-gradient(180deg, var(--tint-products), var(--bg) 40%);
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:28px 18px;
}

header{
  border-bottom:1px solid var(--line);
}

nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:14px 0;
  align-items:center;
}

nav a{
  color:var(--text);
  text-decoration:none;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background: rgba(255, 255, 255, 0.65);
}

/* Make nav button match the links */
.theme-toggle{
  color:var(--text);
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background: rgba(255, 255, 255, 0.65);
  cursor:pointer;
  font: inherit;
}

/* In dark mode, avoid “white pills” */
.theme-dark nav a,
.theme-dark .theme-toggle{
  background: rgba(255, 255, 255, 0.06);
}

h1{
  font-size:34px;
  margin:18px 0 6px;
  letter-spacing:-0.02em;
}

h2{
  font-size:22px;
  margin:28px 0 8px;
}

p{
  margin:10px 0;
}

.muted{
  color:var(--muted);
}

/* Cards */
.card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  margin:12px 0;
  box-shadow: 0 4px 14px var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Desktop-only hover */
@media (hover: hover) and (pointer: fine){
  nav a:hover,
  .theme-toggle:hover{
    background: rgba(0, 0, 0, 0.04);
  }

  .theme-dark nav a:hover,
  .theme-dark .theme-toggle:hover{
    background: rgba(255, 255, 255, 0.10);
  }

  .card:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--shadow);
  }
}

footer{
  border-top:1px solid var(--line);
  margin-top:28px;
  padding-top:16px;
  color:var(--muted);
  font-size:14px;
}
/* Dark mode link visibility fix */

.theme-dark a {
  color: #4fc3ff;                 /* brighter blue */
  font-weight: 500;               /* slight emphasis */
  text-decoration: underline;
  text-decoration-thickness: 2px; /* thicker underline */
  text-underline-offset: 4px;
  text-shadow: 0 0 6px rgba(79, 195, 255, 0.35);
}

.theme-dark a:hover,
.theme-dark a:focus {
  color: #9fdcff;
  text-shadow: 0 0 10px rgba(159, 220, 255, 0.6);
}