/* ====================================================================
   Atypical Depths — shared styles
   Used by index.html, minecraft.html, videos.html.
   Page-specific layout (hero, build cards, video grid, etc.) stays in
   each page's own <style> block, loaded AFTER this file.
   ==================================================================== */

/* ---- Theme variables ---- */
:root{
  --bg:#FAFAF6;
  --bg-rgb:250,250,246;
  --ink:#15181C;
  --teal:#0E4F4F;
  --teal-soft:#E4EEEE;
  --slate:#6B7280;
  --hairline:#E4E1D9;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}
:root[data-theme="dark"]{
  --bg:#111315;
  --bg-rgb:17,19,21;
  --ink:#F2F1EC;
  --teal:#4FC1C1;
  --teal-soft:#173232;
  --slate:#9AA1A9;
  --hairline:#2A2D30;
}

/* ---- Base reset ---- */
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background 0.2s ease, color 0.2s ease;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input, textarea{font-family:inherit;}

/* ---- Header shell & nav ---- */
header{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  background:rgba(var(--bg-rgb),0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
  z-index:40;
}
.logo{ font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:0.02em; }
nav ul{ display:flex; align-items:center; gap:32px; list-style:none; }
nav a{ font-size:13px; font-weight:500; color:var(--slate); transition:color 0.15s ease; }
nav a.active{ color:var(--ink); }
nav a:hover{ color:var(--ink); }
.nav-cta{ background:var(--ink); color:var(--bg) !important; padding:8px 16px; border-radius:2px; font-size:12px; }
.nav-cta:hover{ background:var(--teal) !important; color:#fff !important; }
.theme-toggle{
  font-size:14px; line-height:1; padding:7px 10px;
  border:1px solid var(--hairline); border-radius:2px;
  background:transparent; color:var(--ink); transition:all 0.15s ease;
}
.theme-toggle:hover{ border-color:var(--teal); color:var(--teal); }

/* ---- Auth nav widget ---- */
.auth-nav-group{ display:flex; align-items:center; gap:8px; }
.auth-email-display{ font-family:var(--mono); font-size:11px; color:var(--slate); }
.auth-email-display strong{ color:var(--ink); font-weight:500; }
.sign-in-btn{
  font-size:12px; font-weight:500; padding:7px 14px;
  border:1px solid var(--hairline); border-radius:2px; color:var(--ink);
  transition:all 0.15s ease; white-space:nowrap;
}
.sign-in-btn:hover{ border-color:var(--teal); color:var(--teal); }

/* ---- Auth modal (Sign In / Create Account) ---- */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4);
  align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:var(--bg); border:1px solid var(--hairline); padding:32px;
  max-width:360px; width:100%;
}
.modal-box h3{ font-family:var(--display); font-size:18px; font-weight:600; margin-bottom:20px; }
.modal-field{ margin-bottom:16px; }
.modal-field label{
  display:block; font-family:var(--mono); font-size:11px; color:var(--slate);
  letter-spacing:0.04em; margin-bottom:6px;
}
.modal-field input{
  width:100%; padding:10px 12px; border:1px solid var(--hairline);
  background:var(--bg); font-size:14px; color:var(--ink); border-radius:2px;
}
.modal-field input:focus{ outline:1px solid var(--teal); border-color:var(--teal); }
.modal-actions{ display:flex; gap:12px; margin-top:8px; }
.auth-error{ font-family:var(--mono); font-size:11px; color:#B4402F; margin-top:4px; min-height:14px; }
.auth-links{ margin-top:14px; font-size:12px; color:var(--slate); }
.auth-links a{ color:var(--teal); cursor:pointer; }
.modal-close{ float:right; font-size:12px; color:var(--slate); cursor:pointer; }
.modal-close:hover{ color:var(--ink); }

/* ---- Shared button color variants (page-specific CSS sets .btn sizing) ---- */
.btn-primary{ background:var(--ink); color:var(--bg); }
.btn-primary:hover{ background:var(--teal); color:#fff; }
.btn-primary:disabled{ opacity:0.5; cursor:not-allowed; }
.btn-secondary{ border:1px solid var(--hairline); color:var(--ink); }
.btn-secondary:hover{ border-color:var(--teal); color:var(--teal); }
.btn-secondary:disabled{ opacity:0.5; cursor:not-allowed; }
.btn-small{ padding:6px 12px; font-size:12px; }

/* ---- Shared mobile nav/auth sizing ---- */
@media (max-width:640px){
  header{ padding:0 16px; height:auto; min-height:56px; flex-wrap:nowrap; }
  .logo{ font-size:12px; white-space:nowrap; }
  nav ul{ gap:8px; }
  nav a:not(.nav-cta){ display:none; }
  .nav-cta{ padding:7px 12px; font-size:11px; white-space:nowrap; }
  .theme-toggle{ padding:6px 8px; font-size:12px; }
  .sign-in-btn{ padding:6px 10px; font-size:11px; }
  .auth-email-display{ display:none; }
}